electron框架 快速入门
简介
- 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 style="background: white;">
<h1>Hello World!</h1>
<p>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></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镜像源
