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