需求是把H5頁面變成PC端的可執行程序
最好是Windows Mac Linux 3端都支持
而且不能像java python這種需要用戶自己安裝依賴的
百度一番以後決定用Electron來實現。
他的原理就是自帶一個chrome內核，在客戶端本地運行h5代碼
不過node和Electron 我都是剛學，所以本文章只是分享一下折騰的過程
基於這個官方入門例子
https://electronjs.org/docs/tutorial/first-app#trying-this-example
一、準備階段
首先你得有node和npm環境
windows用戶可有去node官網下載安裝包安裝
https://nodejs.org/zh-cn/
裝完以後建議再裝一個cnpm，讓速度變快
用法就是把本文後面所有npm install 命令 變成 cnpm install
後面就不再贅述了 統一用npm舉例
http://npm.taobao.org/
二、第一個項目
新建一個項目文件夾，創建3個文件
your-app/
├── package.json
├── main.js
└── index.html
package.json
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
main.js
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
<!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>
官方例子中是說在該目錄下直接執行這個命令
npm start
但實際遇到的情況是這樣的一段報錯
"electron不是內部或外部命令，也不是可運行的程序"。
百度半天雲裏霧裏
最終從某個回答裏找到了答案才恍然大悟！
根本沒裝過electron呀！！！
安裝electron
npm install electron -g
再cd到項目路徑下，執行啓動命令就可以了
npm start
登登噔噔
之後還可以再稍微加點料，改進一下
例如 在main.js稍作修改
- 取消彈出調試菜單
- 去掉菜單欄
// 打開開發者工具
// win.webContents.openDevTools()
// 去掉自帶的默認菜單欄
win.setMenu(null)
順便可以在根目錄下 再創建一個bat文件 一鍵啓動項目
run.bat
@echo off
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
先安裝打包工具依賴
npm install electron-packager -g
修改
package.json
主要是添加了pack命令的參數 (別忘了給start後面加個英文逗號)
{
"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版本
打包命令：
npm run pack
效果如下
END
目前就折騰到這一步
最後貼一下官方文檔地址
https://electronjs.org/docs