使用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文件上鼠標右鍵，更換圖標後保存便可。