Electron初体验--写个查词小工具

本文提纲

• [什么是 Electron](#什么是 Electron)
• [Why Electron](#Why Electron)
• [Electron 安装及使用](#Electron 安装及使用)
• 实现查词工具

什么是 Electron

官方直白：

使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

简单来说，就是利用 Chromium 封装了一层，开发者可以直接利用 JS 和 HTML 的开发方式来进行快速开发，如果你懂 Web 或者小程序开发的话可以迅速上手。

Why Electron

这涉及到 Electron 的优点：

• 一套代码，多平台同时打包共用；
• 会写 WEB 或小程序你就能够入门上手；
• 开源
• 更多优点、特性请见官方：https://electronjs.org/

Electron 安装及使用

• 安装 npm
• git clone https://github.com/electron/electron.git
• 执行代码npm install electron --save-dev [--save-exact]
• Eelctron 官方文档 后来安装的时候遇到一些路径问题，直接 npm install electron -g 全局安装搞定

Electron 项目结构

• package.json
• index.html
• main.js
• style.css

package.json

简单描述一下项目结构，我们的 Application 配置都在 package.json 文件中，做过小程序开发的同学应该一看就明白了。

index.html

绘制我们程序的 UI，类似于 Android 的 layout.xml 文件，完全基于 HTML 语法，如果没怎么接触过 HTML，找个你中意的网站，Chrome 进入开发者模式照葫芦画瓢吧。

main.js

这个是项目默认的 js 文件，可以理解为初始化启动窗口的框架，可以在其中定义我们窗口大小，生命周期的控制等等。

style.css

配合 html 绘制我们想要的 APP 效果，CSS 的用法几乎都是那一套，不熟悉的同学同 HTML，VS Code 有个 CSS Preivew 插件，推荐用一下。

Electron 环境配置

配置环境的过程请 Google 参考各种博客吧，太多了，当然途中会遇到各种问题，Fixed it!

实现查词工具

日常阅读英文文档有生词需要翻译，先推荐个人一直在使用几个很好用的平台查词工具：

• Chrome 插件： TransIt
• Android Studio 插件：ECTranslation

这两个插件的特点就是方便快捷，而且 Chrome 重度患者而言，几乎囊括了所有桌面系统，可是缺点就是只能在 Chrome 或者 Android Studio 中使用，而 Android 上我也效仿两个插件写了自己的工具，调用有道和百度的 API用起来也很方便，并且可以全局搜索，于是想写一个可以不局限于浏览器和 IDE 的查词工具，于是找到了 Electron!

todo

• 有道 API 申请：请戳有道官网
• 需求确定
• 界面设计（这个工具完全没有设计。。）
• Coding…（你会发现人家有道把 JS 的代码都给你实现好了?）

Application 打包

我使用的是 electron-packager，打包过程反而遇到不少问题，一一解决后 mac 和 Ubuntu 都没有问题，没有 Windows 暂时没有尝试 win32… 打包指令：

sudo electron-packager ./ FastDict --overwrite --darwin --icon=./res/icon.icns

需求确定

我需要的功能很简单，简单、快捷

• 输入框：除了复制查词，偶尔还需要手动录入
• 结果展示：右上角悬浮通知

花了一些时间改改代码，然后就上效果吧：

代码传送门