Android自動生成Shape資原始檔，邁出視覺化腳手架第一步！（上）
highlight: a11y-dark
系列文章目錄
| 索引 | 標題 | | --- | --- | | 第一章 | Android自動生成程式碼，視覺化腳手架，將大大提高開發效率 | | 第二章 | Android自動生成程式碼，視覺化腳手架之環境搭建 | | 第三章 | Android自動生成程式碼，視覺化腳手架之基礎資訊配置 |
系列文章Github開源地址（原始碼及各項資料不間斷進行更新）：
https://github.com/AbnerMing888/AndroidShortcutTools
Hello，各位鐵鐵，經過前三章的講述，前置開發的準備都已完成，下面就是針對各個功能的開發。還是前邊所說的，視覺化腳手架的開發使用的是，web語言，也就是，Html，Css以及JavaScript，對web不是很瞭解的老鐵，可以在不忙的時候，學一學，相對於Android開發而言，還是比較簡單的；沒有時間學的老鐵，也沒關係，回頭去改我的模板也行，但是，建議還是學學比較好。
這章我們就進入到了擼碼時刻，逐步來開發出一個一個應對我們Android場景的功能，這章對應的功能是，Shape的自動生成，我們先一起看下效果：
目前Shape自動生成，主要完成的功能有，自動生成實心，空心，多角度，漸變等功能，可以在選擇專案的情況下，自動生成到對應的drawable檔案下，而且還貼心的給出了全域性的dp和color字首配置，可以靈活的滿足我們實際開發中的要求，點兩下，就可以根據UI樣式生成我們想要的效果，大家可以下載原始碼，體驗一下。
這樣的一個簡單功能我們該如何實現呢？其實也非常簡單，就是幾個簡單的html頁面，加上一些js互動方法，對實現方式感興趣的老鐵，可以繼續往下瀏覽，不太關注實現方式的，可以直接下原始碼，執行看效果哦~
準備好了嗎？我們開始發車！
由於內容有點多，我們分為上下兩部分，今天我們先講述上半部分。
一、檔案及Dialog環境配置
通過gif效果圖我們可以發現，我們需要選擇電腦的路徑，以及對檔案的查詢，建立，寫入等功能，彈出dialog選擇目錄，在electron裡我們需要引入一個模組remote，remote 模組提供了一種在渲染程序和主程序之間進行程序間通訊的簡便途徑，使用 remote 模組，可以呼叫主程序物件的方法，而無需顯式地傳送程序間訊息，這類似於 Java 的 RMI，雖然說13版本之後禁用了Remote模組，但是也提供了使用一個新的包 @electron/remote 來替代。
安裝@electron/remote，進入到你的工程目錄下，執行下面的命令：
js
npm i -D @electron/remote
如下圖所示：
執行完成之後，在node_modules目錄下，就會生成一個@electron目錄，如下圖：
接著我們在index.js檔案裡，進行如下初始化：
contextIsolation為fasle時可以渲染器過程中使用 require()。
檔案操作
檔案的操作，至關重要，畢竟我們所有的功能都需要進行建立檔案以及儲存到相關目錄中，對於這塊的知識點，老鐵們，可以關注一下；檔案的增刪改查，在electron裡，某個頁面如果用到了和檔案互動的功能，我們就可以引入fs模組，如下圖：
下面我們針對其中的功能點，一一做的簡單的概述，當然了，不是很全，大家想了解的更多的話，可以去網上搜一搜。
1 、新建目錄
```js fs.mkdir(“路徑”, function(err){
if (err) {
console.log('mkdir err:'+err)
}
console.log('New Directory Created')
}) ```
2 、讀取目錄資訊
使用fs.readdir()或同步的fs.readdirSync()方法能夠讀取目錄的資訊。呼叫的結果是一個當前目錄下檔案和子目錄的字串陣列。 ```js fs.readdir(“路徑”, function(err, files){
if (err) {
console.log(‘readdir err:'+err)
return
}
console.log(files)
}) ```
3 、刪除目錄
使用fs.rmdir()或同步的fs.rmdirSync()方法能夠刪除目錄，並且不會返回資訊：
```js fs.rmdir(myDir, function(err){
if (err) {
console.log('rmdir err:'+err)
return
}
console.log('deleted the directory')
}) ```
4、寫檔案
fs.writeFile方法可以對檔案進行寫操作，如果沒有則會建立，有的話，內容則會覆蓋。
```js fs.writeFile(“檔案的名字”, content, function (err) {
if (err) {
console.log("An error occurred creating the file " + err.message)
} else {
console.log("The file has been successfully saved")
}
}) ```
5、讀檔案
fs.readFile讀取使用者本地檔案有兩種方式：讀取完整檔案和讀取檔案的一部分，讀取完整檔案是最常用的操作。基本用法如下：
```js fs.readFile(filepath, 'utf-8', function (err, data) {
if (err) {
alert("An error occurred reading the file :" + err.message)
return
}
//Display the file contents
console.log("The file content is : " + data)
}) ```
6、刪除檔案
fs.unlink()方法能夠刪除使用者電腦上的檔案。由於這個操作基於標準POSIX方法（Portable Operating System Interface of UNIX，用於操作檔案和目錄的標準命令集），所以刪除方法叫做unlink。可以使用fs.existsSync()測試檔案是否還存在：
```js if (fs.existsSync(filePath)) {
fs.unlink(filepath, function (err) {
if (err) {
console.log("An error ocurred updating the file" + err.message)
return
}
console.log("File succesfully deleted")
})
} ``` 7 、獲取檔案資訊
通過fs.stats方法可以獲取檔案資訊。這個方法可以確定是檔案還是一個目錄。如下程式碼段進入某個目錄，然後輸出了檔案資訊：
```js fs.stat(filePath, function (err, stats) {
if (err) {
return console.error(err)
}
console.log(stats)
console.log("Got file info successfully!")
// Check file type
console.log("isFile ? " + stats.isFile())
console.log("isDirectory ? " + stats.isDirectory())
}) ```
以上就是fs中提供的幾個操作檔案的方法，各位老鐵可以簡單的瞭解一下。
這裡簡單的說一個注意點，如果你是用iframe引入的網頁，那麼在引入模組的時候，需要在前邊增加parent。
二、基礎資訊配置頁開發
基礎資訊的配置，是一個全域性的配置項，比如統一的路徑，dp，color的字首，以及後面的物件繼承，頭引數的設定等等。
這個頁面備註的資訊，已經描述的很清楚了，這裡再囉嗦一下。
選擇專案生成路徑，大家儘量要選擇一個Android專案，因為後面所有的功能，都是和這個路徑相關的，我會把一些功能，直接生成到對應的目錄下，比如，shape檔案，我就會直接生成到res下的drawable檔案下；當然了，你也可以不選擇，這個隨你心意。
dp字首和color字首，以你的專案為標準，來設定相關的字首，一般都是統一的，比如我們公司，dp字首是@dimen/common_dp_，後面是不同的大小，這樣在生成的時候，大小設定相關的，都會以此字首+大小為標準，省的再修改了，所以啊，老鐵們，字首很有必要的，這個功能一定要用起來。例如下面使用了字首的程式碼：
程式碼就不全貼了，大家看github原始碼即可，貼幾個主要的方法，講述一下：
給出提示彈框，我們可以使用下面，這是一個info型別的，當然了還有其他的型別，大家可以根據自己的實際業務進行選擇，目前提供的有"none", "info", "error", "question" or "warning"。
js
function showSuccess(msg) {
const require = parent.window.require;
const dialog = require('@electron/remote').dialog;
dialog.showMessageBox({
type: 'info', //彈出框型別
message: msg
});
}
選擇檔案路徑，也就是，開啟系統的選擇路徑視窗，前提需要進行引入dialog模組
js
const dialog = require('@electron/remote').dialog;
```js dialog.showOpenDialog({ properties: ['openDirectory'] }).then(result => { const path = result.filePaths; if (path != null && path != "") { //選擇後回顯 $(".config_file_input").val(path); //進行儲存路徑 localStorage.setItem("select_path", path) }
}); ``` 基礎資訊配置沒有什麼好說的啊，頁面的繪製，大家看config.html檔案，都是一些標籤語言，這個沒什麼好說的，config.js檔案，最主要的方法，就是上邊的路徑選擇，然後儲存，和回顯，用到了localStorage來進行存和取。
Js用到的是Jquery開發，說到這，有一個需要注意的，在electron裡直接引入Jquery會報錯，需要按照如下方式進行引入：
```html
``` 後續針對開發中的問題，我會進行梳理總結，給到大家。
好了老鐵們，我們下半部分繼續。
- Android自動生成程式碼，視覺化腳手架之基礎資訊配置
- 如何搞一個線上的Shape生成
- 簡單封裝一個易拓展的Dialog
- 整合一個以官網(微信，QQ，微博)為標準的登入分享功能
- Android打造專有Hook第四篇，實戰增量程式碼規範檢查
- Android極簡MVVM，從一個基類庫談起
- Android元件化開發，其實就這麼簡單
- Android打造專有hook，讓不規範的程式碼扼殺在萌芽之中
- Android包體積過大，真的會影響績效
- Android長按圖示展示快捷方式
- Android自動生成Shape資原始檔（下）
- Android自動生成Shape資原始檔，邁出視覺化腳手架第一步！（上）
- Android自動生成程式碼，視覺化腳手架，將大大提高開發效率
- Android自動生成程式碼，視覺化腳手架之環境搭建
- 怎麼去約束程式碼的統一性
- 沒有準備充分，先不要著急投簡歷
- Android如何生成本地或者遠端aar