初探Electron，從入門到實踐

本文由葡萄城技術團隊於博客園原創並首發

轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

“main”: “main.js”, -> “main”: “mainTest.js”,

// 在主進程中
global.sharedObject = {
someProperty: 'default value'
}
// 在第一個頁面中
require('electron').remote.getGlobal('sharedObject').someProperty= 'new value'Copy
// 在第二個頁面中
console.log(require('electron').remote.getGlobal('sharedObject').someProperty)

Electron 快速上手實踐　　

這裡我準備了一個Demo項目，這個Demo源碼您可以在葡萄城技術社區獲取到。

這個演示我將以SpreadJS的一個應用為例，展示如何將Web應用轉換為Electron桌面應用。

我這裡使用electron-builder進行項目文件的打包，您可以直接在項目根目錄通過 npx electron-builder命令執行打包命令。

項目打包過程可能需要些時間，在這期間，我向您介紹一下Electron 打包的配置文件，您可以根據您的實際情況配置如下文件以滿足您的需求

"build": {
"appId": "your.id", // appid
"productName": "程式名稱",// 程式名稱
"files": [ // 打包需要的不過濾的文件
"build/**/*",
"main.js",
"node_modules/**/*"
],
"directories": {
"output": "./dist-out", // 打包輸出的目錄
"app": "./", // package所在路徑
"buildResources": "assets"
},
"nsis": {
"oneClick": false, // 是否需要點擊安裝，自動更新需要關掉
"allowToChangeInstallationDirectory":true, //是否能夠選擇安裝路徑
"perMachine": true // 是否需要輔助安裝頁面
},
"win": {
"target": [
{
"target": "nsis", // 輸出目錄的方式
"arch": [ // 輸出的配置ia32或者x64/x86
"x64"
}
],
"publish": [ // 自動更新的配置
{
"provider": "generic", // 自己配置更新的伺服器要選generic
"url":"http://127.0.0.1:8080/updata/" //更新配置的路徑
}
}
}　　

 緩慢的打包進程結束後，您應該可以在項目目錄中的build目錄看到生成的exe文件

點擊安裝，它就像一個普通的桌面應用程式一樣開始了安裝進程。（這裡的軟體名稱和軟體logo都是我們項目中配置好的）

安裝完成後，打開程式，這裡我們可以看到打包好的應用和在Web端訪問時的效果別無二致，同時也能夠像其他桌面應用程式一樣，支持離線使用。

至此，初探Electron，從入門到實踐教程結束，如果大家還有更多使用上的疑惑或想要瞭解更多高級用法，可以通過官方文檔學習https://electronjs.org/docs。

同時，葡萄城資深開發工程師也為大家在2019年9月4日 14：00準備了乾貨滿滿的線上技術分享公開課，本次分享的內容也正是文中提到的Electron實踐，屆時歡迎大家按時參加。

http://live.vhall.com/878864086

PS：相關圖片和資源來自網路，如侵連刪