引言

小程序更新时,为了防止小程序由于热启动或者需要在登录时候添加新的缓存,无法获取新的小程序操作等原因,因此需要通过设置,提示用户升级小程序

获取小程序版本是否需要更新以及更新操作

1.App.vue文件中实现获取更新方法

// 在 methods 中实现方法
  autoUpdate() {
    // 更新的功能基础库要1.9.90以上版本才支持,要做低版本的兼容处理
    if (uni.canIUse('getUpdateManager')) {
    // uni.getUpdateManager接口,可以获知是否有新版本的小程序、新版本是否下载好以及应用新版本的能力,会返回一个UpdateManager实例
      const updateManager = uni.getUpdateManager();
	  // 检查小程序是否有新版本发布,onCheckForUpdate:当小程序向后台请求完新版本信息,会通知这个版本告知检查结果
	  updateManager.onCheckForUpdate(res => {
	    // 请求完新版本信息的回调
	    if (res.hasUpdate) {
	    // 检测到新版本,需要更新,给出提示
            showModal({ content: '检测到新版本,是否下载新版本并重启小程序' }).then(res => {
		      if (res.confirm) {
				this.downLoadAndUpdate(updateManager);
			  } else if (res.cancel) {
				showModal({ content: '本次版本更新涉及到新功能的添加,旧版本将无法正常使用', showCancel: false, confirmText: '确认更新' }).then(res => {
				  if (res.confirm) this.downLoadAndUpdate(updateManager);
			    });
			  }
		    });
	     }
	  });
	} else {
	  // 在最新版本客户端上体验小程序
	  showModal({ content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试' });
	}
  }, 

  // 下载小程序最新版本并重启
  downLoadAndUpdate(updateManager) {
    showLoading({ title: '正在下载' });
	// 等待下载更新小程序新版本,onUpdateReady:当新版本下载完成回调
	updateManager.onUpdateReady(() => {
	  uni.hideLoading();
	  // applyUpdate:强制当前小程序应用上新版本并重启
	  updateManager.applyUpdate();
	  // 可在此处添加清除缓存跳转首页操作,由于本人在通过其他判断方式跳转首页,故不再此处跳转
	  // ....
	});
	// 当新版本下载失败回调
    updateManager.onUpdateFailed(() => {
	  uni.hideLoading();
	  // 下载新版本失败
	  showModal({ content: '新版本已经上线了,请删除当前小程序,重新搜索打开' })
	   .then(() => {
	   	  // 点击确定,清空小程序缓存,是小程序情况而定
		  clearPartStorageSync();
		  setTimeout(() => {
		  	// 跳转到首页
		    uni.reLaunch({ url: '/pages/common/homePage/index' });
		  }, 100);
		})
		.catch(() => {
			// 点击取消,同理
		   clearPartStorageSync();
		   setTimeout(() => {
			uni.reLaunch({ url: '/pages/common/homePage/index' });
		   }, 100);
		});
	 });
  }

2.在App.vue的 onShow 里面运行

  // 注意,需要在 onShow 中运行,切勿在其他生命周期中运行,防止小程序热启动导致不生效
  onShow() {
    this.autoUpdate();
  }

3.App.vue中使用到的提示框封装方法

export const showModal = ({ content, showCancel = true, confirmText = '确定' }) => {
	return new Promise((resolve, reject) => {
		uni.showModal({
			title: '提示',
			content: content,
			showCancel,
			confirmText,
			success: (res) => {
				resolve(res)
			},
			fail: (err) => {
				reject(err)
			}
		})
	})
}

export const showLoading = ({ title }) => {
	return uni.showLoading({
		title,
		mask: true
	})
}

此方法也是通过网上资料查找和我项目自身的情况改造的,如有错误,欢迎各位指出

最后,再次强调一遍,不可把获取新小程序的方法放到 onShow 之外的周期里!!!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐