Electron-vue開發實戰之To-do-List

原文首發於個人博客，歡迎點擊查看得到更好的閱讀體驗~

前言

開發To-Do-List大部分的緣由是由於看到了molunerfinn所寫的Electron-vue開發實戰的系列文章，比較詳細的介紹了PicGo的開發流程，便就着文章教程開始了開發。

本篇文章主要是記錄一下在Electron-vue開發實戰中沒有說起到的問題以及一些知識點。

構建完項目後，就找了個簡單項目練練手，項目是模仿TIM的中自帶的待辦事項功能。所謂是工欲善其事，必先利其器(雖然市面上有不少更強大的相似應用，主要是用於本身練手)，那就從它開始下手。

一個目標的創建，將是成就的開始。

書接上回，上回說到基於Electron-vue構建項目時遇到的一些坑，那麼實際開發中又會遇到哪些靈異事件呢？且聽我慢慢道來。

項目說明

項目地址：github.com/gorkys/To-D…（若是你喜歡它，或者對你有幫助，請點Star）

項目功能：

• 新建與編輯待辦事項
• 恢復與刪除已完成事項
• 完成事項進度條
• Mini窗口以及雙擊新建剪貼板數據
• 日程提醒
• 支持剪貼板新建事項
• Mini窗口仿迅雷動畫（未完成）

技術棧：

• electron-vue
• Vue
• Vuex
• lowdb
• element-ui

項目截圖:

踩坑之旅

main進程中修改內容，重啓應用後仍不顯示相應內容

問題背景

問題發生在建立右鍵菜單，將菜單中click事件彈出dialog改成Notification，重啓應用後仍是彈出的dialog，而若是隻是修改dialog中body的內容就能及時顯示。當時要下班回家了，就沒管它。

解決方案

到次日打開電腦的時候，忽然它就反映過來了，通過一系列的測試與排除，發現問題的根本緣由是：

// main/index.js
import {
  ...,
  dialog,
  Notification,
  ...
} from 'electron'
複製代碼

引入了兩個模塊，而在使用時dialog並無都使用到，致使的渲染不及時。只要註釋或者刪除多餘引入就能夠了。

開發過程當中使用通知功能時，通知功能無效

問題背景

在解決上面的問題後，發現使用Notification後，無論如何點擊都不顯示，不報錯。有bug只要報錯就不可怕，可是呢，它就是無任何反映。

而後翻教程，以及官方文檔，固然也不是一無所得，至少在經過CI發佈以及更新的方式以及官方文檔中都提到了windows下須要使用到appid。

// main/index.js
import pkg from '../../package.json'
// 設置appId
if (process.platform === 'win32') {
  app.setAppUserModelId(pkg.build.appId)
}
複製代碼

然而並非這麼簡單。

解決方案

在electron的技術羣內，獲得一位大佬指點

原來是要先把應用打包好，而後在電腦中安裝該應用並打開應用。這樣appid纔會注入到系統中。

在打包好後，果真打包好的應用其實是已經有了通知的功能，而且在開發環境下也能夠正常使用了。

electron-vue打包的正確姿式

問題背景

在解決通知問題時須要打包應用，npm run bulid後又出現了一系列問題。

受限於牆以及網絡環境，不少人在嘗試打包electron程序時都會碰到。

Error: E:\Project\WebStorm\Electron\To-Do-List\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code 1
    at ChildProcess.childProcess.once.code (E:\Project\WebStorm\Electron\To-Do-List\node_modules\builder-util\src\util.ts:244:14)
    at Object.onceWrapper (events.js:286:20)
    at ChildProcess.emit (events.js:198:13)
    at maybeClose (internal/child_process.js:982:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! to-do-list@0.0.1 build: `node .electron-vue/build.js && electron-builder`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the to-do-list@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
複製代碼

解決方案

查閱了一些解決方案

1. segmentfault.com/a/119000001…
2. github.com/electron-us…
3. juejin.im/post/5bc53a…

首先是設置淘寶鏡像：

npm set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
複製代碼

或者是在C:\Users\用戶名下找到.npmrc直接添加

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
複製代碼

設置好後應該就能夠將electron-v2.0.18-win32-x64下載下來了。

若是仍是不行的話，那麼就直接本身打開github.com/electron/el…在找到對應版本，在瀏覽器中下載後，將文件放入%LOCALAPPDATA%\electron\Cache

而後就是一些electron-builder的包下載超時的問題

• winCodeSign
• nsis
• nsis-resources

下載下來後解壓到 %LOCALAPPDATA%\electron-builder\cache目錄下，不知是否版本問題，在上面的文章中集體都是說下載包獨立解壓，可是在我這裏並不適用。實際中在本機的目錄以下

(注意nsis-resources的包是壓解到nsis目錄下的)：

├── electron
│   └── Cache
│   	└── electron-v2.0.18-win32-x64.zip
├── electron-builder
│   └── cache
│   	└── nsis
│   		└── nsis-3.0.1.13
│               解壓nsis-3.0.1.13.7z所得文件
│   		└── nsis-resources-3.3.0
│               解壓nsis-resources-3.3.0.7z所得文件
│   	└── winCodeSign
│   		└── winCodeSign-1.9.0
│               解壓winCodeSign-1.9.0.7z所得文件
複製代碼

注意：以上所說目錄若不存在，請手動新建（其實只要執行到某一步，就會自動生成該目錄），目錄中已有的緩存文件能夠刪掉

vuex兩個頁面之間的數據同步

問題背景

To-Do-List項目中有一個詳細窗口還有一個Mini窗口，詳細窗口中完成一個事項後，進度條狀態改變，同時Mini窗口其實也是個進度，狀態也應該相應改變，而在最初使用的是基礎的vuex，至關於瀏覽器中開了兩個標籤，而這時vuex是不可能支持共享的。

後面就打算使用main進程進行中轉操做，在查資料時看到了關於使用vue-electron腳手架進行vuex賦值時，失敗的解決辦法中有提到

若是沒有多進程交互的需求，徹底能夠不引入這個插件(vuex-electron)。

原來之前陰差陽錯刪除vuex-electron插件的引入讓我避免了他所述的問題。

可是如今須要多進程交互了

解決方案

首先引入插件（其實構建項目時是已經默認引入了）

// store/index.js
...
import { createPersistedState, createSharedMutations } from 'vuex-electron'

...


export default new Vuex.Store({
  modules,
  plugins: [
    createPersistedState(),
    createSharedMutations()
  ],
  strict: process.env.NODE_ENV !== 'production'
})

複製代碼

而後在主進程的index.js中引入

// main/index.js
import '../renderer/store'
複製代碼

這樣就能夠多進程共享vuex了，你會發如今應用的目錄下會生成一個vuex.json的文件，其實就是把vuex中的數據存到了本地。

修改element-ui的DateTimePicker組件樣式

問題背景

由於應用的窗口大小緣由，DateTimePicker組件的默認樣式比較佔地方，因此須要把樣式修改一下。日常在組件內的樣式中使用/deep/修改就能夠了，可是此次並無修改爲功。

解決方案

除了使用/deep/來深度修改樣式，還有就是引入文件的方式覆蓋。

// assets/reset.scss
.el-date-picker{
  width: 300px!important;
  .el-picker-panel__body{
    .el-date-picker__header {
      margin: 2px auto!important;
    }
    .el-picker-panel__content{
      margin: 2px auto!important;
      .el-date-table th{
        padding: 0!important;
      }
      .el-date-table td{
        padding: 0!important;
      }
    }
  }
}
複製代碼

而後在組件中引入便可

// components/todoList
import '../../assets/reset.scss' // 重置el-date-picker樣式
複製代碼

應用打包後，iconfont不顯示問題

問題背景

element-ui中的圖標仍是少了些，沒有的圖標就使用了iconfont中的圖標，在開發環境時將文件放入static\fonts下，而後在inex.ejs中引入

// index.ejs
<link rel="stylesheet" type="text/css" href="../static/fonts/iconfont.css">
複製代碼

能夠正常顯示，可是打包後，圖標就不見了。

解決方案

翻了一下dist/electron/打包目錄發現，其實只須要一個.就夠了

// index.ejs
<link rel="stylesheet" type="text/css" href="./static/fonts/iconfont.css">
複製代碼

窗口透明狀態

在main進程中建立窗口時參數加入transparent:true就可使窗口透明，可是由於html默認是白色背景，因此須要在App.vue樣式中加入

html,body{
	...
    background-color: rgba(0, 0, 0, 0)
}
複製代碼

而後在主頁面的樣式中index.vue加入

#box{
    ...
    background-color: rgba(75, 75, 75, 0.8)
}
複製代碼

漸變進度條、漸變滾動條以及漸變的動畫效果

漸變進度條

使用了element-ui的Progress組件，修改其樣式以下：

.progress{
        margin: 20px 50px 50px;
        border-radius: 1px;
        /deep/ .el-progress-bar__outer{
            border-radius: 2px;
            .el-progress-bar__inner {
                border-radius: 2px;
                background-color: #8EC5FC;
                background-image: linear-gradient(177deg,#E0C3FC 24%,#8EC5FC 75%);
                background-image: -webkit-linear-gradient(177deg,#E0C3FC 24%,#8EC5FC 75%);
            }
        }
複製代碼

漸變滾動條

使用了Chrome所獨有的::-webkit-scrollbar屬性，相關文檔點擊此處

#todoList{
        overflow-x: hidden;
        padding: 0 50px;
        color: white;
        height: calc(600px - 170px);
        &::-webkit-scrollbar{
            width:5px;
            height:5px;
        }
        &::-webkit-scrollbar-thumb{
            border-radius:4px;
            background-color: #8EC5FC;
            background-image: linear-gradient(177deg,#8EC5FC 24%,#E0C3FC 75%);
            background-image: -webkit-linear-gradient(177deg,#8EC5FC 24%,#E0C3FC 75%);
        }
        &::-webkit-scrollbar-track{
            background-color:transparent
        }
    }
複製代碼

漸變的動畫效果

使用漸變事後就不能使用:hover等僞類，可是有一個解決方案是使用 background-position來模擬漸變過渡。

參考連接：ask.helplib.com/css/post_47…

在線生成透明ICO圖標站點推薦

目前找到的只有這個連接提供256*256的ico格式的轉換

連接地址：ico.duduxuexi.com/

總結

本文主要講述了在開發To-Do-List中所遇到的一些問題和踩的坑以及一些知識點，該項目花費了一個星期左右的時間，也許文中簡單的幾句話背後就是我無數次的查閱和調試。但願這篇文章可以給你的electron-vue開發帶來一些啓發。文中相關的代碼，你均可以在To-Do-List的項目倉庫裏找到。

但願本文可以給你帶來幫助，這是我最開心的地方。

若是喜歡，歡迎關注個人博客以及本系列文章的後續進展。

另外，再次感謝molunerfinn提供的electron-vue實戰開發系列文章。