开发Vue+Electron应用？有感而结

陆续开发了小几个月的桌面端应用终于要收官了，软件是作为一款游戏平台的卖家客户端，业务复杂度中等，但是作为第一次接触并开发Electron，其中遇见了不少的问题和注意点，值得回顾与分享

1. 初始化项目

很简单，先用vuecli创建个项目，再用插件初始化

1. @vue/cli 创建项目(cli版本大于等于3)：vue create xxx
2. npm 安装 vue-cli-plugin-electron-builder
3. 执行语句 vue add electron-builder，完成初始化

会得到一个background.js 文件，里面写electron的主进程设置

2.开发过程

2.1 过程

electron 的开发最重要是理解进程代码，分有主、渲染两种进程，background.js里写主进程，各页面是渲染进程，两者之间可通讯，这部分需要认真学习。其余部分与正常html开发差异不大。
这次使用的vue开发，除了进程代码外，基本和正常vue开发的代码无异，上手快。
开发完成后需要进行打包（和vuecli开发流程无异），分别打出win和mac平台的安装包，然后发布

2.2 注意点

具体知识点不再重复了，列举几个开发中可能遇到的注意点

1. 写package.json的 ‘build’ 配置项
   
   如上图，开发中搜问题时经常有这种，让写在package.json的build里，但写进去就报错。因为用的vuecli版本是3，所以需要新建一个vue.config.js解决方案来源，写在pluginOptions里，

2. 主进程里不能获取window对象，如想操作localstorage，可发通讯给渲染进程进行操作，或安装对应插件在主进程里操作

3. 渲染进程里使用主进程函数，使用remote：
   如 const {dialog} = require('electron').remote; dialog.showMessageBox()

4. 获取webview页面cookie，可见从webview获取cookie方法

3.打包

electron 可分别打包win和mac应用，跨平台比较方便。都需要在vue.config.js里进行配置（网上的教程大多是写的在package.json里，注意不是package.json）但mac由于安全性需要签名和公证才能正常打开，可见mac签名公证方法，具体方法不再重复。

桌面图标锯齿感：打包使用了256x256尺寸的桌面小图标，mac没问题，windos图标出现了有锯齿感的情况，应该是高清图标被win系统压缩导致的失真，解决方法是：把从小到大不同尺寸的 icon 放到一个 .ico 文件里。
锯齿感：

无锯齿

附：昨天打包完公证时，突然遇到了下面错误码1048的问题

Error: code 1048 (You must first sign the relevant contracts online. (1048))

解决方案

4.更新维护

没有用 electron 官方提供的更新模块，通过每次打开软件自动查询比对一次版本号，使用electron带有的下载方法进行下载（contents.downloadURL(url)）进行自动下载软件，然后自动打开安装界面手动安装更新。