記一次electron開發總結

項目背景

一個課堂導調系統，主要包括投屏、監控、聊天、上傳下載等等，類似機房系統，然後先前用vue實現了一版web端，比較麻煩，受瀏覽器限制很多，所以利用國慶七天假用electron大致重現改進了一遍。

開發起步

用了一個github上的electron-admin-vue的模板
地址:electron-vue-admin模板

後臺基於springboot，也沒實現什麼，只有一個登陸系統和上傳系統以及一個websocket作爲webRTC的信令服務器，後期會把代碼都傳到我的github上
地址:我的github

UI框架用的是elementUI 2.12.0
官方文檔:文檔

這裏主要是一個electron小白對於第一次做electron開發的一些經驗記錄

1、electron安裝vue-dev-tools

首先，你需要從vue-devTools的github上把它的代碼拉下來，然後cnpm install 安裝它的依賴，安裝完了就cnpm build 打包編譯，修改mainfast.json裏的一個參數，完了把這個文件夾的地址記錄下來，在index.dev.js或者index.js中這麼寫:

// Install `vue-devtools`
require('electron').app.on('ready', () => {
 let installExtension = require('electron-devtools-installer')
 installExtension.default(installExtension.VUEJS_DEVTOOLS)
   .then(() => {})
   .catch(err => {
     console.log('Unable to install `vue-devtools`: \n', err)
   })
   //這裏就是那個文件夾中的shells/chrome的完整地址
 BrowserWindow.addDevToolsExtension("C:\\Users\\A\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\vue-devtools-dev\\vue-devtools-dev\\shells\\chrome");
})

詳細博客:參考chrome中安裝vue-devTools這個博客主要是記錄如何安裝vue-devTools的

2、electron中elementui的table不顯示問題

這個問題倒是困擾了我一會，不過還好，網上的博客夠多，也是翻到了這個問題。
需要將elementui添加到webpack的白名單列表即可，具體原因可以百度。操作如下：
修改webpack.renderer.config.js中的whiteListedModules，將elementui加入

let whiteListedModules = ['vue','element-ui']

3、electron-vue中在chrome打斷點打不准問題

修改webpack的配置文件，將devtool屬性全部改成cheap-module-source-map

4、electron-vue中做文件下載

注意：文件的下載路徑一定要全，不能寫成www……,必須http或者https起手
然後保存路徑如果不存在這個文件夾，electron會自動創建

這裏主要使用到了主/渲染 進程通信，渲染進程把下載地址、保存路徑發送給主進程，主進程通過downloadURL方法會發送一個will-download消息，主進程捕獲到這個消息後將文件保存，並且可以操控下載進度等等，成功後主進程再發送消息給渲染進程進行相應的響應。

下面來看操作：

• 主進程 main/index.js中

//download監聽
ipcMain.on('download', (evt, args) => {
 let arr = args.split("+");
 downloadpath = arr[0];
 folderpath = arr[1];
 console.log(args)
 // evt.sender.send('tips',downloadpath);
 mainWindow.webContents.downloadURL(downloadpath);
});

//will-download監聽
mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
   //設置文件存放位置
   item.setSavePath(folderpath+`\\${item.getFilename()}`);
   item.on('updated', (event, state) => {
     if (state === 'interrupted') {
       console.log('Download is interrupted but can be resumed')
     } else if (state === 'progressing') {
       if (item.isPaused()) {
         console.log('Download is paused')
       } else {
         console.log(`Received bytes: ${item.getReceivedBytes()}`)
       }
     }
     console.log("update")
   })
   item.once('done', (event, state) => {
     if (state === 'completed') {
       console.log('Download successfully')
       webContents.send('download-success',item.getReceivedBytes())
     } else {
       console.log(`Download failed: ${state}`)
     }
   })
 })

• 渲染進程中 ***.vue
  
  

目前遇到的棘手問題就那麼多，當然主要棘手的還是webRTC，以後有機會會單開一篇總結WebRTC的問題。