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

Electron

說(shuō)起桌面應(yīng)用，以前一直想開(kāi)發(fā)個(gè)跨平臺(tái)的應(yīng)用，學(xué)習(xí)了一下Qt，偷了一些QQ的素材，整了個(gè)簡(jiǎn)單的IM，但是迫于C++基本屬于語(yǔ)法入門(mén)階段，寫(xiě)個(gè)東西是真費(fèi)勁。

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

使用了各種第三方庫(kù)

electron-vue

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

Element-UI

餓了么出品，基于Vue的UI組件庫(kù)。

CodeMirror

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

chrome-remote-interface

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

lowdb

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

坑來(lái)了

上面寫(xiě)了一大坨，基本全是介紹，下面才是我在開(kāi)發(fā)過(guò)程中，遇到的問(wèn)題，其實(shí)大部分都是自己學(xué)藝不精，沒(méi)有想清楚造成的。

主進(jìn)程 && 渲染進(jìn)程

Electron 應(yīng)用同時(shí)使用了 main(主進(jìn)程) 和一個(gè)或者多個(gè) renderer(渲染進(jìn)程) 來(lái)運(yùn)行多個(gè)程序。

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

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

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

目錄不存在

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

程序打包后，不能復(fù)制粘貼

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

if (process.platform === 'darwin') {
  const template = [
    {
      label: '我的應(yīng)用名稱(chēng)',
      submenu: [
        {
          label: '退出',
          accelerator: 'Command+Q',
          click: () => {
            app.quit()
          }
        }
      ]
    },
    {
      label: '編輯',
      submenu: [
        { label: '復(fù)制', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
        { label: '粘貼', accelerator: 'CmdOrCtrl+V', selector: 'paste:' }
      ]
    }
  ]
  Menu.setApplicationMenu(Menu.buildFromTemplate(template))
}