Android自动生成代码，可视化脚手架之环境搭建
系列文章Github开源地址（源码及各项资料不间断进行更新）：
Hello,各位老铁，系列文章上一篇，简单大概熟悉了一下基本的功能，当然了这只是其中的一部分，随着需求的增加，各种方便我们日常开发的功能都会研发出来，那么对于这样的一个可视化工具，我们该如何开发出来呢？又需要掌握什么技术呢？环境如何搭建呢？这篇，咱们就简单的聊一聊。
可能很多老铁有疑问，为什么不直接以插件的形式在Android Studio中使用呢，这样直接IDE中就可以操作了，也不用再打开其他工具了，岂不是更方便，哎！小老弟，一开始我就是整的插件，还写了好几个功能，但有一个致命的问题是，视图的绘制，贼麻烦，大家感兴趣的可以试试，多个控件的摆放，还有，拖拽View的实现，亲自操刀试试就知道了，正因为各个视图的绘制比较麻烦，最终才选择了可视化工具的开发。
目前可视化工具采用的是Electron进行开发的，Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序，它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用，也就是说使用Electron，您必须有一定的web开发经验，如果没有也没关系，后续您可以直接在我的模板中进行对应的修改即可，当然了，为了能够自己灵活的可视化，建议还是掌握一些Web的经验，编程语言之间的语法，基本互通，学起来也比较容易。
对于Electron，网上流传着一些风言风语，说微软要放弃Electron了，这里简单辟谣一下，微软自始至终，就没有放弃Electron，也不会放弃Electron，只是旗下的Teams产品打算把Electron框架换成WebView2而已，况且微软内部有很多软件都是基于Electron开发的，比如VSCode和GitHubDesktop，不仅仅是只有Teams这么一个产品在用它，非但微软内部，包括Facebook、MongoDB、twitch、Slack、迅雷、字节跳动、阿里、拼多多、京东等大企业都在用这个框架，这么一个好东西，微软怎么会放弃它呢？所以，各位老铁，不要在听信网上的谣言了，桌面开发工具Electron，兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序，学起来，指定没错！
关于Electron的教程，网上一搜一大堆，咱们言简意赅，直奔主题，老铁们，跟好脚步，我们发车！
1、安装 Node.js
别问为什么，问就是，Electron开发依赖Node.js,因为Node.js中允许使用 JavaScript 开发服务端以及命令行程序，我们可以去官网nodejs.org下载最新版本的安装程序，也可以下载我给大家准备好的安装包，都在上面github开源地址中。
下载后，怎么安装，就不用我来教了吧，一路一路下一步，中间会有个选择安装路径，这个尽量自己选一个，不要用默认的，安装完成后会自动配置环境变量，如果没有配置，那就需要自己去环境变量下配置一下：
自己配置的话，首先找到你的安装路径，复制一下：
然后配置到环境变量里，以windows为例子
一切搞定之后，打开命令窗口，输入node -v，检验下是否安装成功，回显当前版本，证明安装成功！
2、安装 Electron
打开命令窗口，输入下面命令:
npm install -g electron下载慢的话，可以先执行下面的命令，electron安装包指向淘宝的镜像
npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"等待安装完成之后，在命令行输入electron -v能够显示版本号代表安装成功。
如果想删除 Electron，可以使用下面的命令。
npm uninstall electron如果想升级 Electron，则可以使用这个命令。
npm update electron -g大家也可以指定版本进行安装，有一些版本升高之后，会有一些兼容性问题，目前，我的版本是15.0.0，大家可以和我保持一致。
cnpm install electron@^15.0.0 -g以上两步执行完毕之后，环境就搭建完毕，剩下的就是愉快的敲代码时刻。
搞一个Hello，World！
随便找一个空的文件夹，进入到目录下，执行下面的命令，或者在命令窗口找到你的目录，都行
npm init
npm install --save-dev electron 或者安装制定版本 npm install --save-dev electron@^15.0.0如下图，我新建的一个code目录：
进入到当前目录命令下，执行上面的命令：
当执行npm init时，会按照步骤，让输入很多东西，如果你不想一步一步输入，每次直接回车即可，反正也是可以修改的。
如果想进行一步一步输入，具体流程如下，中间不想输入，可以回车略过：
package name 包名，也就是工程名，默认是括号中的内容
version:版本号，默认是括号中的内容
description:描述信息
entry point：入口文件名，默认是括号中的内容
test command:测试命令
git repository:git仓库地址
keywords: 密码
author: 作者名字
license: (ISC)许可证我自己执行的程序如下：
执行完成之后，就会在你刚才选中的目录下，生成一个，package.json文件：
我们打开看一下，其实就是我们一步一步输入的内容：
接着我们在去执行第二个命令，我是选择指定版本进行安装的：
命令执行完毕后，会生成如下图所示：
node_modules，是安装node后，用来存放下载安装的包文件夹。
执行完命令之后，我们就可以书写主入口了，之前执行npm init命令时，有个主入口的输入，还记得吗，就是下面这个：
新建index.js文件
内容如下：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
}
// 应用程序准备就绪后打开一个窗口
app.whenReady().then(createWindow)紧接着新建一个index.js中对应的index.html文件：
内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Android可视化工具</title>
</head>
<body>
<h1>Hello,World!</h1>
</body>
</html>
最后修改package.json，添加Electron运行时
回到目录下，打开命令窗口，执行npm start命令，如下图
执行命令之后，随之就会，弹出来一个可视化窗口，如下图：
ok，一个简单的Demo就完成了，是不是贼简单。
老铁们，第二章的内容，虽然有点多，但基本上都是些操作的步骤，环境的安装以及简单的项目运行，还是希望大家从头到尾的执行一遍，都是一些流程化的操作，并不是很难，下一章，我们讲讲述可视化工具的一些配置项，敬请期待！
作者：二流小码农
来源：https://juejin.cn/post/7090322746260848671
