系列文章Github开源地址(源码及各项资料不间断进行更新):
https://github.com/AbnerMing888/AndroidShortcutTools
Hello,各位铁铁,今天的内容比较简单,大致过一下Electron一些基本用法,虽然说这些比较简单,但又是不得不去了解的,正如做Android的我们,也不是一上来就会的,需要一个循序渐进的过程,下一章,我们再去实际的开发功能。
今天咱们继续讲述关于可视化脚手架的教程,前两章的内容,主要是一个大概的了解,没有牵扯到实际的代码开发,毕竟工欲善其事必先利其器,跟咱们学任何语言一样,都得需要一个前提,比如Java,需要jdk,Android需要sdk一样,同样的可视化脚手架也需要一个前置项,通过上一章的内容,基本上前置项已经完成,这一章的内容,我们主要讲一下,页面的配置,以及如何查看错误信息。
可能有些老铁不懂web,这个之前也讲述过,有条件的可以学一学,没条件的话,回头直接改里面的模板就行,还有可视化中的代码,都是一些基本的代码,没有太复杂的,我都会一一加上注释,百分之百照顾老铁们。可视化脚手架的一个最终目的就是提高我们开发中的效率,毕竟开发中,很多都是重复的代码,有此工具总比没有强,毕竟低代码的时代也在一步步到来。
一、三个属性介绍:
设置宽和高:
上一章的最后,我们简单实现了一个Hello,World,如下图所示:
针对这个窗口,我们如何改变它的宽高呢,很简单,打开index.js文件:修改如下位置,width:宽,height:高,可以按照自己的需求,来进行设置。
窗口固定:
正常情况下,我们的窗口不是固定的,不需要点击右上角的放大和缩放进行延展,那么我们就可以在BrowserWindow里添加一个属性resizable: false,来禁止缩放,执行npm start之后,是不是窗口固定不变了?神奇吧!
Index.js文件里的代码比较简单,引入了一个electron模块,接着创建了一个窗口,最后进行打开窗口,都有相关注释,基本上模板不用改变。
删除窗口按钮
有的老铁说了,这一排东西,我不想要,有没有办法去掉呢?
编辑
当然必须可以,直接win.setMenu(null),如下图所示:
执行npm start命令后我们看下效果:
二、IDE模式进行开发
以上的我们,采用的是记事本形式进行更改,还有命令窗口的形式执行命令,显然在实际的开发中,是很不实用的,毕竟太慢,太耗费时间了,所以,还是建议大家,选择IDE方式进行开发,什么IDE都行,这个没有限制,我采用的是WebStorm进行开发的,大家也可以选择这个,网上去下载即可,这里就不贴下载地址了。
安装好IDE之后,我们打开昨天创建的项目,如下图:
以后我们就可以直接在IDE里书写相关代码了。
之前写完代码,我们都是在命令窗口执行npm start来启动程序,每次都要输入命令,是很麻烦的,既然都采用IDE开发了,我们就可以使用IDE带来的便利。
在当前项目下,新建一个run.js文件,书写内容如下:
//脚本运行工具varexec=require('child_process').exec; free=exec('electron .');
第一次运行,需要在run.js文件执行右键,如下图
执行完以后,运行按钮就显示出来了,以后直接可以点击运行按钮,或者快捷键Ctrl+shift+F10就可以快速的启动窗口
三、如何查看错误信息:
我们可以在index.js文件,增加快捷键信息,如下图,引入globalShortcut模块:
globalShortcut 模块可以在操作系统中注册/注销全局快捷键, 以便可以为操作定制各种快捷键。
紧接着,把win提为成员变量
底部打开窗口进行修改,增加快捷键:ctrl+shift+i
我们运行程序后,执行ctrl+shift+i,我们就会发现,和浏览器中F12是一样的,我们就可以在右侧,查看log日志以及网络请求等需要的信息,非常方便。
好了,各位老铁,这章内容就到这里,下一篇开始正式撸码!