Electron
Electron是由Github開發(fā)，用HTML，CSS和JavaScript來構(gòu)建跨平臺(tái)桌面應(yīng)用程序的一個(gè)開源庫(kù)。 Electron通過將Chromium和Node.js合并到同一個(gè)運(yùn)行時(shí)環(huán)境中，并將其打包為Mac，Windows和Linux系統(tǒng)下的應(yīng)用來實(shí)現(xiàn)這一目的。
特點(diǎn)：
- 上手簡(jiǎn)單：只要會(huì)前端的知識(shí)就可以做桌面應(yīng)用
- 跨平臺(tái)：Mac，Linux，Windows
- 自動(dòng)更新
創(chuàng)建項(xiàng)目
全局安裝 electron
npm install -g electron
// 推薦使用 cnpm 進(jìn)行安裝
cnpm install -g electron
創(chuàng)建項(xiàng)目的三種方式
通過 git 克隆項(xiàng)目
- 克隆這倉(cāng)庫(kù)
git clone https://github.com/electron/electron-quick-start
- 進(jìn)入倉(cāng)庫(kù)
cd electron-quick-start
- 安裝依賴庫(kù)
npm install
- 運(yùn)行應(yīng)用
npm start
通過 electron-forge 創(chuàng)建項(xiàng)目
electron-forge 相當(dāng)于 electron 的一個(gè)腳手架，可以讓我們更方便的創(chuàng)建、運(yùn)行和打包 electron 項(xiàng)目。
- 全局安裝 electron-forge
npm install -g electron-forge
- 創(chuàng)建項(xiàng)目
electron-forge init my-app
- 進(jìn)入項(xiàng)目文件
cd my-app
- 運(yùn)行項(xiàng)目
npm start
手動(dòng)創(chuàng)建項(xiàng)目
- 新建一個(gè)文件夾
- 新建一個(gè) index.html 和 index.js
- npm init 生成一個(gè) package.json, 注意的是 package.json 里面配置的 main 必須是入口 js （主進(jìn)程）
- 執(zhí)行 electron . 運(yùn)行項(xiàng)目
// main.js 主進(jìn)程文件
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require("path")
// 變量 保存對(duì)應(yīng)窗口的引用
let mainWindow;
app.on('ready', function() {
// 創(chuàng)建 BrowserWindow 的實(shí)例，賦值給 mainWindow 打開窗口
// 軟件默認(rèn)打開的寬度和高度 { width: 800, height: 600 }
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 重要：該屬性讓渲染進(jìn)程也擁有使用 node 的能力
nodeIntegration: true
}
})
// 開啟渲染進(jìn)程中的調(diào)試模式
mainWindow.webContents.openDevTools()
// 把 index.html 加載到窗口里面
// mainWindow.loadFile('index.html')
mainWindow.loadURL(path.join('file:', __dirname, 'index.html'))
mainWindow.on('closed', () => {
mainWindow = null
})
})
Electron 主進(jìn)程和渲染進(jìn)程
主進(jìn)程里面可以直接拿到的東西，在渲染進(jìn)程中需從 remote 中獲取
// 例如：需要獲取到 net
// 主進(jìn)程
const { new } = require("electron")
// 渲染進(jìn)程
const { new } = require("electron").remote
Electron 運(yùn)行 package.json 的 main 腳本的進(jìn)程被稱為主進(jìn)程。在主進(jìn)程中運(yùn)行的腳本通過創(chuàng)建 web 頁(yè)面來展示用戶界面。一個(gè) Electron 應(yīng)用總是有且只有一個(gè)主進(jìn)程。
由于 Electron 使用了 chromium（谷歌瀏覽器）來展示 web 頁(yè)面，所以 Chromium 的多進(jìn)程架構(gòu)也被使用到了，每個(gè) Electron 中的 web 頁(yè)面運(yùn)行在他自己的渲染進(jìn)程中。
主進(jìn)程使用 BrowserWindow 實(shí)例創(chuàng)建頁(yè)面。每個(gè) BrowserWindow 實(shí)例都是在自己的渲染進(jìn)程里運(yùn)行頁(yè)面。當(dāng)一個(gè) BrowserWindow 實(shí)例被銷毀后，響應(yīng)的渲染進(jìn)程也會(huì)被終止。
進(jìn)程：進(jìn)程（Process）是計(jì)算機(jī)中的程序關(guān)于某數(shù)據(jù)集合上的一次運(yùn)行活動(dòng)，是系統(tǒng)進(jìn)行資源分配和調(diào)度的基本單位，是操作系統(tǒng)結(jié)構(gòu)的基礎(chǔ)。
線程：在一個(gè)程序里的一個(gè)執(zhí)行路程就叫做線程（thread）。更準(zhǔn)確的定義是：線程是 “一個(gè)進(jìn)程內(nèi)部的控制序列”。
Electron 渲染進(jìn)程中通過 Node.js 讀取本地文件
在普通的瀏覽器中，web 頁(yè)面通常在一個(gè)沙盒環(huán)境中運(yùn)行，不被允許去接觸原生的資源。然而 Electron 的用戶在 Node.js 的 API 支持下可以在頁(yè)面中和操作系統(tǒng)進(jìn)行一些底層交互。
Node.js 在主進(jìn)程和渲染進(jìn)程中都可以使用。渲染進(jìn)程因?yàn)榘踩拗?，不能直接操作原?GUI。雖然如此，因此集成了 Node.js，渲染進(jìn)程也有了操作系統(tǒng)底層 API 的能力，Node.js 中常用的 path、fs、crypto 等模塊在 Electron 可以直接使用，方便我們處理鏈接、路徑、文件、MD5等，同時(shí) npm 還有成千上萬的模塊供我們選擇。
const fs = require('fs')
const content = document.getElementById('content')
const button = document.getElementById('button')
button.addEventListener('click', (e) => {
fs.readFile('package.json', 'utf8', (e) => {
content.textContent = data;
})
})
常用事件
app 常用事件
- ready：當(dāng) Electron 完成初始化時(shí)被觸發(fā)
- window-all-closed：所有窗口被關(guān)閉時(shí)觸發(fā)
- before-quit：在應(yīng)用程序開始關(guān)閉窗口之前觸發(fā)
- will-quit：當(dāng)所有窗口都已經(jīng)關(guān)閉并且應(yīng)用程序?qū)⑼顺鰰r(shí)觸發(fā)
- quit：在應(yīng)用程序退出時(shí)觸發(fā)
webContent 常用事件
- did-finish-load：導(dǎo)航完成時(shí)觸發(fā)，即選項(xiàng)卡的旋轉(zhuǎn)器將停止旋轉(zhuǎn)，并派發(fā) onload 事件后。
- dom-ready：一個(gè)框架中的文本加載完成后觸發(fā)該事件
