配合工具,快速学习与体验electron增量更新

有任何问题,都可以私信博主,共同探讨学习。


前言

前段时间已经把electron增量更新相关知识点介绍完毕,但还是有很多小伙伴私聊我,需要源码和更细致的讲解。

这部分的文章可能确实比较匮乏,所以我在以前的开源项目里增加了这部分的源码。希望对大家有所帮助。文章中的链接过多,很容易被平台送进小黑屋,所以源码地址放在评论区,各位有需要的自行下载即可。

本篇文章主要介绍如何使用源码和博主开发的工具,体验和便捷开发自己的增量更新功能。


一、如何使用源码

1.1 下载代码

首先大家需要通过git下载代码,在想要存放项目的文件夹,打开cmd命令行窗口,输入:

c 复制代码
git clone https://gitee.com/zjsj_lize/electron-vue-basic.git

如图: 回车,即可在该目录下载代码资源。

1.2 下载资源

通过自己喜欢的编译器IDE打开项目,我的是webstorm,然后在终端窗口输入

c 复制代码
npm install
或者
cnpm install
或者
yarn install
......

选一个你喜欢的工具(npm、cnpm、yarn等),下载代码所需资源。如果electron相关代码下载失败,记得使用国内镜像资源。

1.3 运行项目

资源下载完毕后,在终端输入命令:

c 复制代码
yarn dev
或者
npm run dev

运行项目,如图: 切换登录方式,即可无需密码进入软件。

如果需要博主的其他资源,可以通过中二少年学编程的个人主页来获取你需要的资源。

二、如何使用工具

2.1 打包新版本更新包

首先我们要了解,当服务器上的软件版本大于本地软件版本,才会触发更新操作。

所以,我们先打包一个1.0.1版本的软件。在package.json文件中,修改版本信息为1.0.1: 在终端执行:

c 复制代码
yarn build
或者
npm rund build

得到打包后的文件如图:

其中,和更新有关的是三个文件:

  • electron-vue-basic Setup 1.0.1.exe
  • electron-vue-basic Setup 1.0.1.exe.blockmap
  • latest.yml

将这三个文件放到服务器上,如果本地的三个对应文件版本低于服务器,那么就会触发更新操作。

2.2 创建nginx文件服务器

通过博主开发的工具------中二少年工具箱,快速搭建一个nginx服务器。获取地址:中二少年学编程的个人主页 启动后,默认端口83就是一个文件服务器,介绍一下各个参数:

  • alias:文件部署的相对路径
  • autoindex:打开文件浏览功能,nginx默认是关闭文件目录浏览功能
  • sendfile:是否启用sendfile系统,提高文件传输性能。新版的nginx都是默认开启,为了兼容旧版本,我们显式地配置为on
  • charset:编码格式,不设置可能会导致文件名乱码
  • limit_rate:传输速率。如果本地测试更新功能,不设置速率,文件传输速度会过快,看不到软件更新的过程,限制速率,开发环境,可以更好地测试,正式环境,可以控制流量。

上面是文件服务器常用的几个参数,中二少年工具箱里已经为大家提供可视化操作,如果需要更多个性化配置,可以自行打开nginx配置文件修改参数。

如果需要在可视化页面修改配置,需要点击提交后,再点击启动或者重启,才可生效。

2.3 在文件服务器保存软件更新包

nginx启动后,点击右上角的快捷操作:

点击打开部署文件夹:

会直接打开nginx文件服务部署的文件夹:

再点击打开站点: 会自动打开浏览器,并访问我们部署的文件服务器: 出现我们复制的三个文件,说明文件成功部署到nginx服务器中。

三、如何测试更新

3.1本地运行低版本

重新修改项目的package.json,将版本号修改为1.0.0(低于nginx服务器中的1.0.1): 然后在本地运行项目,软件首页会默认弹出更新框:

点击立即更新,在终端输出信息:

可以看出,我们写的更新代码生效了,发现了服务器有新版本1.0.1,但是更新的时候提示缺少dev-app-update.yml文件。

3.2 本地测试更新功能

dev-app-update.yml文件的相关信息在electron-updater官网(其实就是electron-builder的auto update部分,electron-updater应该是基于auto-update,源码很多都是一样的):

Note that in order to develop/test UI/UX of updating without packaging the application you need to have a file named in the root of your project, which matches your setting from electron-builder config (but in yaml format). But it is not recommended, better to test auto-update for installed application (especially on Windows). Minio is recommended as a local server for testing updates.

上面是原文,大致意思就是如果想要在开发环境测试更新功能,就需要在项目根目录创建一个yaml类型的文件,该文件和electron-builder中的配置相匹配。后面说不建议xxx那巴拉巴拉一大堆可以不用管。

我想说的是,官方就算不建议开发环境下测试更新功能,你能不能给个配置模版,让我自行选择接不接受建议......官方没模版,网上的文章也是五花八门各种黑科技去绕过这个机制~~

其实解决方式很简单,只需要在项目根目录,创建dev-app-update.yml文件: 然后在其中配置:

c 复制代码
provider: generic
updaterCacheDirName: dev-updater
url: "http://127.0.0.1:83/updater/lize-tools-pc"

url可以随便写,因为我们更新的逻辑里,会通过代码去维护服务器地址。但是不能不写,否则可能会有问题。

把上面都做完后,再点击更新按钮: 发现正常更新。如果是第一次更新,即使设置了增量更新,也会走一次全量更新,因为本地没有源文件,从1.0.0至1.0.1只能走一次全量。后面再从1.0.1至1.0.2,就会走增量更新。

至此,我们配合着中二少年工具箱,把electron-bue-basic项目源码的增量更新功能完全演示了一遍。后续有个性化开发需求,也可以借助中二少年工具箱的nginx管理功能,方便快捷地搭建文件服务器。

如果仍然有不明白的小伙伴,请私聊我吧。


总结

有任何前端项目、demo、教程需求,都可以联系博主,博主会视精力更新,免费的羊毛,不薅白不薅!~

相关推荐
每天都要喝奶茶21 分钟前
vue3uniapp实现自定义拱形底部导航栏,解决首次闪烁问题
前端·vue.js·uni-app
May_Xu_23 分钟前
vue3+less使用主题定制(多主题定制)可切换主题
前端·javascript·vue.js·vue·less·css3
qq_4275060823 分钟前
less解决function中return写法在浏览器被识别成Object导致样式失败的问题
前端·css·less
Elastic 中国社区官方博客29 分钟前
将你的 Kibana Dev Console 请求导出到 Python 和 JavaScript 代码
大数据·开发语言·前端·javascript·python·elasticsearch·ecmascript
北京_宏哥1 小时前
《最新出炉》系列入门篇-Python+Playwright自动化测试-41-录制视频
前端·python·测试
小霖家的混江龙1 小时前
Vite 打包 H5 如何注入版本号
前端·vite
叶不休2 小时前
DOM---鼠标事件类型(移入移出)
开发语言·前端·javascript·css·chrome·前端框架·html
爱编程的鱼2 小时前
web前后端交互方式有哪些?
前端·okhttp
言6662 小时前
vue点击菜单,出现2个相同tab,啥原因
前端·javascript·vue.js
Z_ One Dream2 小时前
css 在 hover 子元素时,不要让父元素触发 hover 效果
前端·javascript·css