怎么使用Vue开发Electron应用?有感而结

怎么使用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))进行自动下载软件,然后自动打开安装界面手动安装更新。

Guess you like

Origin blog.csdn.net/qq_34995862/article/details/115491129