electron 使用心得
一、快速開始你的 electron 項目
在這裡我推薦大家使用 electron 官方提供的 demo，
它的工程結構一目瞭然，使上手更加輕鬆
demo git https://github.com/electron/electron-quick-start
二、如何上手
- 在一個窗口中實現切換頁面
替換頁面中的節點
- 使用 jQuery
這裡需要注意的是，在 electron 中不可以使用 script 標籤的 src 來引入 jQuery，得寫入 script 標籤來實現
<script>window.$ = window.jQuery = require(./js/main/jquery-3.2.0.min.js);</script>
- 跨域
由於子進程是客戶端，所以會遇到跨域的請求，將跨域的請求放入到主進程中請求，由於主進程是 node 伺服器，所以不存在跨域的問題
子進程與主進程間的通信，使用 electron 提供的 ipc 通信模塊
文檔地址：
https://electronjs.org/docs/api/ipc-main
https://electronjs.org/docs/api/ipc-renderer
ipc 通信模塊的使用
在子進程中往主進程發送數據：
var electron = require(electron)
// 子進程的 ipc 模塊
var ipcRenderer = electron.ipcRenderer;
var postResponse = electron.ipcRenderer.sendSync(magua, a, b, c)
// ipcRenderer.sendSync 是一個同步的發送消息事件，它的第一個參數是和主進程約定好的自定義事件名，後面可以接多個參數
在主進程中監聽子進程的事件，接收數據:
ipcMain.on(magua, (event, a, b, c) => {
// 這裡的 magua 是事件名，是和子進程約定好的自定義欄位
// 回調函數中的參數，第一個 event 後的參數是要子進程傳遞的參數
// 參數依次傳入，不受限制
// ----
// 由於是服務端，所以使用不了前端的 ajax
// 這裡使用 request 模塊來實現
// 引入 request
var request = require(request)
// 根據發送的數據類型不同，request 的使用也不同
// application/json 格式的數據
request({
url: url,
method: "POST",
json: true,
headers: {
"content-type": "application/json",
},
body: JSON.stringify(requestData)
}, function(error, response, body) {
if (!error && response.statusCode == 200) {
}
});
// application/x-www-form-urlencoded 格式的數據
request.post({url:url, form: form }, function(error, response, body) {
if (!error && response.statusCode == 200) {
}
})
// multipart/form-data 格式的數據
request.post({url:url, formData: form }, function(error, response, body) {
if (!error && response.statusCode == 200) {
}
})
// 以上三種方法中第一個參數為一個包含請求路徑和參數的對象，對象的 key 是固定的
})
- 引入 JS 文件
在 html 中 引入 JS 文件
使用 electron 提供的方法引入，如下
<script>
require(./test.js)
</script>
在 JS 文件中引入其它 JS 文件中的函數，如下
在被引入的 JS 文件中將所需函數導出，
key 是導出自定義名稱，value 是函數的名稱
可以導出多個
module.exports = {
test_1: __test_1,
test_2: __test_2,
}
在所需的 JS 文件中導入其它 JS 文件的函數
var { test } = require(./test.js)
var { test_1, test_2} = require(./test_more.js)
三、打包你的項目
使用 electron-packager
兩種方法，如下
- 第一種全局安裝 electron-packager在要打包的項目的 package.json 文件中加上 dependencies 欄位，這個欄位代表項目所需要的依賴文件，但不包括測試所需要的包註：安裝項目依賴時，npm install XXX—save 會自動添加到 dependenciesnpm install XXX—save—dev 會自動添加到 devDependencies 打包時會自動忽略*devDependencies 這個欄位代表項目測試時所需要，打包時不需要的依賴文件然後執行打包命令
- 第二種在項目局部安裝 electron-packager執行打包命令
打包命令
在項目中的 package.json 文件中，找到 scrips 欄位 ，加上
"packager": "electron-packager . <此次打包的項目名稱> <項目使用平臺（Windows/Mac/Linux）> <使用的架構> <項目所在路徑> <系統位數> <項目使用的 electron 版本> <同名文件是否覆蓋>"
// 範例
"packager": "electron-packager . 測試版本 --win --out ./ --arch=ia32 --version 1.4.13 --overwrite"
推薦閱讀：