一. 准备工作
1. 首先,我们要安装electron-prebuilt,它是一个npm模块,因此我们可以使用Npm来进行安装,它是一个electron的预编译版本。
npm install -g electron-prebuilt
2. 接下来安装electron-packager ,它也是一个npm模块,是一个用于打包electron应用的工具,具体使用方法我们稍后会详细说明 。
npm install -g electron-packager
二. 创建一个应用
创建一个electron应用。我们现在仅仅需要3个文件。
index.html
main.js
package.json
index.html使我们想要显示的页面,main.js为此应用的入口,package.json为npm项目的配置文件。
1.新建一个名为myApp的文件夹
2.进入项目目录进行初始化
cd myApp
npm init
3.新建一个package.json,内容如下:
1. {
2. "name": "zzh",
3. "version": "0.0.1",
4. "description": "a simple application",
5. "main": "main.js",
6. "scripts": {
7. "test": "echo \"Error: no test specified\" && exit 1",
8. "start": "electron ."
9. },
10. "author": "zzh",
11. "license": "ISC"
12. }
4.新建一个index.html, 内容如下:
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>Document</title>
8. </head>
9. <body>
10. <h1>hello electron</h1>
11. </body>
12. </html>
5. 新建一个main.js, 内容如下:(main.js的文件名对应package.json中main的值)
1. const {app, BrowserWindow} = require('electron');
2. let win;
3. let windowConfig = {
4. width:800,
5. height:600
6. };
7. function createWindow(){
8. win = new BrowserWindow(windowConfig);
9. win.loadURL(`file://${__dirname}/index.html`);
10. //开启调试工具
11. win.webContents.openDevTools();
12. win.on('close',() => {
13. //回收BrowserWindow对象
14. win = null;
15. });
16. win.on('resize',() => {
17. win.reload();
18. })
19. }
20.
21. app.on('ready',createWindow);
22. app.on('window-all-closed',() => {
23. app.quit();
24. });
25.
26. app.on('activate',() => {
27. if(win == null){
28. createWindow();
29. }
30. })
关于浏览器BrowserWindow模块更多的参数设置可以查看官方文档https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html
三. 运行
现在只要在myApp目录下执行npm start 就可以运行了
npm start
因为我们在main.js中写了win.webContents.openDevTools(); 开启了浏览器调试工具,所以我们打开的界面是这样的:
四. 打包
现在整个过程进行到最后一步,我们需要打包我们自己的应用,那么如何打包,这就需要用到我们先前已经安装的electron-packager
打开命令行我们可以这样使用它:
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1
大概格式是这样的:
electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>
但是这样并不够,会提示:
Unable to determine Electron version. Please specify an Electron version
我们需要指明Electron version。这个参数是当前安装Electron的版本,不知道的可以直接electron就能看到了,我这里是1.4.13,经过改进后如下:
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1 --electron-version=1.4.13
执行完毕后,看到父级目录下已经产生了我们希望看到的应用文件夹。里面的应用程序HelloWorld.exe就可以直接打开桌面应用了。
但是每次打包的执行命令太长太麻烦了,所以我们可以把命令写进package.json中,执行命令调用它就好了。
更改后的package.json如下:
1. {
2. "name": "zzh",
3. "version": "0.0.1",
4. "description": "a simple application",
5. "main": "main.js",
6. "scripts": {
7. "test": "echo \"Error: no test specified\" && exit 1",
8. "start": "electron .",
9. "package": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=1.4.13"
10. },
11. "author": "zzh",
12. "license": "ISC"
13. }
这样我们每次打包只需要执行 npm run-script package就可以了。
npm run-script package
五. 更改图标
如果我们想要更改窗口左上角的图标和任务栏的图标,只需要在打包的命令上加个icon参数就好了
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=1.4.13 --icon=./app/img/icon.ico
六. 当然,我们打包好的应用最后是要发给客户使用,那么,怎么把我们的electron应用整合成一个安装包呢?
可以使用下面两种方法: