更新记录
1.0(2021-04-30)
首次发布
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
App更新窗口 NVue页面 开箱即用
该插件修改自:
下载更新
全局弹窗可覆盖原生导航栏和原生tabbar
感谢以上两位的优秀插件!!
做出来的样式和原版相差无几,只是原版是vue插件的,APP端不能覆盖导航栏和tabbar,主页显示时不太美观,所以有了改成NVue页面的想法。
注意事项:
1:顶部的图片突出效果是已整个图片来的,背景上部分透明,下部分白色,Nvue超出会直接不显示,有更好解决方式的,麻烦告诉我一下,毕竟是图片,P得麻烦。
2:非组件形式的,需要在pages注册
3:弹窗关闭时会触发原页面onShow,因为弹窗本质上是一个nvue页面
文件目录组成:
/common/AppUpdateModel.js //请求接口和判断更新等操作
/pages/appUpdateModel/appUpdateModel.nvue //更新弹窗页面
/static/upgrade.png //更新弹窗页面顶部图片
使用方式:
在 script
中引用组件
import AppUpdateModel from "@/common/AppUpdateModel.js";
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
//预加载更新页面,此方式加载可以让更新页面一直后台,安卓后台下载适用
uni.preloadPage({
url: "/pages/appUpdateModel/appUpdateModel"
});
},
onShow() {
//延迟,防止和其他弹窗冲突,引发页面错误
setTimeout(() => {
this.updateApp();
}, 500);
},
methods: {
getUpdateInfoOnly(){//仅获取更新信息,适用于进入关于我们页面时,获取更新信息显示,但不弹窗
AppUpdateModel.checkUpdate({
forceCheck: true,
checkOnly:true,
success: function(res) {
console.log(res);
}
});
},
forceUp(){ //强制更新,跳过检查间隔,适用于用户主动检查版本更新
AppUpdateModel.checkUpdate({
forceCheck: true
});
},
updateApp() { //检查app更新
if (this.UpdateFail) {
return;
}
console.log("updateApp")
// #ifdef APP-PLUS
this.$nextTick(() => {
AppUpdateModel.checkUpdate({
fail: () => {
console.log(11)
//更新失败时,防止重刷
this.UpdateFail = true;
setTimeout(() => {
this.UpdateFail = false;
}, 5000);
}
});
})
//#endif
},
}
}
pages注册
{ //App更新弹窗
"path": "pages/appUpdateModel/appUpdateModel",
"style": {
"navigationStyle": "custom",
"app-plus": {
"animationType": "fade-in",
"background": "transparent",
"backgroundColor": "rgba(0,0,0,0)",
"popGesture": "none"
}
}
}
checkUpdate方法 属性说明:
属性名 |
类型 |
默认值 |
说明 |
forceCheck |
Boolean |
false |
强制更新,跳过检查间隔,适用于用户主动检查版本更新 |
checkOnly |
Boolean |
false |
仅获取更新信息,适用于进入关于我们页面时,获取更新信息显示,但不弹窗 |
success |
function |
- |
获取更新信息回调 |
fail |
function |
- |
安装失败回调 |
接口参数 说明:
属性名 |
类型 |
默认值 |
说明 |
isForceUpgrade |
Boolean |
false |
是否强制更新,强制更新时,不会显示取消下载按键 |
info |
String |
- |
更新内容,我内部按字符串然后根据;号切割成数组,再排列显示,自己可以改页面 |
version |
String |
- |
显示的更新版本号 |
url |
String |
- |
更新路径 |
如:
{
isForceUpgrade:true ,//是否强制更新,强制更新时,不会显示取消下载按键
info:"1、修复了大量bug11;2、增加新功能,xx体验提升,速度快2;3、增加新功能,xx体验提升3,速度快;4、1增加新功能,xx体验提升,速度快;" ,//升级内容
version: '1.0.1',
url: 'http://www.baidu.com',
}