Electron 入门笔记 - PC端WebApp开发 H5变EXE
2019-02-15
阅读 {{counts.readCount}}
评论 {{counts.commentCount}}
需求是把H5页面变成PC端的可执行程序
最好是Windows Mac Linux 3端都支持
而且不能像java python这种需要用户自己安装依赖的
百度一番以后决定用Electron来实现。
他的原理就是自带一个chrome内核，在客户端本地运行h5代码
不过node和Electron 我都是刚学，所以本文章只是分享一下折腾的过程
基于这个官方入门例子
[https://electronjs.org/docs/tutorial/first-app#trying-this-example](https://electronjs.org/docs/tutorial/first-app#trying-this-example)
#### 一、准备阶段
首先你得有node和npm环境
windows用户可有去node官网下载安装包安装
[https://nodejs.org/zh-cn/](https://nodejs.org/zh-cn/)
装完以后建议再装一个cnpm，让速度变快
用法就是把本文后面所有npm install 命令 变成 cnpm install
后面就不再赘述了 统一用npm举例
[http://npm.taobao.org/](http://npm.taobao.org/)
### 二、第一个项目
新建一个项目文件夹，创建3个文件
```
your-app/
├── package.json
├── main.js
└── index.html
```
package.json
```json
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
```
main.js
```javascript
const { app, BrowserWindow } = require('electron')
// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win
function createWindow () {
// 创建浏览器窗口。
win = new BrowserWindow({ width: 800, height: 600 })
// 然后加载应用的 index.html。
win.loadFile('index.html')
// 打开开发者工具
win.webContents.openDevTools()
// 当 window 被关闭，这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
win = 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 (win === null) {
createWindow()
}
})
// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
```
index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
```
官方例子中是说在该目录下直接执行这个命令
```shell
npm start
```
但实际遇到的情况是这样的一段报错
**"electron不是内部或外部命令，也不是可运行的程序"。**
百度半天云里雾里
最终从某个回答里找到了答案才恍然大悟！
根本没装过electron呀！！！
安装electron
```shell
npm install electron -g
```
再cd到项目路径下，执行启动命令就可以了
```shell
npm start
```
登登噔噔
之后还可以再稍微加点料，改进一下
例如 在main.js稍作修改
1. 取消弹出调试菜单
2. 去掉菜单栏
```javascript
// 打开开发者工具
// win.webContents.openDevTools()
// 去掉自带的默认菜单栏
win.setMenu(null)
```
顺便可以在根目录下 再创建一个bat文件 一键启动项目
run.bat
```shell
@echo off
npm start
```
最后
把事先已经开发好的H5项目
连着js css img json等依赖一起丢进来
入口是index.html
第一个webapp项目，就可以启动了
执行run.bat
Duang~~~~ 一个简单的H5应用就出现了，测试一下发现兼容性特别好！稍加修改就可以出炉了直接！
不过最好还是重写一下页面的布局，以及按照Electron给的API调整一下代码，以提升用体验。
这里刚好顺便宣传下我的壁纸网站
极简壁纸 [https://bzbeta.zzzmh.cn](https://bzbeta.zzzmh.cn/)
(当然PC客户端版本还在努力折腾中)
#### 关于打包成exe
参考：[https://www.cnblogs.com/kakayang/p/9559777.html](https://www.cnblogs.com/kakayang/p/9559777.html)
先安装打包工具依赖
```shell
npm install electron-packager -g
```
##### 修改
package.json
主要是添加了pack命令的参数 (别忘了给start后面加个英文逗号)
```json
{
"name": "wallpaper",
"version": "0.0.1",
"main": "main.js",
"scripts": {
"start": "electron .",
"pack": "electron-packager . wallpaper --win --out ../wallpaper_windows_64 --arch=x64 --app-version=0.0.1 --electron-version=4.0.4"
}
}
```
参数大概的意思
> “.”：需要打包的应用目录（即当前目录），
“wallpaper”：应用名称，
“--win”：打包平台（以Windows为例），
“--out ../wallpaper_windows_64”：输出目录，
“--arch=64”：64位，
“--app-version=0.0.1”：应用版本，
“--electron-version=4.0.4”：electron版本
打包命令：
```shell
npm run pack
```
效果如下
#### END
目前就折腾到这一步
最后贴一下官方文档地址
[https://electronjs.org/docs](https://electronjs.org/docs)
沪公网安备31010602005070号