Electron是使用HTML，CSS和JavaScript來(lái)構(gòu)建跨平臺(tái)桌面應(yīng)用程序的一個(gè)開(kāi)源庫(kù).應(yīng)公司業(yè)務(wù)需求，開(kāi)發(fā)一款window桌面端應(yīng)用睦焕。第一次接觸Electron遇到很多坑红省，特此記錄分享。
使用的工具
- electron-vue作為整個(gè)應(yīng)用的開(kāi)發(fā)框架晶疼，結(jié)合了vue和Electron
- 常見(jiàn)打包工具有
electron-builer和electron-packager, 本應(yīng)用使用的是擁有更強(qiáng)大的功能的electron-builder酒贬，新上手的同學(xué)可以使用electron-packager生成簡(jiǎn)單的exe程序 - 本地?cái)?shù)據(jù)庫(kù)為了方便兼容其他語(yǔ)言，選擇了sqlite,而非常見(jiàn)的lowdb翠霍，同時(shí)為了保證一定的加密效果锭吨，最終選擇了
@journeyapps/sqlcipher, 相比普通sqlite這個(gè)包使用了SQLCiphe加密 - 其他前端開(kāi)發(fā)工具選擇vue全家桶
vue-router、vuex寒匙、axios和element-ui
Electron 安裝失敗問(wèn)題
參考官方文檔 1
https://electronjs.org/docs/tutorial/installation#%E6%95%85%E9%9A%9C%E6%8E%92%E6%9F%A5
electron-vue 常見(jiàn)問(wèn)題
參考文檔：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/faqs.html
electron-builder配置
{
"build": {
"productName": "wcdAssistor",
"appId": "727438548@qq.com",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"extraResources": [
"depend/**/*"
],
// 核心打包時(shí)的配置
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "static/icons/256x256.png"
},
"win": {
"icon": "static/icons/256x256.png", // window下應(yīng)用的圖標(biāo)
"legalTrademarks": "58Assistor"
},
"linux": {
"icon": "static/icons"
},
"nsis": {
"oneClick": false, // 是否一鍵安裝零如，不可更改目錄等選項(xiàng)，默認(rèn)為true
"perMachine": true,
"allowElevation": true, // 是否允許權(quán)限提升
"allowToChangeInstallationDirectory": true, // 是否允許更改安裝路徑
"createDesktopShortcut": true, // 是否創(chuàng)建桌面圖標(biāo)
"runAfterFinish": true, // 安裝完成請(qǐng)求運(yùn)行
"shortcutName": "wcd助手", // 桌面圖標(biāo)名稱(chēng)
"installerIcon": "./static/icons/icon.ico", // 安裝包圖標(biāo)
"uninstallerIcon": "./static/icons/icon.ico" //卸載程序圖標(biāo)
},
"publish": [
{
"provider": "generic", // 自定義更新包路徑
"url": "http://wucd.top/xw_update/" // 更新包所在地址
}
]
}
}
其他文檔：https://github.com/eyasliu/blog/issues/22
首次build失敗的問(wèn)題
找到報(bào)錯(cuò)位置為下載失敗锄弱，需要手動(dòng)下載文件到~/AppData/Local/electron-builder/cache下相應(yīng)目錄考蕾，比如最終我的目錄結(jié)構(gòu)為：
# 7z文件為手動(dòng)下載的文件，然后解壓到同級(jí)目錄会宪，解壓后7z文件可以刪除肖卧，但我沒(méi)刪除
+-- xxx/cache
+-- nsis
+-- nsis-3.0.31
+-- 好多的文件
+-- nsis-resources-3.3.0
+-- 好多的解壓后的文件
+-- nsis-3.0.3.1.7z
+-- nsis-resources-3.3.0.7z
+-- winCodeSign
+-- winCodeSign-2.1.0
+-- 解壓的文件
+-- winCodeSign-2.1.0.7z
electron-builder 更新模塊出錯(cuò)的問(wèn)題
出現(xiàn)A complete solution to package and build a ready for distribution Electron app with "auto update" support out of the box...的問(wèn)題
electron-vue 不適用于新版本的electron-builder中的autoUpdate模塊，需要手動(dòng)安裝autoUpdate到3.0.0版本掸鹅，注意要裝在devDependices里塞帐，否則會(huì)出現(xiàn)要求最低版本為4.0.0的錯(cuò)誤提示
sqlite使用失敗的問(wèn)題
sqlite安裝過(guò)程有許多坑拦赠，這里使用的是帶有一定加密性的@journeyapps/sqlcipher, 它的所需環(huán)境和sqlite類(lèi)似，下面的步驟同樣適用于sqlite的使用
- 配置window下編譯環(huán)境
npm install windows-build-tools -g
- 檢測(cè)當(dāng)前使用的electron版本
electron --version
比如我的是2.0.4
- 安裝sqlite
cnpm install sqlite3@latest --build-from-source --runtime=electron --target=2.0.4
--dist-url=https://atom.io/download/electron --save
葵姥！注意 這里一定使用cnpm, npm運(yùn)行會(huì)失敗荷鼠，即使翻墻后也會(huì)失敗，所以務(wù)必使用cnpm
electron-vue 使用vuex失效的問(wèn)題
使用electron-vue創(chuàng)建項(xiàng)目并使用vuex, 有可能出現(xiàn)在開(kāi)發(fā)web時(shí)正常使用的方法榔幸，在這里失效的問(wèn)題颊咬，這可能是使用vuex-electron的緣故。vuex-electron主要用作在多個(gè)進(jìn)程中共享數(shù)據(jù)牡辽，解決方法可任選其一
- 如果沒(méi)有多個(gè)進(jìn)程的場(chǎng)景喳篇，可以去掉
vuex-electron的使用，單獨(dú)使用vuex, 或者在store/index.js中去掉createSharedMutations的使用
import Vue from 'vue'
import Vuex from 'vuex'
?// 去掉createSharedMutations的引用
import {createPersistedState/**, createSharedMutations */ } from 'vuex-electron'
?
import modules from './modules'
?
Vue.use(Vuex)
export default new Vuex.Store({
modules,
plugins: [
createPersistedState(),
createSharedMutations() // 注釋掉這行行代碼
],
strict: process.env.NODE_ENV !== 'production'
})
- 如果確實(shí)有多進(jìn)程的應(yīng)用場(chǎng)景态辛，需要用到
vuex-electron可以使用以下方法
在源目錄/src/main/index.js中開(kāi)頭加上store的引用即import '../renderer/store'
總結(jié)
作為首次嘗試Electron開(kāi)發(fā)項(xiàng)目麸澜，在整個(gè)開(kāi)發(fā)過(guò)程中遇到的坑遠(yuǎn)遠(yuǎn)不止這些，這里不再一一列舉奏黑。如果大家在開(kāi)發(fā)中遇到相關(guān)問(wèn)題炊邦，歡迎一起討論。
