標(biāo)簽: electron
簡介
- electron使用html哩罪，css和JavaScript來構(gòu)建塊跨平臺桌面應(yīng)用程序（Mac楼熄，Windows和Linux）的一個開源庫召娜。
- electron將Chromium和Node.js合并到同一個運(yùn)行環(huán)境。
- electron只使用了Chromium的渲染庫而不是全部組件宾袜，這使得升級Chromium更加容易，但缺少了Google Chrome里的一些瀏覽器相關(guān)的特性驾窟。
構(gòu)建開發(fā)環(huán)境
- electron應(yīng)用本質(zhì)上是一個Node.js應(yīng)用程序庆猫，應(yīng)用的入口是
package.json文件.
- 使用
npm init初始化項(xiàng)目目錄
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
了解進(jìn)程
主進(jìn)程
- 運(yùn)行
package.json中的main腳本的進(jìn)程是主進(jìn)程。 - 一個electron應(yīng)用有且只有一個主進(jìn)程绅络。
- 主進(jìn)程可以進(jìn)行GUI相關(guān)的原生API操作月培。
- 主進(jìn)程使用
ipcMain模塊接收渲染進(jìn)程和向渲染進(jìn)程發(fā)送消息。
渲染進(jìn)程
- Electron 使用了 Chromium 來展示 web 頁面恩急，所以 Chromium 的多進(jìn)程架構(gòu)也被使用到杉畜。
- 每個web頁面運(yùn)行在它自己的渲染進(jìn)程中。
- 使用
BrowserWindow類開啟一個渲染進(jìn)程并將這個實(shí)例運(yùn)行在該進(jìn)程中衷恭，當(dāng)一個BrowserWindow實(shí)例被銷毀后此叠，相應(yīng)的渲染進(jìn)程也會被終止。 - 渲染進(jìn)程中不能調(diào)用原生資源随珠，但是渲染進(jìn)程中同樣包含Node.js環(huán)境灭袁，所以可以引入Node.js
模塊，在Node.js支持下窗看，可以在頁面中和操作系統(tǒng)進(jìn)行一些底層交互茸歧。 - 使用
ipcRenderer模塊接收主進(jìn)程和向發(fā)送主進(jìn)程發(fā)送消息。
開始開發(fā)
編寫main.js
- 如前所述显沈，編寫main.js就是編寫主進(jìn)程要執(zhí)行的腳本软瞎。
- 其中包換整個應(yīng)用的生命周期的管理，各個渲染進(jìn)程的創(chuàng)建和銷毀及生命周期管理构罗，進(jìn)程間通信等铜涉。
- 下面創(chuàng)建一個最簡單的electron腳本。
// app可以理解為主進(jìn)程
// BrowserWindow用于創(chuàng)建渲染進(jìn)程
const {app, BrowserWindow} = require('electron')
app.on('ready', function createWindow () {
// 可以創(chuàng)建多個渲染進(jìn)程
let win1 = new BrowserWindow({
width: 1024,
height: 768
})
let win2 = new BrowserWindow({
width: 1024,
height: 768
})
// 渲染進(jìn)程中的web頁面可以加載本地文件
win1.loadFile('index.html')
// 也可以加載遠(yuǎn)程頁面
win2.loadURL('http://www.baidu.com')
// 記得在頁面被關(guān)閉后清除該變量遂唧，防止內(nèi)存泄漏
win1.on('closed', function () {
win1 = null
})
win2.on('closed', () => {
win2 = null
})
})
// 頁面全部關(guān)閉后關(guān)閉主進(jìn)程芙代，這里在不同平臺可能有不同的處理方式，這里不深入研究
app.on('window-all-closed', () => {
app.quit()
})
- 渲染進(jìn)程中的頁面也可以加載node模塊
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>electron應(yīng)用</title>
</head>
<body>
<script>
const fs = require('fs')
fs.readFile('./demo.txt', function (err, data) {
document.write(data)
})
</script>
</body>
</html>
-
npm start運(yùn)行應(yīng)用
分發(fā)應(yīng)用
- 剛剛介紹了
npm start運(yùn)行應(yīng)用盖彭，那如何將應(yīng)用分發(fā)給他人呢纹烹，下面簡單介紹Windows平臺的方式
復(fù)制
node_modules/electron/dist目錄下的文件到任意文件夾yourapp復(fù)制你的項(xiàng)目文件到
yourapp/resources/app下刪除
yourapp/resources/default_app.asar文件運(yùn)行
yourapp/electron.exe
- 注意
創(chuàng)建好的應(yīng)用如果在渲染進(jìn)程中使用了相對目錄页滚，由于目錄結(jié)構(gòu)的變化會引起讀取文件失敗，所以推薦使用絕對路徑
如铺呵，這個項(xiàng)目中的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)
- 實(shí)現(xiàn)點(diǎn)擊下載文件的幾種方法
- 在https中引入http資源所導(dǎo)致的問題
葉茂 廣州蘆葦科技web前端工程師
