基於Electron開發Hosts切換工具的「踩坑」之旅

用過好幾個Hosts切換工具，但老是有點這樣那樣的問題。最討厭的莫過於切換完後，鍵盤都快按壞了，瀏覽器裏面的Hosts就是不變，網上找了好多方法，可是感受都並不完美，因而就有了這篇文章

Electron

提及桌面應用，之前一直想開發個跨平臺的應用，學習了一下Qt，偷了一些QQ的素材，整了個簡單的IM，可是迫於C++基本屬於語法入門階段，寫個東西是真費勁。。。

最近幾年Electron突然火了起來，也誕生了不少好用的應用。Electron自己是基於Chromium和Node.js，讓你可使用 HTML, CSS 和 JavaScript 構建應用。簡單來講就是瀏覽器的殼子，裏面套HTML頁面，可是擁有了瀏覽器以外的能力。做爲PHP程序員，確定會點JavaScript，也能夠僞裝會點Node.js吧

使用了各類第三方庫

electron-vue

Electron文檔大概看了一下，不知道如何下手，而後找到了electron-vue，幾行命令就能夠幫你把項目初始化好了

Element-UI

餓了麼出品，基於Vue的UI組件庫

CodeMirror

代碼編輯器插件神器，提供超級超級超級多的功能和配置

chrome-remote-interface

Chrome調試協議的第三方調試客戶端實現，爲node程序提供了api，想要在Chrome中實時生效的關鍵工具就是它

lowdb

名字雖然low，可是很好用。一個本地儲存的JSON數據庫(其實就是本身懶得操做JSON。。。)

坑來了

上面寫了一大坨，基本全是介紹，下面纔是我在開發過程當中，遇到的問題，其實大部分都是本身學藝不精，沒有想清楚形成的

主進程 && 渲染進程

Electron 應用同時使用了 main(主進程) 和一個或者多個 renderer(渲染進程) 來運行多個程序
開發的時候並無想太多，等某些功能實現的時候懵逼了，好比托盤的菜單(main)在切換Hosts的時候，頁面(renderer)中的勾選狀態須要同步更新。這個時候纔看文檔，發現人家提供了進程間的ipc通訊方法，形成了代碼邏輯的大量改動和結構優化，若是你的應用也有相似功能，開發以前必定要想清楚各類事件消息如何相互傳遞而且妥善管理。

不一樣的進程從數據庫中獲取到的數據不一致

看了lowdb半天文檔，沒整明白。不就是讀文件麼，都寫成功(同步方式)了，別的進程就是讀不出來呢？初步懷疑，數據在內存中存了一份兒(同步機制不詳)。突然發現lowdb的一句介紹提到了Lodash(我並不知道這是啥)，看了一下才明白const db = low(adapter)返回的是一個Lodash實例，只有當觸發write()和read()的時候才真正的去操做文件，單進程的話沒什麼問題，可是多進程就好操做數據不一致了，解決方法就是在讀取的時候先read()一下：db.read().get('hosts')，搞定。

目錄不存在

當你興奮的把應用傳給同事，結果人家一打開，一個大大的報錯(一臉懵逼+尷尬)，原來是app.getPath('userData')獲取到的目錄默認並不存在，在操做前加目錄判斷，沒有就建立。

程序打包後，不能複製粘貼

網上查了一下，發現Mac程序內若是須要複製粘貼，須要加到菜單中，代碼以下：

if (process.platform === 'darwin') {
  const template = [
    {
      label: '個人應用名稱',
      submenu: [
        {
          label: '退出',
          accelerator: 'Command+Q',
          click: () => {
            app.quit()
          }
        }
      ]
    },
    {
      label: '編輯',
      submenu: [
        { label: '複製', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
        { label: '粘貼', accelerator: 'CmdOrCtrl+V', selector: 'paste:' }
      ]
    }
  ]
  Menu.setApplicationMenu(Menu.buildFromTemplate(template))
}