作者:lizhonglin
github: https://github.com/Leezhonglin/
有一个需求是需要构建系统的桌面的应用,搜索了很多资料发现了electron这个平台。功能非常强大,在git上面也有很多星星。自己研究了一番总结了一些。可以供大家参考。那么electron是如何构建桌面应用的呢?
1、新建项目文件夹 my
2、用命令行打开项目文件夹
shift + 鼠标右键 =》 在此处打开Powershell窗口
3、创建index.js文件写入如下内容
(官方代码拷贝过去就可以)
const electron = require('electron');
const {
app, // 控制应用生命周期的模块
BrowserWindow, // 创建原生浏览器窗口的模块
} = electron;
// 保持一个对于 window 对象的全局引用,如果不这样做,
// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭
let mainWindow;
function createWindow() {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({width: 800, height: 600});
// 加载应用的 index.html。
// 这里使用的是 file 协议,加载当前目录下的 index.html 文件。
// 也可以使用 http 协议,如 mainWindow.loadURL('http://nodejh.com')。
mainWindow.loadURL(`file://${__dirname}/index.html`);
// 启用开发工具。
mainWindow.webContents.openDevTools();
// 当 window 被关闭,这个事件会被触发。
mainWindow.on('closed', () => {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 与此同时,你应该删除相应的元素。
mainWindow = null;
});
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 在 macOS 上,当点击 dock 图标并且该应用没有打开的窗口时,
// 绝大部分应用会重新创建一个窗口。
if (mainWindow === null) {
createWindow();
}
});
4、在powershell中使用命令初始化项目
npm init
5、拷贝项目的需要的html、css、static等资源到项目目录
6、安装项目需要依赖
npm install electron --save-dev
故障:
PS C:\Users\lj\Desktop\my> npm install electron-prebuilt --save-dev
npm WARN deprecated electron-prebuilt@1.4.13: electron-prebuilt has been renamed to electron. For more details, see http://electron.atom.io/blog/2016/08/16/npm-install-electronelectron-prebuilt@1.4.13 postinstall C:\Users\lj\Desktop\my\node_modules\electron-prebuilt
node install.jsnpm WARN my@1.0.0 No description
npm WARN my@1.0.0 No repository field.
- electron-prebuilt@1.4.13
added 1 package in 6.303s
故障解决:
如果只是在本机上开发可以在 package,json 文件中加入以下字段,
{
.
.
.
"private": true
.
.
.
}
再次安装时即不会出现此问题
7、运行 命令启动程序
electron 在开发阶段的启动方式
找到node_modules.bin\election.cmd文件执行下面的代码:
.\node_modules\.bin\electron .\index.js
可以把上面的命令写入入口文件中的script中
{
"name": "my",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "electron ."
},
"private": true,
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^3.0.5",
"electron-prebuilt": "^1.4.13"
}
}
启动方式就变成
npm run test 或者 electron .
都可以完成启动。
上面两种方式运行的效果如下图:
8、打包
1.方法一
首先进入项目目录找到如图文件夹(省略 … 项目文件夹\node_modules\electron )
里面有一个dist文件夹
拷贝出来如下图
图中标记的文件夹是我们需要操作的文件夹
进入省略… dist\resources文件夹新建一个文件夹为app或者自己喜欢的名字
将我们刚才创建好的能够启动的项目文件拷贝到app文件夹中
除上图标记不需要的文件外全部拷贝到app文件夹中拷贝后的结果是:
这下我们在回到dist目录能看见一个叫electron.exe
的可执行程序,我们双击他就可以运行我们的程序了。
效果如下图:
2. 方法二:
安装electron-packager 如果提示没有权限请在命令前面加上sodu
lizhonglindeMacBook-Pro:nodetest lizhonglin$ npm install electron-packager --save
安装好之后入下
+ electron-packager@12.2.0
updated 19 packages in 8.189s
lizhonglindeMacBook-Pro:nodetest lizhonglin$
这下我们就可以开始打包了
大概的命令格式是这样的
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options> <icon>
electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本> <图标>
命令说明:
- location of project:项目所在路径
- name of project:打包的项目名字
- platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux)
- architecture:决定了使用 x86 还是 x64 还是两个架构都用
- electron version:electron 的版本
- optional options:可选选项
- icon : 图标
我目前项目的情况,用终端切换到这个目录
但是这样并不够,会提示:
Unable to determine Electron version. Please specify an Electron version
我们需要指明Electron version。这个参数是当前安装Electron的版本,不知道的可以直接electron就能看到了,我这里是1.4.13,经过改进后如下:
electron-packager . nodetest --win --out ../demoApp --arch=x64 --electron-version=1.4.13 --icon=./o.ico
为了每次不输入这么多命令 我们可以把写好的命令加入到package.json
的配置文件中去。
{
"name": "testapp",
"version": "1.0.0",
"description": "跨平台应用",
"main": "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager . nodetest --win --out ../demoApp --arch=x64 --electron-version=1.4.13 --icon=./o.ico"
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^3.0.5",
"electron-prebuilt": "^1.4.13"
},
"dependencies": {
"electron-packager": "^12.2.0"
}
}
使用命令
npm run-script package
就可以开始打包了
执行完毕后,看到父级目录下已经产生了我们希望看到的应用文件夹。里面的应用程序demo.exe就可以直接打开桌面应用了。
这样我们就能使用打包好的东西了。如果是windows还可以使用NSIS
工具打包成可以安装的桌面应用。见下一篇《NSIS打包electron生成的文件为exe安装包》
欢迎转载收藏。