系列文章目錄

| 索引 | 標題 | | --- | --- | | 第一章 | Android自動生成程式碼，視覺化腳手架，將大大提高開發效率 |

系列文章Github開源地址（原始碼及各項資料不間斷進行更新）：

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

關於Electron的教程，網上一搜一大堆，咱們言簡意賅，直奔主題，老鐵們，跟好腳步，我們發車！

1、安裝 Node.js

別問為什麼，問就是，Electron開發依賴Node.js,因為Node.js中允許使用 JavaScript 開發服務端以及命令列程式，我們可以去官網http://nodejs.org下載最新版本的安裝程式，也可以下載我給大家準備好的安裝包，都在上面github開源地址中。

下載後，怎麼安裝，就不用我來教了吧，一路一路下一步，中間會有個選擇安裝路徑，這個儘量自己選一個，不要用預設的，安裝完成後會自動配置環境變數，如果沒有配置，那就需要自己去環境變數下配置一下：

自己配置的話，首先找到你的安裝路徑，複製一下：

然後配置到環境變數裡，以windows為例子

一切搞定之後，開啟命令視窗，輸入node -v，檢驗下是否安裝成功，回顯當前版本，證明安裝成功！

2、安裝 Electron

開啟命令視窗，輸入下面命令:

js npm install -g electron 下載慢的話，可以先執行下面的命令，electron安裝包指向淘寶的映象

js npm config set electron_mirror "http://npm.taobao.org/mirrors/electron/" 等待安裝完成之後，在命令列輸入electron -v能夠顯示版本號代表安裝成功。

如果想刪除 Electron，可以使用下面的命令。

js npm uninstall electron 如果想升級 Electron，則可以使用這個命令。

js npm update electron -g 大家也可以指定版本進行安裝，有一些版本升高之後，會有一些相容性問題，目前，我的版本是15.0.0，大家可以和我保持一致。

js cnpm install electron@^15.0.0 -g

以上兩步執行完畢之後，環境就搭建完畢，剩下的就是愉快的敲程式碼時刻。

搞一個Hello，World！

隨便找一個空的資料夾，進入到目錄下，執行下面的命令，或者在命令視窗找到你的目錄，都行

js npm init npm install --save-dev electron 或者安裝制定版本 npm install --save-dev electron@^15.0.0 如下圖，我新建的一個code目錄：

進入到當前目錄命令下，執行上面的命令：

當執行npm init時，會按照步驟，讓輸入很多東西，如果你不想一步一步輸入，每次直接回車即可，反正也是可以修改的。

如果想進行一步一步輸入，具體流程如下，中間不想輸入，可以回車略過：

js package name 包名，也就是工程名，預設是括號中的內容 version:版本號，預設是括號中的內容 description:描述資訊 entry point：入口檔名，預設是括號中的內容 test command:測試命令 git repository:git倉庫地址 keywords: 密碼 author: 作者名字 license: (ISC)許可證 我自己執行的程式如下：

執行完成之後，就會在你剛才選中的目錄下，生成一個，package.json檔案：

我們開啟看一下，其實就是我們一步一步輸入的內容：

接著我們在去執行第二個命令，我是選擇指定版本進行安裝的：

命令執行完畢後，會生成如下圖所示：

node_modules，是安裝node後，用來存放下載安裝的包資料夾。

執行完命令之後，我們就可以書寫主入口了，之前執行npm init命令時，有個主入口的輸入，還記得嗎，就是下面這個：

新建index.js檔案

內容如下：

```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檔案：

內容如下：

```html

Hello,World!

``` 最後修改package.json，新增Electron執行時

回到目錄下，開啟命令視窗，執行npm start命令，如下圖

執行命令之後，隨之就會，彈出來一個視覺化視窗，如下圖：

ok，一個簡單的Demo就完成了，是不是賊簡單。

老鐵們，第二章的內容，雖然有點多，但基本上都是些操作的步驟，環境的安裝以及簡單的專案執行，還是希望大家從頭到尾的執行一遍，都是一些流程化的操作，並不是很難，下一章，我們講講述視覺化工具的一些配置項，敬請期待！