Electronvue开发实战之TodoList

共计 5838 个字符，预计需要花费 15 分钟才能阅读完成。

原文首发于我的博客，欢迎点击查看获得更好的阅读体验~

开发 To-Do-List 大部分的原因是因为看到了 molunerfinn 所写的 Electron-vue 开发实战的系列文章，比较详细的介绍了 PicGo 的开发流程，便就着文章教程开始了开发。

本篇文章主要是记录一下在 Electron-vue 开发实战中没有提及到的问题以及一些知识点。

构建完项目后，就找了个简单项目练练手，项目是模仿 TIM 的中自带的待办事项功能。所谓是工欲善其事，必先利其器(虽然市面上有很多更强大的类似应用，主要是用于自己练手)，那就从它开始下手。

一个目标的建立，将是成就的开始。

书接上回，上回说到基于 Electron-vue 构建项目时遇到的一些坑，那么实际开发中又会遇到哪些灵异事件呢？且听我慢慢道来。

项目地址：https://github.com/gorkys/To-…（如果你喜欢它，或者对你有帮助，请点Star）

项目功能：

新建与编辑待办事项
恢复与删除已完成事项
完成事项进度条
Mini 窗口以及双击新建剪贴板数据
日程提醒
支持剪贴板新建事项
Mini 窗口仿迅雷动画（未完成）

技术栈：

electron-vue
Vue
Vuex
lowdb
element-ui

项目截图:

问题发生在创建 右键菜单 ，将菜单中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 才会注入到系统中。

在打包好后，果然打包好的应用实际上是已经有了通知的功能，并且在开发环境下也可以正常使用了。

在解决通知问题时需要打包应用，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.

查阅了一些解决方案

https://segmentfault.com/a/11…
https://github.com/electron-u…
https://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 下载下来了。

如果还是不行的话，那么就直接自己打开 https://github.com/electron/e… 在找到对应版本，在浏览器中下载后，将文件放入%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 所得文件

注意：以上所说目录若不存在，请手动新建（其实只要执行到某一步，就会自动生成该目录），目录中已有的缓存文件可以删掉

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 中的数据存到了本地。

因为应用的窗口大小原因，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 样式

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 来模拟渐变过渡。

参考链接：https://ask.helplib.com/css/p…

目前找到的只有这个链接提供 256*256 的 ico 格式的转换

链接地址：http://ico.duduxuexi.com/

本文主要讲述了在开发 To-Do-List 中所遇到的一些问题和踩的坑以及一些知识点，该项目花费了一个星期左右的时间，也许文中简单的几句话背后就是我无数次的查阅和调试。希望这篇文章能够给你的 electron-vue 开发带来一些启发。文中相关的代码，你都可以在 To-Do-List 的项目仓库里找到。

希望本文能够给你带来帮助，这是我最开心的地方。

如果喜欢，欢迎关注我的博客以及本系列文章的后续进展。

另外，再次感谢 molunerfinn 提供的 electron-vue 实战开发系列文章。

前言

项目说明

踩坑之旅

main 进程中修改内容，重启应用后仍不显示相应内容

问题背景

解决方案

开发过程中使用通知功能时，通知功能无效

问题背景

解决方案

electron-vue 打包的正确姿势

问题背景

解决方案

vuex 两个页面之间的数据同步

问题背景

解决方案

修改 element-ui 的 DateTimePicker 组件样式

问题背景

解决方案

应用打包后，iconfont 不显示问题

问题背景

解决方案

窗口透明状态

渐变进度条、渐变滚动条以及渐变的动画效果

渐变进度条

渐变滚动条

渐变的动画效果

在线生成透明 ICO 图标站点推荐

总结

Just My Socks（注册教程内含优惠码）

Electronvue开发实战之TodoList

前言

项目说明

踩坑之旅

main 进程中修改内容，重启应用后仍不显示相应内容

问题背景

解决方案

开发过程中使用通知功能时，通知功能无效

问题背景

解决方案

electron-vue 打包的正确姿势

问题背景

解决方案

vuex 两个页面之间的数据同步

问题背景

解决方案

修改 element-ui 的 DateTimePicker 组件样式

问题背景

解决方案

应用打包后，iconfont 不显示问题

问题背景

解决方案

窗口透明状态

渐变进度条、渐变滚动条以及渐变的动画效果

渐变进度条

渐变滚动条

渐变的动画效果

在线生成透明 ICO 图标站点推荐

总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）