簡介
- Electron 是一個能夠使用 JavaScript, HTML 和 CSS 來創建桌面應用的框架。打包後可以直接運行 macOS、Windows 和 Linux 上,或者發佈不到應用商店。
- 前端開發人員可以使用自己比較熟悉的語言開發一款自己的桌面應用,進行安裝使用
- Electron 包含三個核心:
- Chromium 用於顯示網頁內容。
- Node.js 用於本地文件系統和操作系統
- 自定義 APIs 用於使用經常需要的 OS 本機函數
- Electron 開發應用程序就像構建一個帶有網頁界面的 Node.js 應用程序
開發環境
- node 環境開發 (未安裝者 前往下載安裝: nodejs 鏈接)
- Electron 不同版本對 node 版本有不同的要求 (可通過 node -v 各個 electron 版本信息網址: electron 版本鏈接 )
創建項目
創建文件夾、初始化項目、安裝依賴
mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
注意:
# 若下載不成功 可創建 .npmrc文件 => 指定下載源:
registry=https://registry.npm.taobao.org
electron_mirror="https://npm.taobao.org/mirrors/electron/"
創建主進程
- Electron 應用程序的入口 (就我們而言,是
main.js
文件)
- 主進程 主要控制應用程序的生命週期、顯示圖形用戶界面及其元素、執行本機操作系統交互以及在網頁中創 建渲染進程(子進程)
- Electron 應用程序只能有一個主進程
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
創建子程序
- 這是應用程序初始化後您想要顯示的頁面。 此網頁代表渲染過程。 您可以創建多個瀏覽器窗口,每個窗口都使用自己的獨立渲染進程
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>
We are using Node.js <span></span>,
Chromium <span></span>,
and Electron <span></span>.
</p>
</body>
</html>
定義預加載腳本
- 您的預加載腳本就像是 Node.js 和您的網頁之間的橋樑。 它允許你將特定的 API 和行爲暴露到你的網頁上,而不是不安全地把整個 Node.js 的 API 暴露。 在本例中,我們將使用預加載腳本從
process
對象讀取版本信息,並用該信息更新網頁。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
修改您的 package.json
文件
- Electron 應用程序使用
package.json
文件作爲主入口 (像其它的 Node.js 應用程序)。您的應用程序的主腳本是 main.js
,所以相應修改 package.json
文件:
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
應用程序生成 安裝包
- 藉助
electron-builder
生成安裝包
npm i -D electron-builder
# 在下面指定構建配置package.json:
"build": {
"appId": "your.id",
"mac": {
"category": "your.app.category.type"
}
}
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder"
}
npm run dist // 生成安裝包
npm run pack // 生成測試包
- 使用 vue-cli 開發完一個項目後,用 electron-builder 將項目打包爲桌面應用程序
# 安裝electron-builder
vue add electron-builder
# 預覽
npm run electron:serve
# npm命令打包
npm run electron:build
參考資料
electron
electron-builder
cnpm 鏡像源
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://juejin.cn/post/6956835681238777887