摘要：在菜單中，我想點(diǎn)擊子菜單打開一個網(wǎng)站，那么就可以用到方法，則會在默認(rèn)瀏覽器中打開打包應(yīng)用其實(shí)將程序打包成桌面應(yīng)用才是比較麻煩的事。

Electron 是一個搭建跨平臺桌面應(yīng)用的框架，僅僅使用 JavaScript、HTML 以及 CSS，即可快速而容易地搭建一個原生應(yīng)用。這對于想要涉及其他領(lǐng)域的開發(fā)者來說是一個非常大的福利。

倉庫地址：lin-xin/calculator

我這里通過 Electron 實(shí)現(xiàn)了仿 iPhone 的計算器，通過菜單可以切換橫屏和豎屏，橫屏有更多的運(yùn)算。而對于 JavaScript 進(jìn)行浮點(diǎn)數(shù)計算來說，精度丟失是個很大問題，所以我這里使用了第三方庫 math.js 來解決這個精度的問題。
盡可能的實(shí)現(xiàn)了跟 iPhone 一樣的運(yùn)算：

1 + 2 × 3 = 7

3 += 6 (再按 = 等于 9)

0.1 + 0.2 = 0.3 (浮點(diǎn)數(shù)精度處理)

不過我下面并不是要講計算器，而是用到的 Electron 的知識點(diǎn)。

在主進(jìn)程中通過 app 模塊控制整個應(yīng)用的生命周期。

當(dāng) Electron 完成初始化時觸發(fā) ready 事件：

app.on("ready", () => {
    // 創(chuàng)建窗口、加載頁面等操作
})

當(dāng)所有的窗口都被關(guān)閉時會觸發(fā) window-all-closed 事件：

app.on("window-all-closed", () => {
    if(process.platform !== "darwin"){
        app.quit();     // 退出應(yīng)用
    }
})

在開發(fā)中發(fā)現(xiàn)，沒有監(jiān)聽該事件，打包后的應(yīng)用關(guān)閉后，進(jìn)程還保留著，會占用系統(tǒng)的內(nèi)存。

本來我們的 html 只顯示在瀏覽器中，而 electron 提供了一個 BrowserWindow 模塊用于創(chuàng)建和控制瀏覽器窗口，我們的頁面就是顯示在這樣的窗口中。

通過關(guān)鍵字 new 實(shí)例化返回 win 對象，該對象有豐富的方法對窗口進(jìn)行控制。

win = new BrowserWindow({
    width: 390,         // 窗口寬度
    height: 670,        // 窗口高度
    fullscreen: false,  // 不允許全屏
    resizable: false    // 不允許改變窗口size，不然布局就亂了啊
});

窗口創(chuàng)建完是一片空白的，可以通過 win.loadURL() 來加載要顯示的頁面。

const path = require("path");
const url = require("url");

win.loadURL(url.format({    // 加載本地的文件
    pathname: path.join(__dirname, "index.html"),
    protocol: "file",
    slashes: true
}))

也可以直接加載遠(yuǎn)程鏈接 win.loadURL("http://blog.gdfengshuo.com");

桌面應(yīng)用菜單欄是最常見的功能。Electron 提供了 Menu 模塊來創(chuàng)建原生的應(yīng)用菜單和 context 菜單，

const template = [                              // 創(chuàng)建菜單模板
    {
        label: "查看",
        submenu: [
            {label: "豎屏", type: "radio", checked: true},      // type 屬性讓菜單為 radio 可選
            {label: "橫屏", type: "radio", checked: false},
            {label: "重載",role:"reload"},
            {label: "退出",role:"quit"},
        ]
    }
]

const menu = Menu.buildFromTemplate(template);  // 通過模板返回菜單的數(shù)組
Menu.setApplicationMenu(menu);                  // 將該數(shù)組設(shè)置為菜單

在子菜單中，通過點(diǎn)擊豎屏或橫屏來進(jìn)行一些操作，那就可以給 submenu 監(jiān)聽 click 事件。

const template = [
    {
        label: "查看",
        submenu: [
            {
                label: "橫屏"
                click: () => {              // 監(jiān)聽橫屏的點(diǎn)擊事件
                    win.setSize(670,460);   // 設(shè)置窗口的寬高
                }
            }
        ]
    }
]

雖然點(diǎn)擊橫屏的時候，可以設(shè)置窗口的寬高，但是要如何去觸發(fā)頁面里的方法，這里就需要主進(jìn)程跟渲染進(jìn)程之間進(jìn)行通信。

主進(jìn)程，可以理解為 main.js 用來寫 electron api 的就是主進(jìn)程，渲染進(jìn)程就是渲染出來的頁面。

在主進(jìn)程中可以使用 ipcMain 模塊，它控制著由渲染進(jìn)程(web page)發(fā)送過來的異步或同步消息。

const {ipcMain} = require("electron")
ipcMain.on("send-message", (event, arg) => {
    event.sender.send("reply-message", "hello world")
})

ipcMain 監(jiān)聽 send-message 事件，當(dāng)消息到達(dá)時可以調(diào)用 event.sender.send 來回復(fù)異步消息，向渲染進(jìn)程發(fā)送 reply-message 事件，也可以帶著參數(shù)發(fā)送過去。

在渲染進(jìn)程可以調(diào)用 ipcRenderer 模塊向主進(jìn)程發(fā)送同步或異步消息，也可以收到主進(jìn)程的相應(yīng)。

const {ipcRenderer} = require("electron")
ipcRenderer.on("reply-message", (event, arg) => {
    console.log(arg);       // hello world
})

ipcRenderer.send("anything", "hello everyone");

ipcRenderer 可以監(jiān)聽到來自主進(jìn)程的 reply-message 事件并拿到參數(shù)進(jìn)行操作，也可以使用 send() 方法向主進(jìn)程發(fā)送消息。

webContents 是一個事件發(fā)出者，它負(fù)責(zé)渲染并控制網(wǎng)頁，也是 BrowserWindow 對象的屬性。在 ipcMain 中的 event.sender，返回發(fā)送消息的 webContents 對象，所以包含著 send() 方法用于發(fā)送消息。

const win = BrowserWindow.fromId(1);        // fromId() 方法找到ID為1的窗口
win.webContents.on("todo", () => {
    win.webContents.send("done", "well done!")
})

remote 模塊提供了一種在渲染進(jìn)程（網(wǎng)頁）和主進(jìn)程之間進(jìn)行進(jìn)程間通訊（IPC）的簡便途徑。在 Electron 中，有許多模塊只存在主進(jìn)程中，想要調(diào)用這些模塊的方法需要通過 ipc 模塊向主進(jìn)程發(fā)送消息，讓主進(jìn)程調(diào)用這些方法。而使用 remote 模塊，則可以在渲染進(jìn)程中調(diào)用這些只存在于主進(jìn)程對象的方法了。

const {remote} = require("electron")
const BrowserWindow = remote.BrowserWindow      // 訪問主進(jìn)程中的BrowserWindow模塊

let win = new BrowserWindow();                  // 其他的跟主進(jìn)程的操作都一樣

remote 模塊除了可以訪問主進(jìn)程的內(nèi)置模塊，自身還有一些方法。

remote.require(module)          // 返回在主進(jìn)程中執(zhí)行 require(module) 所返回的對象
remote.getCurrentWindow()       // 返回該網(wǎng)頁所屬的 BrowserWindow 對象
remote.getCurrentWebContents()  // 返回該網(wǎng)頁的 WebContents 對象
remote.getGlobal(name)          // 返回在主進(jìn)程中名為 name 的全局變量(即 global[name])
remote.process                  // 返回主進(jìn)程中的 process 對象，等同于 remote.getGlobal("process") 但是有緩存

使用系統(tǒng)默認(rèn)應(yīng)用管理文件和 URL，而且在主進(jìn)程和渲染進(jìn)程中都可以用到該模塊。在菜單中，我想點(diǎn)擊子菜單打開一個網(wǎng)站，那么就可以用到 shell.openExternal() 方法，則會在默認(rèn)瀏覽器中打開 URL

const {shell} = require("electron");
shell.openExternal("https://github.com/lin-xin/calculator");

其實(shí)將程序打包成桌面應(yīng)用才是比較麻煩的事。我這里嘗試了 electron-packager 和 electron-builder。

electron-packager 可以將項目打包成各平臺可直接運(yùn)行的程序，而不是安裝包。

先使用 npm 安裝： npm install electron-packager -S

運(yùn)行打包命令：

electron-packager ./ 計算器 --platform=win32 --overwrite --icon=./icon.ico

打包會把項目文件包括 node_modules 也一起打包進(jìn)去，當(dāng)然可以通過 --ignore=node_modules 來忽略文件，但是如果項目中有用到第三方庫，忽略的話則找不到文件報錯了。

正確的做法就是嚴(yán)格區(qū)分 dependencies 和 devDependencies，打包的時候只會把 dependencies 的庫打包，而使用 cnpm 安裝的會有一大堆 .0.xx@xxx 的文件，也會被打包，所以最好不要用 cnpm

electron-builder 是基于 electron-packager 打包出來的程序再做安裝處理，將項目打包成安裝文件。

安裝：npm install electron-builder -S

打包：electron-builder --win

打包過程中，第一次下載 electron 可能會出現(xiàn)連接超時，可以使用 yarn 試試。還有 winCodeSign 和 nsis-resources 也可能會失敗，可以參考 electron-builder/issues 解決。

Electron 用起來還是相對容易的，可以創(chuàng)建個簡單的桌面應(yīng)用，只是打包的過程比較容易遇到問題，網(wǎng)上好像也有一鍵打包的工具，沒嘗試過。以上也都是基于 windows 7 的實(shí)踐，畢竟沒有 Mac 搞不了。