记录与 Electron 的第一次亲密接触

公司项目中要用到一个桌面端工具，具体功能是根据后端下发的配置，操作 iOS 或 Android 手机应用工程，往里面加入一些资源/代码文件，然后生成最终的 ipa/apk 包。发一个成品主界面截图：

这工具本身功能不复杂，操作项目工程有现成的 ruby/python 脚本支持；但是有跨端 GUI 的需求（安卓项目可在 Win/Mac 等不同平台运行），选择界面库的时候犯了点难。团队的小伙伴都是做原生移动应用出身，用 objc/Swift 画手机应用界面如砍菜切瓜，但是写 PC 端应用却没啥经验。环顾一周，接连否了 Flutter Desktop（尚不稳定），Java Swing（陈旧难用），Qt（少 C++经验），最后把视线落在 Electron 上。

Electron 虽然有运行效率慢，生成安装包大（一个 Hello world! 占用 400M+）等缺点，但是挡不住有 VSCode/飞书桌面端等的优秀的榜样在，我们还是选择了它。经过这段时间的开发体验，最终证明这个选择没错，最终产品较好满足了我们的项目需求。这边就不赘述 Electron 简介或环境搭建等东西了，趁着记忆新鲜，记录几处印象深刻的技术点，但愿能帮助到以后的自己或同行。

01. 前端框架

项目前期借调了一名前端同事来协助画界面，因为敝司前端团队用的是 Vue 全家桶，所以很自然的找到了 Electron-Vue。界面效果是实现了，但有个很明显的问题是 Electron-Vue 项目从 2016 年后就没在维护了，所以无法用上最新的 Vue3，后续也不大好维护，已联系前端同事对这块进行重构升级。

02. iOS 跟 Android 相同处理逻辑 &不同结果输出

因项目需要同时支持 iOS 跟 Android 项目，大体处理逻辑都是相同的，但是一些配置参数/界面（比如签名密钥配置等）又有所不同，强行在一套 UI 中完成所有操作不友好。所以 iOS/Android 我们是同一个项目，但添加了一个 platform 配置项，用以区分平台，主体处理流程都相同，在需要区分平台时通过 platform 字段区分。在测试/出包的 npm run 或 yarn 命令中配置：

echo 'export const Platform = [ios|android]' > ./src/utils/constants.js

03. 脚本运行环境的处理

以 ruby 为例，虽然 MacOS 上默认都会自带，但是往往版本较低，执行我们的脚本会报错，所以打包一份特定版本的 ruby 环境是必须的。本来以为很简单，我从官网下载了 2.7 的最新版本，然后 configure/make/make install 三部曲后，把整个 ruby 环境拉到 Electron 项目里以为搞定。但是测试发现 ruby 找不到对应运行库，ruby 很机械地找原本的绝对路径，比如：/Users/tom/ruby/lib，而不是在相对路径找。经过一番查找解决：

a. 代码中可使用 $LOAD_PATH.unshift(File.dirname(__FILE__)) 来添加代码加载路径，通过这种方式可以把依赖的三方代码都添加进来；

b. 也可以在 ruby 执行命令中添加 "-I/usr/local/bin/lib" 选项来手动指定需要加载的库路径；

python 环境道理类似就不展开了。

04. 跨平台的字符编码等问题

自投身移动开发以来，大家都是类 Unix 平台，没遇到过 UTF8 字符编码问题。但是这个项目需要运行在 Windows 上，所以遇到了一些平台特定的限制问题。顺便也记录一笔：

a. Mac/Win 上的目录分割符不同（/跟\），所以手动拼路径的时候要特别小心，可用语言自带的库解决；

b. Win 上字符串的默认编码是 GBK，不是 UTF8，目录中遇到汉字需转码，不然会乱码失败；

c. 某些 Win 版本上对目录长度有限制，若文件所在的路径太长会报错，这也比较坑；

总体说来，这次采用 Electron 开发我们跨平台的工具软件，体验还是不错的。下次如果有类似的需求，还是会选择它。是为记。