更新记录
1.0(2021-04-30) 下载此版本
首次发布
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
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',
}