基于Electron开发Hosts切换工具的“踩坑”之旅

开发 前端
最近几年Electron忽然火了起来,也诞生了很多好用的应用。Electron本身是基于Chromium和Node.js,让你可以使用 HTML, CSS 和 JavaScript 构建应用。

用过好几个Hosts切换工具,但总是有点这样那样的问题。最讨厌的莫过于切换完后,键盘都快按坏了,浏览器里面的Hosts就是不变,网上找了好多方法,但是感觉都并不完美,于是就有了这篇文章。

Electron

说起桌面应用,以前一直想开发个跨平台的应用,学习了一下Qt,偷了一些QQ的素材,整了个简单的IM,但是迫于C++基本属于语法入门阶段,写个东西是真费劲。

最近几年Electron忽然火了起来,也诞生了很多好用的应用。Electron本身是基于ChromiumNode.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))
}
责任编辑:姜华 来源: 今日头条
相关推荐

2022-09-17 23:46:47

vue前端

2023-04-19 07:53:29

Node.jsNrm

2024-04-01 08:05:27

Go开发Java

2015-09-07 10:15:53

移动端开发

2018-12-18 14:13:30

SDKAndroid开发

2023-02-20 08:11:04

2024-04-10 08:39:56

BigDecimal浮点数二进制

2023-10-19 15:35:44

.NET转换工具开发

2023-01-18 23:20:25

编程开发

2017-07-17 15:46:20

Oracle并行机制

2020-09-15 08:46:26

Kubernetes探针服务端

2021-12-28 08:17:41

循环 forgo

2018-01-10 13:40:03

数据库MySQL表设计

2009-03-25 17:10:50

Linux视频转换

2014-09-02 14:18:27

NodeJsLivePool

2021-09-03 11:15:18

场景sql配置

2017-05-05 08:12:51

Spark共享变量

2021-10-28 19:10:02

Go语言编码

2010-11-11 14:29:27

Ubuntu工作区

2023-09-22 11:29:11

JavasubList
点赞
收藏

51CTO技术栈公众号