用過好幾個Hosts切換工具，但總是有點這樣那樣的問題。最討厭的莫過于切換完后，鍵盤都快按壞了，瀏覽器里面的Hosts就是不變，網(wǎng)上找了好多方法，但是感覺都并不完美，于是就有了這篇文章。

Electron

說起桌面應用，以前一直想開發(fā)個跨平臺的應用，學習了一下Qt，偷了一些QQ的素材，整了個簡單的IM，但是迫于C++基本屬于語法入門階段，寫個東西是真費勁。

最近幾年Electron忽然火了起來，也誕生了很多好用的應用。Electron本身是基于Chromium和Node.js，讓你可以使用 HTML, CSS 和 JavaScript 構(gòu)建應用。簡單來說就是瀏覽器的殼子，里面套HTML頁面，但是擁有了瀏覽器之外的能力。作為PHP程序員，肯定會點JavaScript，也可以假裝會點Node.js吧。

使用了各種第三方庫

electron-vue

Electron文檔大概看了一下，不知道如何下手，然后找到了electron-vue，幾行命令就可以幫你把項目初始化好了。

Element-UI

餓了么出品，基于Vue的UI組件庫。

CodeMirror

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

chrome-remote-interface

Chrome調(diào)試協(xié)議的第三方調(diào)試客戶端實現(xiàn)，為node程序提供了api，想要在Chrome中實時生效的關(guān)鍵工具就是它。

lowdb

名字雖然low，但是很好用。一個本地儲存的JSON數(shù)據(jù)庫(其實就是自己懶得操作JSON。)

坑來了

上面寫了一大坨，基本全是介紹，下面才是我在開發(fā)過程中，遇到的問題，其實大部分都是自己學藝不精，沒有想清楚造成的。

主進程 && 渲染進程

Electron 應用同時使用了 main(主進程) 和一個或者多個 renderer(渲染進程) 來運行多個程序。

開發(fā)的時候并沒有想太多，等某些功能實現(xiàn)的時候懵逼了，比如托盤的菜單(main)在切換Hosts的時候，頁面(renderer)中的勾選狀態(tài)需要同步更新。這個時候才看文檔，發(fā)現(xiàn)人家提供了進程間的ipc通信方法，造成了代碼邏輯的大量改動和結(jié)構(gòu)優(yōu)化，如果你的應用也有類似功能，開發(fā)之前一定要想清楚各種事件消息如何相互傳遞并且妥善管理。

不同的進程從數(shù)據(jù)庫中獲取到的數(shù)據(jù)不一致

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

目錄不存在

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

程序打包后，不能復制粘貼

網(wǎng)上查了一下，發(fā)現(xiàn)Mac程序內(nèi)如果需要復制粘貼，需要加到菜單中，代碼如下：

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))
}