Android自動生成程式碼，視覺化腳手架之基礎資訊配置

---

highlight: a11y-dark

系列文章目錄

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

系列文章Github開源地址（原始碼及各項資料不間斷進行更新）： http://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檔案，書寫內容如下：

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日誌以及網路請求等需要的資訊，非常方便。

好了，各位老鐵，這章內容就到這裡，下一篇開始正式擼碼！

疫情反覆，多注意防護！