標簽: electron
簡介
- electron使用html，css和JavaScript來構建塊跨平臺桌面應用程序（Mac，Windows和Linux）的一個開源庫。
- electron將Chromium和Node.js合并到同一個運行環境。
- electron只使用了Chromium的渲染庫而不是全部組件，這使得升級Chromium更加容易，但缺少了Google Chrome里的一些瀏覽器相關的特性。
構建開發環境
- electron應用本質上是一個Node.js應用程序，應用的入口是
package.json文件.
- 使用
npm init初始化項目目錄
npm init
// 或者
npm init -y
- 在
package.json中編寫一個start腳本
{
"name": "helloelectron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
- 安裝electron
npm install --save electron
了解進程
主進程
- 運行
package.json中的main腳本的進程是主進程。 - 一個electron應用有且只有一個主進程。
- 主進程可以進行GUI相關的原生API操作。
- 主進程使用
ipcMain模塊接收渲染進程和向渲染進程發送消息。
渲染進程
- Electron 使用了 Chromium 來展示 web 頁面，所以 Chromium 的多進程架構也被使用到。
- 每個web頁面運行在它自己的渲染進程中。
- 使用
BrowserWindow類開啟一個渲染進程并將這個實例運行在該進程中，當一個BrowserWindow實例被銷毀后，相應的渲染進程也會被終止。 - 渲染進程中不能調用原生資源，但是渲染進程中同樣包含Node.js環境，所以可以引入Node.js
模塊，在Node.js支持下，可以在頁面中和操作系統進行一些底層交互。 - 使用
ipcRenderer模塊接收主進程和向發送主進程發送消息。
開始開發
編寫main.js
- 如前所述，編寫main.js就是編寫主進程要執行的腳本。
- 其中包換整個應用的生命周期的管理，各個渲染進程的創建和銷毀及生命周期管理，進程間通信等。
- 下面創建一個最簡單的electron腳本。
// app可以理解為主進程
// BrowserWindow用于創建渲染進程
const {app, BrowserWindow} = require('electron')
app.on('ready', function createWindow () {
// 可以創建多個渲染進程
let win1 = new BrowserWindow({
width: 1024,
height: 768
})
let win2 = new BrowserWindow({
width: 1024,
height: 768
})
// 渲染進程中的web頁面可以加載本地文件
win1.loadFile('index.html')
// 也可以加載遠程頁面
win2.loadURL('http://www.baidu.com')
// 記得在頁面被關閉后清除該變量，防止內存泄漏
win1.on('closed', function () {
win1 = null
})
win2.on('closed', () => {
win2 = null
})
})
// 頁面全部關閉后關閉主進程，這里在不同平臺可能有不同的處理方式，這里不深入研究
app.on('window-all-closed', () => {
app.quit()
})
- 渲染進程中的頁面也可以加載node模塊
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>electron應用</title>
</head>
<body>
<script>
const fs = require('fs')
fs.readFile('./demo.txt', function (err, data) {
document.write(data)
})
</script>
</body>
</html>
-
npm start運行應用
分發應用
- 剛剛介紹了
npm start運行應用，那如何將應用分發給他人呢，下面簡單介紹Windows平臺的方式
復制
node_modules/electron/dist目錄下的文件到任意文件夾yourapp復制你的項目文件到
yourapp/resources/app下刪除
yourapp/resources/default_app.asar文件運行
yourapp/electron.exe
- 注意
創建好的應用如果在渲染進程中使用了相對目錄，由于目錄結構的變化會引起讀取文件失敗，所以推薦使用絕對路徑
如，這個項目中的index.html
<script>
const fs = require('fs')
const path = require('path')
fs.readFile(path.resolve(__dirname, 'demo.txt'), function (err, data) {
document.write(data)
})
</script>
往期精彩回顧
- Ant Design 組件 —— Form表單（一)
- Ant Design 組件 —— Form表單（二)
- CMS管理后臺入門指南 (Ant Design Pro v2.0)
- 實現點擊下載文件的幾種方法
- 在https中引入http資源所導致的問題
葉茂 廣州蘆葦科技web前端工程師
