需求是把H5页面变成PC端的可执行程序
最好是Windows Mac Linux 3端都支持
百度一番以后决定用Electron来实现。
node和Electron 我都是刚学
所以本文只是分享一下折腾的过程


所以总的来说 Electron 就是自带Chrome内核的本地WebApp,可以把H5直接编译成PC的可执行程序



官方入门例子

https://electronjs.org/docs/tutorial/first-app#trying-this-example


首先你得有node和npm环境

windows用户可有去node官网下载安装包安装

https://nodejs.org/zh-cn/

装完以后建议再装一个cnpm,让速度变快

用法就是把本文后面所有npm install 命令 变成 cpm install

后面就不再赘述了 统一用npm举例

http://npm.taobao.org/



新建一个项目文件夹,创建3个文件

  1. your-app/
  2. ├── package.json
  3. ├── main.js
  4. └── index.html


package.json

  1. {
  2.   "name": "your-app",
  3.   "version": "0.1.0",
  4.   "main": "main.js",
  5.   "scripts": {
  6.     "start": "electron ."
  7.   }
  8. }


main.js

  1. const { app, BrowserWindow } = require('electron')
  2.  
  3. // 保持对window对象的全局引用,如果不这么做的话,当JavaScript对象被
  4. // 垃圾回收的时候,window对象将会自动的关闭
  5. let win
  6.  
  7. function createWindow () {
  8.   // 创建浏览器窗口。
  9.   win = new BrowserWindow({ width: 800, height: 600 })
  10.  
  11.   // 然后加载应用的 index.html。
  12.   win.loadFile('index.html')
  13.  
  14.   // 打开开发者工具
  15.   win.webContents.openDevTools()
  16.  
  17.   // 当 window 被关闭,这个事件会被触发。
  18.   win.on('closed', () => {
  19.     // 取消引用 window 对象,如果你的应用支持多窗口的话,
  20.     // 通常会把多个 window 对象存放在一个数组里面,
  21.     // 与此同时,你应该删除相应的元素。
  22.     win = null
  23.   })
  24. }
  25.  
  26. // Electron 会在初始化后并准备
  27. // 创建浏览器窗口时,调用这个函数。
  28. // 部分 API 在 ready 事件触发后才能使用。
  29. app.on('ready', createWindow)
  30.  
  31. // 当全部窗口关闭时退出。
  32. app.on('window-all-closed', () => {
  33.   // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
  34.   // 否则绝大部分应用及其菜单栏会保持激活。
  35.   if (process.platform !== 'darwin') {
  36.     app.quit()
  37.   }
  38. })
  39.  
  40. app.on('activate', () => {
  41.   // 在macOS上,当单击dock图标并且没有其他窗口打开时,
  42.   // 通常在应用程序中重新创建一个窗口。
  43.   if (win === null) {
  44.     createWindow()
  45.   }
  46. })
  47.  
  48. // 在这个文件中,你可以续写应用剩下主进程代码。
  49. // 也可以拆分成几个文件,然后用 require 导入。



index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World!</title>
  6.   </head>
  7.   <body>
  8.     <h1>Hello World!</h1>
  9.     We are using node <script>document.write(process.versions.node)</script>,
  10.     Chrome <script>document.write(process.versions.chrome)</script>,
  11.     and Electron <script>document.write(process.versions.electron)</script>.
  12.   </body>
  13. </html>


官方例子中是说在该目录下直接执行这个命令

  1. npm start


但实际遇到的情况是这样的

"electron不是内部或外部命令,也不是可运行的程序"。


百度半天云里雾里

最终从某个回答里找到了答案才恍然大悟!

根本没装过electron呀!!!


安装electron

  1. npm install electron -g


再cd到项目路径下,执行启动命令就可以了

  1. npm start



登登噔噔




之后还可以再稍微加点料,改进一下

例如 在main.js稍作修改

1. 取消弹出调试菜单

2. 去掉菜单栏

  1. // 打开开发者工具
  2. // win.webContents.openDevTools()
  3.  
  4. // 去掉自带的默认菜单栏
  5. win.setMenu(null)


顺便可以在根目录下 再创建一个bat文件 一键启动项目

run.bat

  1. @echo off
  2. npm start



最后

把事先已经开发好的H5项目

连着js css img json等依赖一起丢进来

入口是index.html

第一个webapp项目,就可以启动了




执行run.bat

Duang~~~~ 一个简单的H5应用就出现了,测试一下发现兼容性特别好!稍加修改就可以出炉了直接!

不过最好还是重写一下页面的布局,以及按照Electron给的API调整一下代码,以提升用体验。


这里刚好顺便宣传下我的壁纸网站

极简壁纸 https://bzbeta.zzzmh.cn

(当然PC客户端版本还在努力折腾中)



关于打包成exe

参考:https://www.cnblogs.com/kakayang/p/9559777.html


先安装打包工具依赖

  1. npm install electron-packager -g


修改

主要是添加了pack命令的参数 (别忘了给start后面加个英文逗号)

  1. {
  2.   "name": "wallpaper",
  3.   "version": "0.0.1",
  4.   "main": "main.js",
  5.   "scripts": {
  6.     "start": "electron .",
  7.     "pack": "electron-packager . wallpaper --win --out ../wallpaper_windows_64 --arch=x64 --app-version=0.0.1 --electron-version=4.0.4"
  8.   }
  9. }

参数大概的意思

“.”:需要打包的应用目录(即当前目录),

“wallpaper”:应用名称,

“--win”:打包平台(以Windows为例),

“--out ../wallpaper_windows_64”:输出目录,

“--arch=64”:64位,

“--app-version=0.0.1”:应用版本,

“--electron-version=4.0.4”:electron版本


打包命令:

  1. npm run pack


效果如下

END

目前就折腾到这一步

最后贴一下官方文档地址

https://electronjs.org/docs