Electron簡介
Electron是由Github開發，基於Chromium和Node.js，使用JavaScript、HTML和CSS等Web技術創建跨平臺原生桌面應用的框架。兼容Mac、Window和Linux，它構建的應用可在這三個操作系統上面運行，藉助Electron，我們可以使用純JavaScript來調用豐富的原生APIs。
- 自動更新
- 原生的菜單和通知
- 崩潰報告
- 調試和性能分析
- windows安裝程序
開發環境介紹
- 主機操作系統：Windows7
- Python版本：Python 2.7.12
- node版本：v8.9.3
- npm版本：v5.5.1
- cnpm版本：v6.0.0
- Electron版本：v2.0.7
提示：1.Windows7 / Server 2008 R2 或更高。2.Visual Studio 2017 - 免費下載 VS 。3.2017 Community Edition。4.Python 2.7.12。5.Node.js。
開發工具介紹
開發工具
- Vs code最新版
插件安裝
- npm
- npm Intellisense
- Node.js Extension Pack
- Node.js Modules Intellisense
Electron安裝
安裝Python
- 進入官網下載頁面下載對應版本的msi安裝包 (https://www.python.org/downloads/)。
- 點擊運行msi安裝包，默認安裝python。
- win + r 輸入cmd打開命令行，輸入
python -V查看python是否正確安裝。
安裝node、npm和配置npm安裝路徑
- 進入官網下載頁面下載對應版本的msi安裝包 (https://nodejs.org/zh-cn/download/releases/)。
- 點擊運行msi安裝包，默認安裝node v8.9.3。
- win + r 輸入cmd打開命令行，輸入
node -v查看node v8.9.3是否正確安裝，輸入npm -v查看集成的npm v5.5.1是否正確安裝。 - npm配置全局安裝路徑。
- win + r 輸入cmd打開命令行，輸入：
npm config set prefix "C:\Program Files\nodejs\node_global"- 查看nodejs文件夾中是否自動生成node_global文件夾，如果存在，則說明設置成功。
- 右擊計算機，點擊屬性，點擊高級系統設置，點擊環境變量，翻閱系統變量內容，找到path變量，在變量值末尾添加;C:\Program Files\nodejs\node_global;。
安裝cnmp
- win + r 輸入cmd打開命令行，輸入：
npm install -g cnpm --registry=https://registry.npm.taobao.org"- win + r 輸入cmd打開命令行，輸入：
cnpm -v查看cnpm是否正確安裝。
提示：1.electron包掛載在國外網站上，使用npm下載比較容易失敗，使用cnpm能夠快速下載指定版本的electron包。
安裝electron
- win + r 輸入cmd打開命令行，輸入：
cnpm install -g electron- win + r 輸入cmd打開命令行，輸入：
electron -v查看electron是否正確安裝。
構建第一個應用程序
新建工程文件夾
新建文件夾your-app,打開vscode,在vscode中打開該文件夾。
創建Electron基本結構
根據需要在your-app文件夾中創建文件main.js和index.html.一個最基本的Electron應用一般來說會有如下的目錄結構：
your-app/
├── package.json
├── main.js
└── index.html生成package.json
npm initnpm init成功之後，將在工程目錄下生成默認的package.json文件，如下所示：
{
"name": "electrontest",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}配置啓動腳本
在默認package.json文件中添加一個 start 腳本來指引 Electron 去執行當前的 package
{
"name": "electrontest",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}添加啓動程序代碼
在main.js文件中添加後臺邏輯代碼如下：
{
const {app, BrowserWindow} = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// 創建瀏覽器窗口。
win = new BrowserWindow({width: 800, height: 60})
// 然後加載應用的 index.html。
win.loadFile('index.html')
// 打開開發者工具
win.webContents.openDevTools()
// 當 window 被關閉，這個事件會被觸發。
win.on('closed', () => {
// 取消引用 window 對象，如果你的應用支持多窗口的話，
// 通常會把多個 window 對象存放在一個數組裏面，
// 與此同時，你應該刪除相應的元素。
win = null
})
}
// Electron 會在初始化後並準備
// 創建瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow)
// 當全部窗口關閉時退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應用及其菜單欄會保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，當單擊dock圖標並且沒有其他窗口打開時，
// 通常在應用程序中重新創建一個窗口。
if (win === null) {
createWindow()
}
})
// 在這個文件中，你可以續寫應用剩下主進程代碼。
// 也可以拆分成幾個文件，然後用 require 導入。
}添加需要渲染的模板文件
在index.html文件中添加html模板代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>啓動程序
在終端輸入如下代碼：
electron .運行效果
發佈於 2019-04-04