前言

這篇文章不是Electron的教程, 而是作者在去年做的一個(gè)大型項(xiàng)目的總結(jié), 我會(huì)從立項(xiàng)到技術(shù)選型到開發(fā)一一道來(lái), 如果大家能在看作者自己給自己挖坑的過(guò)程中有所收獲, 那就再好不過(guò)了马绝。

使用技術(shù)

這里先羅列一下用到的主要技術(shù),其中也有一部分在發(fā)現(xiàn)問(wèn)題后放棄的

1. Electron5 - Electron7(沒(méi)錯(cuò), 從開始立項(xiàng)時(shí)的Electron5的版本, 到最后的Electron7, 鬼知道經(jīng)歷了什么)
2. Vue.js
3. sqlite3
4. sequelize(ORM框架,搭配數(shù)據(jù)庫(kù)使用可以不用寫sql語(yǔ)句)
5. vue-cli-plugin-electron-builder(使用這個(gè)插件來(lái)整合vue-cli和electron)
6. ant-design-vue
7. element-ui
8. pdf.js
9. electron-edge-js(使用這個(gè)包來(lái)調(diào)用dll)
10. log4js(用來(lái)記log)
11. amqplib(rabbitmq的node實(shí)現(xiàn))
12. grpc

項(xiàng)目背景

因?yàn)槭枪镜纳虡I(yè)產(chǎn)品，具體名字就不寫了挣菲，這個(gè)系統(tǒng)包括服務(wù)端富稻，PC客戶端和iPad端掷邦。這次的Electron項(xiàng)目是對(duì)該產(chǎn)品的PC客戶端的重構(gòu)，原客戶端是用WPF技術(shù)完成的椭赋，因?yàn)楣镜膽?zhàn)略需要將以前老的WPF技術(shù)寫的所有軟件用Electorn重構(gòu)抚岗，所以就有了這個(gè)項(xiàng)目。開發(fā)人員加上作者一共有三位哪怔，只有作者是前端宣蔚，其余兩位都是.net工程師，負(fù)責(zé)維護(hù)原項(xiàng)目的,開始現(xiàn)學(xué)Electron认境。作者以前也沒(méi)完整開發(fā)過(guò)Electron項(xiàng)目,就在這樣的情況下胚委，項(xiàng)目啟動(dòng)了。

項(xiàng)目功能

因?yàn)楣镜倪@個(gè)產(chǎn)品是針對(duì)酒店行業(yè)的叉信，所以這個(gè)PC客戶端的主要功能包括對(duì)酒店客人入住亩冬、離店、消費(fèi)單據(jù)的簽字硼身、打印硅急，包括支付以及對(duì)接服務(wù)端對(duì)客人住店對(duì)處理等等。

前期調(diào)研

因?yàn)橹挥凶髡咭粋€(gè)人是前端佳遂，所以建項(xiàng)目這個(gè)事情只能交給本人來(lái)做了营袜。

前端開發(fā)的三大框架當(dāng)然得用上，雖然我挺想用React的丑罪，但是公司的技術(shù)棧是Vue荚板，考慮到成本當(dāng)然選擇了Vue。

當(dāng)時(shí)立項(xiàng)的時(shí)候Electron穩(wěn)定版更新到了5.x.x版本巍糯，所以直接使用了Electron5啸驯。

接下了就是就是結(jié)合Vue和Electron，公司以前有一個(gè)老項(xiàng)目用的是vue-electron祟峦，但是這個(gè)庫(kù)的作者已經(jīng)好久沒(méi)更新了罚斗，而且集成的還是vue-cli 2的版本，所以綜合考慮了一下宅楞，沒(méi)有使用以前的方案针姿。采用了vue-cli-plugin-electron-builder這個(gè)vue插件來(lái)整合vue和electron，這里推薦大家看下這篇文章手把手教你使用Electron5+vue-cli3開發(fā)跨平臺(tái)桌面應(yīng)用,講的很詳細(xì)厌衙。

接下來(lái)是數(shù)據(jù)庫(kù)的選擇距淫，其實(shí)這個(gè)項(xiàng)目對(duì)數(shù)據(jù)庫(kù)對(duì)要求很少，基本上就是存一下配置文件和最多幾百個(gè)PDF文件婶希，當(dāng)時(shí)也考慮過(guò)直接用文件形式存儲(chǔ)榕暇，但在和老大聊過(guò)之后，談到了以后功能的擴(kuò)展問(wèn)題，還是決定使用數(shù)據(jù)庫(kù)彤枢。然后是在像sqlite3這樣需要build的native庫(kù)狰晚，還是一些不需要build進(jìn)electron的JSON格式的輕量數(shù)據(jù)庫(kù)之間進(jìn)行選擇。還是考慮到用戶可能有比較多的PDF的數(shù)據(jù)的情況下缴啡，選擇了sqlite壁晒。然后又在老大的要求下加入了ORM框架Sequelize來(lái)配合sqlite3使用。

我們開發(fā)組很早就想要引進(jìn)TypeScript业栅，加上組內(nèi)有很多寫C#的.net工程師秒咐，學(xué)習(xí)成本還是比較低的，雖然Vue用TS寫有些別扭碘裕，但是我還是趁這次機(jī)會(huì)和老大提出了引入TS的想法携取。結(jié)果老大還是想要等到用TS重寫的Vue3.0發(fā)布后再引入（已經(jīng)2020年了vue3.0還沒(méi)有發(fā)布），所以TS沒(méi)能用到項(xiàng)目上來(lái)娘汞。

正式開發(fā)

項(xiàng)目結(jié)構(gòu)

整個(gè)項(xiàng)目的目錄結(jié)構(gòu)基本上是按照vue的結(jié)構(gòu)來(lái)建的歹茶，但是在開發(fā)到后期發(fā)現(xiàn)存在一些問(wèn)題，關(guān)于項(xiàng)目目錄如何建這個(gè)問(wèn)題我會(huì)單獨(dú)再寫一篇文章來(lái)分享自己的看法你弦，這里就暫且不提了惊豺。

Native編譯問(wèn)題

使用Electron開發(fā)之后，我發(fā)現(xiàn)問(wèn)題最難解決的就是Native包的編譯問(wèn)題禽作，凡是需要調(diào)用其他語(yǔ)言寫的工具都有編譯這一步尸昧，本項(xiàng)目需要編譯的當(dāng)然是Sqlite3了。
走過(guò)了數(shù)不盡的彎路之后旷偿，我先來(lái)提出最后的成功解決方案烹俗，在npm的后置鉤子postinstall中運(yùn)行這條命令electron-builder install-app-deps,這條命令的意思就是安裝編譯相關(guān)的依賴。

先來(lái)講講第一個(gè)坑萍程，其實(shí)在使用vue-cli-plugin-electron-builder生成項(xiàng)目后幢妄，這個(gè)命令是默認(rèn)就在postinsatll里面的，但是我一開始沒(méi)有編譯成功的原因就是因?yàn)槲业膃lectron不是從npm官方源下載的茫负，而是從公司自己的npm源蕉鸳，公司的npm源是連接的淘寶源結(jié)果造成了這個(gè)問(wèn)題。所以無(wú)論下任何npm包一定一定要從npm官方源下載忍法，有些資源太慢就掛代理(這個(gè)是程序員必備技能了吧)潮尝，即使是用淘寶源也千萬(wàn)不要用cnpm命令,cnpm真的是坑太多了。

還是splite3的問(wèn)題饿序，我在Mac上可以跑起來(lái)了勉失。但是當(dāng)放到windows10上就又出問(wèn)題了，看報(bào)錯(cuò)是node-gyp在編譯過(guò)程中出現(xiàn)的問(wèn)題原探。最后發(fā)現(xiàn)在windows上使用sqlite3和electron得配置以下環(huán)境乱凿。

1. python2.7（有的同事電腦安裝python3.5會(huì)報(bào)錯(cuò))
2. windows-build-tools(這個(gè)非常非常重要顽素，如果你的電腦安裝了VS的話，可能不需要這個(gè)東西告匠，但是如果沒(méi)有安裝VS戈抄，務(wù)必安裝這個(gè)包，它會(huì)配置node-gyp在編譯c++等語(yǔ)言的代碼時(shí)必須的環(huán)境后专，非常重要)

數(shù)據(jù)庫(kù)問(wèn)題

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

在這個(gè)項(xiàng)目中我們使用了Sequelize,這是一個(gè)ORM框架,配合sqlite3使用可以讓我們不用寫sql語(yǔ)句,而是通過(guò)對(duì)象的形式來(lái)使用數(shù)據(jù)庫(kù),但是當(dāng)配合vue腳手架使用的時(shí)候會(huì)出現(xiàn)問(wèn)題,控制臺(tái)又報(bào)了sqlite3的錯(cuò)誤戚哎。這個(gè)問(wèn)題是關(guān)于數(shù)據(jù)庫(kù)這塊我處理時(shí)間最長(zhǎng)的一個(gè),最后借助Goole搜索引擎,在某個(gè)外國(guó)作者的個(gè)人博客上找到了解決方法,在vue.config.js里這樣配置

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

使用electronBuilder打包的話同樣需要配置

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

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

UI框架的選擇

一開始這個(gè)項(xiàng)目使用的是ant-design-vue,在UI基本完成之后的某一天,我和一個(gè)做混合開發(fā)也在用ant-design-vue的同事互相吐槽了一下這個(gè)UI庫(kù)里面table組件（確實(shí)操作反人類吧┯谩）型凳。沒(méi)想到這事被旁邊的老大關(guān)注了,在經(jīng)過(guò)8個(gè)人的UI庫(kù)選型討論大會(huì)之后，最終決定使用element-ui,而且沒(méi)有徹底完成的項(xiàng)目都要使用element-ui重寫嘱函。我甘畅。。往弓。疏唾。。函似。槐脏。心里苦啊。

其實(shí)就我作為前端對(duì)角度而言,使用element-ui沒(méi)有問(wèn)題,但是重寫現(xiàn)有的項(xiàng)目UI就真的沒(méi)有必要了,畢竟我們前端使用這些庫(kù)的組件的時(shí)候都是按需引入的,而且其實(shí)很多時(shí)候都需要前端來(lái)調(diào)整組件的樣式撇寞。老大可能是從前端組整體的角度來(lái)看希望能使用統(tǒng)一的UI庫(kù),總之,我之后又把所有ant-design-vue的組件全部替換成element-ui的組件顿天。

PDF的展示

我們這個(gè)項(xiàng)目最主要的功能之一就是對(duì)各種單據(jù)進(jìn)行簽字,所以如何展示單據(jù)并簽字就要用到pdf.js了,這部分功能是由另一位同事調(diào)研了半個(gè)月之后負(fù)責(zé)開發(fā)的,這位同事是.net開發(fā),對(duì)前端不太熟悉,最后導(dǎo)致這部分的功能成了我們項(xiàng)目開發(fā)中最大的難點(diǎn)。

pdf.js是將pdf文檔通過(guò)canvas顯示在頁(yè)面上,然后我們?cè)賹?yīng)用窗口推到wacom的設(shè)備上讓用戶簽字,然后問(wèn)題就產(chǎn)生了蔑担。

1. 簽字字跡不圓潤(rùn), 有斷點(diǎn)的存在牌废。
2. pdf展示模糊。
3. 如何無(wú)損縮放啤握。
4. 筆跡和pdf合成后變模糊鸟缕。
5. pdf文檔切換閃爍問(wèn)題。

下面是填坑的過(guò)程:

1. 參考了一些開源項(xiàng)目對(duì)筆跡的點(diǎn)的算法處理,繪制出了比較圓潤(rùn)的曲線恨统。
2. 參考pdf.js官方Demo,初始化時(shí)渲染高精度pdf
3. 使用pdf.js讀取高精度倍數(shù)的pdf繪制到canvas上, 而字跡我則是通過(guò)Path2D來(lái)記錄繪制軌跡然后重繪來(lái)實(shí)現(xiàn)無(wú)損的縮放叁扫。
4. 我們是通過(guò)公司同事使用C#來(lái)寫的一個(gè)dll來(lái)將pdf和字跡的canvas合成的,這個(gè)最后通過(guò)給這個(gè)dll傳高精度的pdf和字跡實(shí)現(xiàn)比較清晰的合成。
5. 參考pdf.js官方Demo,使用兩個(gè)canvas交替顯示,消除閃爍現(xiàn)象畜埋。

雖然問(wèn)題看似解決了,但最后我們發(fā)現(xiàn)實(shí)際效果還是差強(qiáng)人意,在最終有調(diào)整了半個(gè)月之后,老大看了我們的最終演示,最后決定簽字部分直接使用原來(lái)的exe程序來(lái)實(shí)現(xiàn),我們的應(yīng)用僅展示pdf文件莫绣。

雖然這部分工作并不是我負(fù)責(zé)的,但是我也參與其中改了不少東西,所以到最后換方案還是比較難受的,就好像自己考試考砸了一樣。

打印

pdf的打印真的是讓人奔潰,因?yàn)槲覀冺?xiàng)目對(duì)打印對(duì)要求還是比較高的,比如說(shuō)可以配置打印機(jī)的紙張來(lái)源悠鞍、紙張大小对室、指定打印機(jī)靜默打印等等模燥。而electron的打印api不能完全實(shí)現(xiàn)這些功能。所以一開始這個(gè)打印功能到底是要在electron上用js做還是調(diào)用c#寫的dll或exe,我就進(jìn)行過(guò)研究,因?yàn)檫@是個(gè)重構(gòu)項(xiàng)目,這部分功能有以前寫好的c#代碼可以用,調(diào)用dll應(yīng)該是比較方便的掩宜。但是蔫骂。。,老大想要使用electron自帶的api,他本人盡量想要少使用dll牺汤，哪怕功能得削減辽旋。

既然這樣,那就決定用electron的打印api了,但是剛成功打出兩張之后就發(fā)現(xiàn)了一個(gè)問(wèn)題。electron的打印api有個(gè)靜默打印的設(shè)置,設(shè)置后不會(huì)彈出系統(tǒng)的打印對(duì)話框,但是如果我開了這個(gè)設(shè)置,那么指定的打印機(jī)就會(huì)失效,系統(tǒng)會(huì)使用默認(rèn)的打印機(jī)打印檐迟。

又是Google找問(wèn)題時(shí)間,最后我到electron的github主頁(yè)上看到了別人提的issue,作者回復(fù)這是個(gè)bug,而且由于底層代碼問(wèn)題只能在electron7中才能修復(fù)补胚。心累啊,我建項(xiàng)目的時(shí)候才electron5,現(xiàn)在就要用electron7了？但是沒(méi)辦法,這個(gè)時(shí)候的穩(wěn)定版是electron6,我只好在npm下了electron7.0.0-beta.3,這是我用的最長(zhǎng)的一個(gè)npm版本追迟。

這之后還有不少問(wèn)題,比如說(shuō)打印出來(lái)多了頁(yè)邊距,獲取不到實(shí)際打印結(jié)果,打印次數(shù)多直接奔潰之類的溶其。最后雖然磕磕絆絆的完成了打印的功能,但是如果有人想要在electron上打印的話,如果需求比較復(fù)雜,強(qiáng)烈建議不要用electron的打印api,盡早換別的方案,這個(gè)坑就不要再踩了。

錯(cuò)誤日志記錄

這部分用了log4.js這個(gè)庫(kù),這個(gè)功能還是比較順利的,照著官方文檔基本上沒(méi)有什么坑敦间。

與IPAD通信

我們一般是將文檔推到wacom上讓客人簽字,不過(guò)也有些客戶想用IPAD,所以后來(lái)就開發(fā)了一個(gè)ios應(yīng)用,用來(lái)接收pc端推過(guò)去的pdf文檔,然后在IPAD上簽字,完成后在推送到pc端瓶逃。

這個(gè)功能在老項(xiàng)目上是用rabbitmq來(lái)通信的,使用electron重構(gòu)的新項(xiàng)目我本來(lái)是想要看看能不能使用grpc來(lái)實(shí)現(xiàn),結(jié)果在大概看了官方文檔也用node寫了個(gè)簡(jiǎn)單demo之后,發(fā)現(xiàn)在electron上不能使用,因?yàn)闀?huì)編譯失敗。在查閱來(lái)一些資料后,我認(rèn)為是electron版本太新了,但是因?yàn)榈桶姹镜拇蛴pi有bug,又不能降版本,所以只好改用rabbitmq,和老版本保持一致的方案廓块。rabbitmq的node實(shí)現(xiàn)是amqplib,使用amqplib順利完成了這個(gè)功能厢绝。

小結(jié)

項(xiàng)目暫且就記錄到這里吧,總而言之,在這個(gè)項(xiàng)目的開發(fā)中我學(xué)到了很多,也遇到了很多問(wèn)題〗斯牵看到這篇文章的人如果對(duì)于我踩的坑有更好的處理方式,歡迎留言指教代芜。