Android自動生成代碼,可視化腳手架之環境搭建

語言: CN / TW / HK

系列文章目錄

| 索引 | 標題 | | --- | --- | | 第一章 | 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開源地址中。

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

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

image.png

然後配置到環境變量裏,以windows為例子

image.png

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

image.png

2、安裝 Electron

打開命令窗口,輸入下面命令:

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

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

image.png

如果想刪除 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目錄:

image.png

進入到當前目錄命令下,執行上面的命令:

image.png

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

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

js package name 包名,也就是工程名,默認是括號中的內容 version:版本號,默認是括號中的內容 description:描述信息 entry point:入口文件名,默認是括號中的內容 test command:測試命令 git repository:git倉庫地址 keywords: 密碼 author: 作者名字 license: (ISC)許可證 我自己執行的程序如下:

image.png

執行完成之後,就會在你剛才選中的目錄下,生成一個,package.json文件:

image.png

我們打開看一下,其實就是我們一步一步輸入的內容:

image.png

接着我們在去執行第二個命令,我是選擇指定版本進行安裝的:

image.png

命令執行完畢後,會生成如下圖所示:

image.png

node_modules,是安裝node後,用來存放下載安裝的包文件夾。

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

image.png

新建index.js文件

image.png

內容如下:

```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文件:

image.png

內容如下:

```html

Android可視化工具

Hello,World!

``` 最後修改package.json,添加Electron運行時

image.png

回到目錄下,打開命令窗口,執行npm start命令,如下圖

image.png

執行命令之後,隨之就會,彈出來一個可視化窗口,如下圖:

image.png

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

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