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

最新推荐文章于 2024-04-27 11:23:57 发布

程序员一鸣

最新推荐文章于 2024-04-27 11:23:57 发布

阅读量1.1k

点赞数 3

分类专栏： Android可视化脚手架文章标签： android Android脚手架 Android自动生成代码

本文链接：https://blog.csdn.net/ming_147/article/details/124396312

版权

Android可视化脚手架专栏收录该内容

5 篇文章 4 订阅

订阅专栏

系列文章目录

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

系列文章Github开源地址（源码及各项资料不间断进行更新）：

https://github.com/AbnerMing888/AndroidShortcutTools

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官网：https://www.electronjs.org/

关于Electron的教程，网上一搜一大堆，咱们言简意赅，直奔主题，老铁们，跟好脚步，我们发车！

1、安装 Node.js

别问为什么，问就是，Electron开发依赖Node.js,因为Node.js中允许使用 JavaScript 开发服务端以及命令行程序，我们可以去官网https://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.html文件：

内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Android可视化工具</title>
  </head>
  <body>
    <h1>Hello,World!</h1>
  </body>
</html>

最后修改package.json，添加Electron运行时