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