2019年 Electron7 + Vue 项目实战总结 —— 那些年挖的坑还得自己来填

前言

这篇文章不是Electron的教程, 而是作者在去年做的一个大型项目的总结, 我会从立项到技术选型到开发一一道来, 如果大家能在看作者自己给自己挖坑的过程中有所收获, 那就再好不过了。

使用技术

这里先罗列一下用到的主要技术,其中也有一部分在发现问题后放弃的

  1. Electron5 - Electron7(没错, 从开始立项时的Electron5的版本, 到最后的Electron7, 鬼知道经历了什么)
  2. Vue.js
  3. sqlite3
  4. sequelize(ORM框架,搭配数据库使用可以不用写sql语句)
  5. vue-cli-plugin-electron-builder(使用这个插件来整合vue-cli和electron)
  6. ant-design-vue
  7. element-ui
  8. pdf.js
  9. electron-edge-js(使用这个包来调用dll)
  10. log4js(用来记log)
  11. amqplib(rabbitmq的node实现)
  12. grpc

项目背景

因为是公司的商业产品,具体名字就不写了,这个系统包括服务端,PC客户端和iPad端。这次的Electron项目是对该产品的PC客户端的重构,原客户端是用WPF技术完成的,因为公司的战略需要将以前老的WPF技术写的所有软件用Electorn重构,所以就有了这个项目。开发人员加上作者一共有三位,只有作者是前端,其余两位都是.net工程师,负责维护原项目的,开始现学Electron。作者以前也没完整开发过Electron项目,就在这样的情况下,项目启动了。

项目功能

因为公司的这个产品是针对酒店行业的,所以这个PC客户端的主要功能包括对酒店客人入住、离店、消费单据的签字、打印,包括支付以及对接服务端对客人住店对处理等等。

前期调研

因为只有作者一个人是前端,所以建项目这个事情只能交给本人来做了。

前端开发的三大框架当然得用上,虽然我挺想用React的,但是公司的技术栈是Vue,考虑到成本当然选择了Vue。

当时立项的时候Electron稳定版更新到了5.x.x版本,所以直接使用了Electron5。

接下了就是就是结合Vue和Electron,公司以前有一个老项目用的是vue-electron,但是这个库的作者已经好久没更新了,而且集成的还是vue-cli 2的版本,所以综合考虑了一下,没有使用以前的方案。采用了vue-cli-plugin-electron-builder这个vue插件来整合vue和electron,这里推荐大家看下这篇文章手把手教你使用Electron5+vue-cli3开发跨平台桌面应用,讲的很详细。

接下来是数据库的选择,其实这个项目对数据库对要求很少,基本上就是存一下配置文件和最多几百个PDF文件,当时也考虑过直接用文件形式存储,但在和老大聊过之后,谈到了以后功能的扩展问题,还是决定使用数据库。然后是在像sqlite3这样需要build的native库,还是一些不需要build进electron的JSON格式的轻量数据库之间进行选择。还是考虑到用户可能有比较多的PDF的数据的情况下,选择了sqlite。然后又在老大的要求下加入了ORM框架Sequelize来配合sqlite3使用。

我们开发组很早就想要引进TypeScript,加上组内有很多写C#的.net工程师,学习成本还是比较低的,虽然Vue用TS写有些别扭,但是我还是趁这次机会和老大提出了引入TS的想法。结果老大还是想要等到用TS重写的Vue3.0发布后再引入(已经2020年了vue3.0还没有发布),所以TS没能用到项目上来。

正式开发

项目结构

整个项目的目录结构基本上是按照vue的结构来建的,但是在开发到后期发现存在一些问题,关于项目目录如何建这个问题我会单独再写一篇文章来分享自己的看法,这里就暂且不提了。

Native编译问题

使用Electron开发之后,我发现问题最难解决的就是Native包的编译问题,凡是需要调用其他语言写的工具都有编译这一步,本项目需要编译的当然是Sqlite3了。
走过了数不尽的弯路之后,我先来提出最后的成功解决方案,在npm的后置钩子postinstall中运行这条命令electron-builder install-app-deps,这条命令的意思就是安装编译相关的依赖。

先来讲讲第一个坑,其实在使用vue-cli-plugin-electron-builder生成项目后,这个命令是默认就在postinsatll里面的,但是我一开始没有编译成功的原因就是因为我的electron不是从npm官方源下载的,而是从公司自己的npm源,公司的npm源是连接的淘宝源结果造成了这个问题。所以无论下任何npm包一定一定要从npm官方源下载,有些资源太慢就挂代理(这个是程序员必备技能了吧),即使是用淘宝源也千万不要用cnpm命令,cnpm真的是坑太多了。

还是splite3的问题,我在Mac上可以跑起来了。但是当放到windows10上就又出问题了,看报错是node-gyp在编译过程中出现的问题。最后发现在windows上使用sqlite3和electron得配置以下环境。

  1. python2.7(有的同事电脑安装python3.5会报错)
  2. windows-build-tools(这个非常非常重要,如果你的电脑安装了VS的话,可能不需要这个东西,但是如果没有安装VS,务必安装这个包,它会配置node-gyp在编译c++等语言的代码时必须的环境,非常重要)

数据库问题

sqlite3官方的api不太好用,所以我封装了一套Promise格式的api,需要的可以参考我以前的文章Electron中sqlite3的安装以及Promise形式API的封装

在这个项目中我们使用了Sequelize,这是一个ORM框架,配合sqlite3使用可以让我们不用写sql语句,而是通过对象的形式来使用数据库,但是当配合vue脚手架使用的时候会出现问题,控制台又报了sqlite3的错误。这个问题是关于数据库这块我处理时间最长的一个,最后借助Goole搜索引擎,在某个外国作者的个人博客上找到了解决方法,在vue.config.js里这样配置

configureWebpack: {
  externals: {
    sequelize: "require('sequelize')",
    sqlite3: "require('sqlite3')"
  }
}

使用electronBuilder打包的话同样需要配置

pluginOptions: {
    electronBuilder: {
      externals: ['sequelize']
    }
}

如果是直接用的webpack,把externals属性配置到配置文件里就可以了。

UI框架的选择

一开始这个项目使用的是ant-design-vue,在UI基本完成之后的某一天,我和一个做混合开发也在用ant-design-vue的同事互相吐槽了一下这个UI库里面table组件(确实操作反人类啊)。没想到这事被旁边的老大关注了,在经过8个人的UI库选型讨论大会之后,最终决定使用element-ui,而且没有彻底完成的项目都要使用element-ui重写。我。。。。。。。心里苦啊。

其实就我作为前端对角度而言,使用element-ui没有问题,但是重写现有的项目UI就真的没有必要了,毕竟我们前端使用这些库的组件的时候都是按需引入的,而且其实很多时候都需要前端来调整组件的样式。老大可能是从前端组整体的角度来看希望能使用统一的UI库,总之,我之后又把所有ant-design-vue的组件全部替换成element-ui的组件。

PDF的展示

我们这个项目最主要的功能之一就是对各种单据进行签字,所以如何展示单据并签字就要用到pdf.js了,这部分功能是由另一位同事调研了半个月之后负责开发的,这位同事是.net开发,对前端不太熟悉,最后导致这部分的功能成了我们项目开发中最大的难点。

pdf.js是将pdf文档通过canvas显示在页面上,然后我们再将应用窗口推到wacom的设备上让用户签字,然后问题就产生了。

  1. 签字字迹不圆润, 有断点的存在。
  2. pdf展示模糊。
  3. 如何无损缩放。
  4. 笔迹和pdf合成后变模糊。
  5. pdf文档切换闪烁问题。

下面是填坑的过程:

  1. 参考了一些开源项目对笔迹的点的算法处理,绘制出了比较圆润的曲线。
  2. 参考pdf.js官方Demo,初始化时渲染高精度pdf
  3. 使用pdf.js读取高精度倍数的pdf绘制到canvas上, 而字迹我则是通过Path2D来记录绘制轨迹然后重绘来实现无损的缩放。
  4. 我们是通过公司同事使用C#来写的一个dll来将pdf和字迹的canvas合成的,这个最后通过给这个dll传高精度的pdf和字迹实现比较清晰的合成。
  5. 参考pdf.js官方Demo,使用两个canvas交替显示,消除闪烁现象。

虽然问题看似解决了,但最后我们发现实际效果还是差强人意,在最终有调整了半个月之后,老大看了我们的最终演示,最后决定签字部分直接使用原来的exe程序来实现,我们的应用仅展示pdf文件。

虽然这部分工作并不是我负责的,但是我也参与其中改了不少东西,所以到最后换方案还是比较难受的,就好像自己考试考砸了一样。

打印

pdf的打印真的是让人奔溃,因为我们项目对打印对要求还是比较高的,比如说可以配置打印机的纸张来源、纸张大小、指定打印机静默打印等等。而electron的打印api不能完全实现这些功能。所以一开始这个打印功能到底是要在electron上用js做还是调用c#写的dll或exe,我就进行过研究,因为这是个重构项目,这部分功能有以前写好的c#代码可以用,调用dll应该是比较方便的。但是。。,老大想要使用electron自带的api,他本人尽量想要少使用dll,哪怕功能得削减。

既然这样,那就决定用electron的打印api了,但是刚成功打出两张之后就发现了一个问题。electron的打印api有个静默打印的设置,设置后不会弹出系统的打印对话框,但是如果我开了这个设置,那么指定的打印机就会失效,系统会使用默认的打印机打印。

又是Google找问题时间,最后我到electron的github主页上看到了别人提的issue,作者回复这是个bug,而且由于底层代码问题只能在electron7中才能修复。心累啊,我建项目的时候才electron5,现在就要用electron7了?但是没办法,这个时候的稳定版是electron6,我只好在npm下了electron7.0.0-beta.3,这是我用的最长的一个npm版本。

这之后还有不少问题,比如说打印出来多了页边距,获取不到实际打印结果,打印次数多直接奔溃之类的。最后虽然磕磕绊绊的完成了打印的功能,但是如果有人想要在electron上打印的话,如果需求比较复杂,强烈建议不要用electron的打印api,尽早换别的方案,这个坑就不要再踩了。

错误日志记录

这部分用了log4.js这个库,这个功能还是比较顺利的,照着官方文档基本上没有什么坑。

与IPAD通信

我们一般是将文档推到wacom上让客人签字,不过也有些客户想用IPAD,所以后来就开发了一个ios应用,用来接收pc端推过去的pdf文档,然后在IPAD上签字,完成后在推送到pc端。

这个功能在老项目上是用rabbitmq来通信的,使用electron重构的新项目我本来是想要看看能不能使用grpc来实现,结果在大概看了官方文档也用node写了个简单demo之后,发现在electron上不能使用,因为会编译失败。在查阅来一些资料后,我认为是electron版本太新了,但是因为低版本的打印api有bug,又不能降版本,所以只好改用rabbitmq,和老版本保持一致的方案。rabbitmq的node实现是amqplib,使用amqplib顺利完成了这个功能。

小结

项目暂且就记录到这里吧,总而言之,在这个项目的开发中我学到了很多,也遇到了很多问题。看到这篇文章的人如果对于我踩的坑有更好的处理方式,欢迎留言指教。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 155,348评论 4 355
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 65,906评论 1 283
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,191评论 0 235
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,295评论 0 201
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,606评论 3 283
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,107评论 1 202
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,507评论 2 305
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,217评论 0 193
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,848评论 1 234
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,183评论 2 238
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,734评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,084评论 2 247
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,608评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,921评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,627评论 0 190
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,103评论 2 261
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,054评论 2 257

推荐阅读更多精彩内容

  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    你猜_3214阅读 10,966评论 0 118
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,119评论 0 1
  • 从回家到回来,感觉各种不适,首先是累,随即而来的是感冒,小毛病不断,
    在水一方123920阅读 185评论 0 0
  • 好像为你这本书,用我的文字,记录我的步履瞒珊,你的熠熠生辉。 好像为你这本书,用我的视角,记录我的分分秒秒,你的刻...
    杏儿飞翔阅读 166评论 0 0
  • 在同一家公司工作到三年,眼看升职无望,加薪太少,索性辞了! 那接下来做什么呢? 另找一份工作,自己创业,还是自由职...
    打呼噜的蜗牛阅读 858评论 0 1