更新记录
1.0.1(2023-11-17) 下载此版本
修复样式和大小计算错误问题
1.0.0(2023-05-25) 下载此版本
第一个版本,nvue下个版本支持
平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.6.0 app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
仅支持Vue3的app更新升级模块,支持打开安卓、苹果应用市场,强制更新,独立弹窗非强制更新,wgt静默更新,更新交互逻辑参考了boos直聘和京东app
- 使用Vue3+typeScript开发,提示更友好
- 支持独立调用更新弹窗进行更新
- 也支持跳转到内置的更新页面进行更新
- 基于以上特点,可灵活的实现更新交互逻辑,
注意:发送给接口的应用版本号请使用以下两种方式中的任一进行获取,其他方式获取得到的版本号,不是wgt更新后的版本号,就会导致wgt更新完还一直弹出更新。另外,wgt更新后,在手机设置里面查看应用版本号,还是之前的版本号属于正常,通过下面的方式拿到是对的就可以。
<!-- 方式1 -->
let { appWgtVersion } = uni.getSystemInfoSync();
<!-- 方式2 -->
plus.runtime.getProperty(plus.runtime.appid,function(inf){
console.log("当前应用版本:", inf.version);
});
安装步骤
注:本组件开发依赖sass预处理器
- 在插件市场打开本插件页面,在右侧点击使用 HBuilderX 导入插件,选择要导入的项目点击确定
- 在pages.json中添加页面路径。注意:一定不要设置为pages.json中第一项。如果使用HBuilderX 3.5.0+版本会弹出一个合并页面路由的pages.json修改界面。点击确认按钮即可完成插件页面向项目pages.json的注册,无需手动添加)。
- vscode安装步骤类似,需要下载插件压缩包,解压后复制到uni_modules目录,参考步骤2手动复制页面配置到pages.json即可
"pages": [ // ……其他页面配置 { "path": "uni_modules/momo-update/pages/update", "style": { "navigationStyle": "custom", "backgroundColor": "transparent", "disableScroll": true, "app-plus": { "backgroundColorTop": "transparent", "background": "transparent", "scrollIndicator": false, "titleNView": false, "popGesture": "none", "bounce": "none", "animationType": "fade-in", "animationDuration": 200 } } } ]
- vscode安装步骤类似,需要下载插件压缩包,解压后复制到uni_modules目录,参考步骤2手动复制页面配置到pages.json即可
跳转到内置页面更新
常用于在APP的初始化启动页面上进行检查更新逻辑,当然也可以在其他地方使用,比如我的-设置-检查更新。会跳转到新的页面提醒更新,也可搭配独立更新弹窗组件在不同地方使用。
//示例代码,请根据情况调整
import { setUpdateConfig } from "@/uni_modules/momo-update/index"
onLoad(async () => {
let versionRes = await uni.request({
url: "https://www.example.com/request",
});
if (versionRes.respCode === 0) {
const { forceUpdate, remark, updateLink, versionNo } = versionRes.data;
// 判断是否静默更新
if (quiet) {
silenceUpdate(updateLink);
return
} else if (forceUpdate) {
/*
* 强制更新判断是否强制更新, 还可以搭配独立更新弹窗在首页等地方弹出一个非强制性更新弹窗
* 也可以去除此判断,则不是强制更新也跳转
*/
setUpdateConfig({
describe: remark,
updateLink: updateLink,
force: forceUpdate,
versionName: versionNo
});
uni.navigateTo({
url: '/uni_modules/momo-update/pages/update'
});
return
}
}
})
独立调用弹窗更新
常用于进入到首页弹窗提醒更新,我的-设置-检查更新点击触发更新,不会跳转到新的页面上提醒更新
<template>
<view>
...其他内容
<momo-update ref="updateRef"></momo-update>
</view>
</template>
<script setup lang="ts">
import momoUpdate from "@/uni_modules/momo-update/components/momo-update.vue"
const updateRef = ref<InstanceType<typeof momoUpdate> | null>(null)
// 检查更新, 弹出更新窗口
async function checkUpdate() {
let res = await uni.request({
url: "https://www.example.com/request",
});
if (res.respCode === 0) {
const { forceUpdate, remark, updateLink, versionNo } = res.data;
updateRef.value?.update({
describe: remark,
updateLink: updateLink,
force: forceUpdate,
versionName: versionNo,
});
} else {
uni.showToast({
title: '当前已是最新版',
icon: 'none'
})
}
}
</script>
参数说明
interface UpdateConfig {
describe: string; //更新内容
updateLink: string; //更新地址
versionName: string; //版本名称
force?: boolean; //强制更新
maskClickClose?:boolean;//是否点击遮罩层关闭弹窗
downloadingText?: string; //下载中的提示文字
downloadSuccText?: string; //下载成功的提示文字
downloadErrText?: string; //下载失败的提示文字
}
Android跳转到应用市场更新
updateLink设置为应用市场的地址即可,如: market://details?id={这里写你的应用包名}
iOS 跳转到AppStore
updateLink设置为AppStore的地址即可,如: itms-apps://itunes.apple.com/cn/app/hello-uni-app/id1417078253或者https://apps.apple.com/cn/app/id{appid}