前言
由于最近安排给我一个桌面端应用的工作,很长时间没有搞桌面端了,有些生疏,所以决定复习一下知识并整理下过程。进入正文吧!
正文
1、初始化 node 项目,生成 package.json 文件
使用命令 npm init
复制代码
//package.json文件
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Jane Doe",
"license": "MIT"
}
复制代码
2、安装electron
依赖到项目中, 使用以下任意命令:
npm install --save-dev electron
cnpm install --save-dev electron
yarn add electron --dev
复制代码
3、package.json配置内容如下:
{
"name": "electron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^17.1.2"
}
}
复制代码
4、创建前端项目或引入前端项目, 项目目录为以下结构:
--main.js
--preload.js
--index.html
--package.json
复制代码
5、参考官网,创建main.js入口文件,配置以下内容:
// main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow () {
// 隐藏菜单栏
Menu.setApplicationMenu(null)
// 创建浏览器窗口
const win = new BrowserWindow({
//width: 800, //窗口宽度,单位像素. 默认是 800
//height: 600, //窗口高度,单位像素. 默认是 600
icon: './logo.ico', // 设置窗口左上角的图标
show: false, //窗口创建的时候是否显示. 默认为 true
webPreferences: {
nodeIntegration: true, // 是否完整支持node。默认为 true
preload: path.join(__dirname, 'preload.js') //界面的其它脚本运行之
前预先加载一个指定脚本。
}
})
// 下面这两行代码配合上面 new BrowserWindow 里面的 show: false,可以实现打开时窗口最大化
win.maximize()
win.show()
// 并且为你的应用加载index.html
win.loadFile('index.html')
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
// 当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上,当单击dock图标并且没有其他窗口打开时,
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
复制代码
6、创建preload.js,所有Node.js API都可以在预加载过程中使用配置以下内容:
// preload.js
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
复制代码
7、创建index.html文件,和main.js中生命的win.loadFile('index.html')一致
8、运行命令 npm start ,可快速打开你的web应用,查看应用配置的内容是否正确。
9、安装打包依赖,推荐以下两种方式:electron-packager 和 electron-builder
一、electron-packager
①使用electron-packager打包,安装electron-packager依赖,以下任意一种安装即可:
npm install --save-dev electron-packager
cnpm install --save-dev electron-packager
yarn add electron --dev
复制代码
②安装成功后需要配置package.json文件,配置如下:
"scripts": {
"start": "electron .",
"packager": "electron-packager . 'app' --platform=win32 --arch=x64 --out=./build --electron-version 9.0.2 --app-version 1.0.0 --overwrite --icon=./logo.ico"
},
复制代码
packager参数介绍:
- platform:设置平台,window,linux还是Mac
- arch:x84还是x64,
- outapp的位置可以替换成你打包后的exe名字
- electron-version:electron的版本,必须要指定,这里设置为1.6.2,可查看package.json中electron安装的版本号
- icon 图标地址
复制代码
③执行命令 npm run packager,运行成功后就会在项目根目录中看到build文件,运行exe文件就可以看到打包后的项目了。
二、electron-builder
①使用electron-builder打包,安装electron-builder依赖,以下任意一种安装即可:
npm install electron-builder --save-dev
cnpm install electron-builder --save-dev
yarn add electron-builder --dev
复制代码
②安装成功后需要配置package.json文件,配置如下:
{
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "electron .",
"build": "electron-builder --win --x64"
},
// 使用electron-builder打包需要配置"build"
"build": {
"productName":"xxxx", // 项目名称
"appId": "electron.app", // 安装包名称
"directories": {
"output": "build"
}, // 输出文件夹
"copyright":"xxxx", // 版权信息
"nsis": { //nsis相关配置,打包方式为nsis时生效
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升,如果为false,则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./build/icons/aaa.ico", // 安装图标
"uninstallerIcon": "./build/icons/bbb.ico", // 卸载图标
"installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"shortcutName": "xxxx", // 图标名称
"include": "build/script/installer.nsh", // 包含的自定义nsis脚本
},
// 发布到github
publish: {
provider: 'github',
repo: 'xxxx', // git仓库
owner: 'xxxx', // 拥有者
token: 'xxxxxxxxxxxxxxx', // gitToken
releaseType: 'release',
publishAutoUpdate: true // 发布自动更新(需要配置GH_TOKEN)。 默认true
},
//配置windows环境
"win": {
"icon": "build/icons/aims.ico",
"target": ["nsis","zip"]
},
//配置mac环境
"mac": {
"target": ["dmg","zip"]
},
//配置linux环境
"linux": {
"icon": "build/icons"
}
}
}
//来自:https://segmentfault.com/a/1190000016695922?utm_source=tag-newest
复制代码
③执行命令 npm run build,运行成功后就会在项目根目录中看到build文件,运行exe文件就可以看到打包后的项目了。
一个简单的桌面端应用就生成了。
总结
本文只是简单的讲解了一下electron的安装过程并成功打包成桌面端应用,还有很多深入的东西没有展示,日后平头哥会继续分享详细内容。