使用electron将web页面打包为桌面应用

Dash是一个非常棒的软件，在里面查询API很方面，但是他没有windows版本...，在mac上也是要收费的...，

好在有DevDocs，功能与Dash一样，界面排版也都差不多，就是没有桌面版本

好，那我们用electron把它做成一个桌面软件~

从官网上clone一个例子

git clone https://github.com/electron/electron-quick-start

cd electron-quick-start

yarn install

yarn start

如果安装失败，可以使用cnpm安装

项目跑起来之后，就会出现electron的桌面页面，提供了本地开发环境，大概看一下入口文件main.js 和package.json

修改main.js，注释掉loadFile方法，改用loadURL打包我们的网页

// and load the index.html of the app.
// mainWindow.loadFile('index.html')
// and load a webpage URL of the app
   mainWindow.loadURL('https://devdocs.io')

// pageage.json
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^4.1.1"
  }

当前目录中的index.html就是入口文件。

安装依赖，对当前项目进行打包

yarn add electron-packager --save-dev

electron-packager是打成 exe 文件的插件。执行命令需要额外的目录（比如 dist ），且目录下有 package.json 和入口文件 (如 electron.js )，否则打包会报错

1.在当前文件中新建 dist 目录，复制main.js到dist目录下，命名为electron.js

  // main.js
  // and load the index.html of the app.
  mainWindow.loadFile('../index.html') //修改对应的index.html路径

2.复制package.json到dist 文件目录下

修改该文件入口

// package.json
"main": "electron.js",

3.在项目的package.json中（注意不是 dist 下的package.json）为之前下载好的electron-packager，增加一条启动命令

 "scripts": {
    "start": "electron .",
    "electron_build": "electron-packager ./dist Devdocs --platform=win32 --arch=x64 -icon=./icon/icon.ico --overwrite"   
  }

electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]

• sourcedir: 资源(dist/package.json)路径，在本例中既是./dist/
• appname:打包出的exe名称,这里取名为Devdocs
• platform :平台名称（ windows 是 win32 ）
• arch: 版本，本例为x64
• optional : 额外的配置（选填）

本例中选填参数用到了icon自定义图标与overwrite覆盖，其中icon仅支持ico格式图标，且分辨率最好为256X256 ，否则会模糊。（PS：这里推荐一个在线图片格式转换网站，实用方便~）

4.生成exe 执行npm run electron_build，可以看到项目目录中多了一个Devdocs-win32-x64文件，找到里面的Devdocs.exe运行即可。

5.修改.exe图标

也可以通过下载安装Resource Hacker。在.exe文件上鼠标右键，更换图标后保存即可。