DCLOUD插件市场——APP版本更新、强制更新、漂亮弹窗、下载进度(wgt更新)
这款插件是我自己一个人完整使用下来的奥,作为一个前端小白,这真的是一件令我开心的事。哈哈。自信心来源于积累。加油,早日成为大神。
第一步:下载插件
下载后解压如下:
下载依赖request.js文件
下载后解压如下:
第二步:导入到app中
放置文件路径为:static/common中,由于公司有规定,所以文件夹命名统一改为小写。
第三步:给后端同事说需要的内容
后台返给我的数据结构:
这个数据结构中有一个是跟检查更新插件有点区别的。
forceUpdate
:true或false,改为了forceUpdate
:1或2;这个需要将所有的forceUpdate
的判断条件:
if(forceUpdate == 1)
或者if(forceUpdate == 2)
;versionCode:inf.versionCode,version:inf.version
插件使用需要注意的地方汇总
插件很好,需要注意的点:
- 插件引用了另一插件(request),需要一并导入:https://ext.dcloud.net.cn/plugin?id=822
- 需要修改插件(appupdate)引用路径 js_sdk/zhouWei_APPUpdate/APPUpdate.js文件里 import $http from ‘@/config/requestConfig.js’; => import $http from ‘@/js_sdk/zhouWei-request/requestConfig.js’;
- App.vue里 import的时候,也需要注意路径
- 服务器返回的数据结构
{ "success": true,
"data": {
"versionCode": "126",
"versionName": "1.2.6",
"versionInfo": "本次更新内容: 1、初始版本a", // 内容以空格换行
"forceUpdate": true,
"downloadUrl": "http://domain.com/package\xxx_1.2.3.apk"
}
}
实际后台返给我的数据格式为:
{
"createTime": "2020-05-27 15:24:09",
"updateTime": "2020-05-27 15:46:53",
"id": "1265544302201802752",
"userId": "1",
"isActive": 1,
"versionCode": 105,
"versionName": "v1.05",
"versionInfo": "1:新增功能a\n2:优化功能b",
"forceUpdate": 1,
"platform": 1,
"updateType": 1,
"startTime": "2020-05-02 00:00:00",
"downloadUrl": "http://localhost:8081/sy",
"incrementDownloadUrl": "http://localhost:8081/s"
}
有两点区别:
5. forceUpdate
强制更新
6. 有两种下载链接,全量下载与增量下载。全量下载是代表有些版本的更新迭代必须要全量更新才可以,而有些版本的更新是部分更新即可,这种叫做增量更新。
后台给的判断依据是:当前的版本号与后台的版本号进行比较,如果版本号差距为1,则优先下载增量下载,如果没有增量下载链接,则使用全量下载链接进行下载。
requestNewVersion(version,platformType).then(res=>{
//如果res有值,则代表是有新版本的,否则提示当前无新版本
if (res) {
//如果当前版本号与后台更新的版本号差距为1并且有增量链接的情况下,选择增量链接下载,否则选择全量更新
if(res.versionCode - version == 1 && res.incrementDownloadUrl){
res.downloadUrl = res.incrementDownloadUrl;
callback && callback(res);
}else{
callback && callback(res);
}
} else {
uni.showToast({
title: "暂无新版本",
icon: "none"
});
}
})
汇总:
注意路径的引入位置;在调用接口的时候,可以改为自己的格式进行调用;注意数据格式是否与以上格式完全一致,如果不一致,需要适当做修改。
最终的显示界面如下: