Android自动生成代码，可视化脚手架之基础信息配置

系列文章目录

第一章：Android自动生成代码，可视化脚手架，将大大提高开发效率

第二章：Android自动生成代码，可视化脚手架之环境搭建

系列文章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文件，书写内容如下：

//脚本运行工具
var exec = 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日志以及网络请求等需要的信息，非常方便。

好了，各位老铁，这章内容就到这里，明天开始正式撸码！

疫情反复，多注意防护！