超简单uni-app版本自动更新提示

作者要说的话:        

        这个函数在vue2、vue3里面也可以用的,个人还是比较偏爱vue3组合式语法的,简单快捷。

首先检查你的uni-app的vue版本是多少,请对号入座!这个vue3可以用vue2的语法,看你自愿。

打卡项目目录找到App.vue文件,并里面加入:

这两个代码块二选一即可!!根据自己的vue版本需求

这两个代码块二选一即可!!根据自己的vue版本需求

这两个代码块二选一即可!!根据自己的vue版本需求

这个是Vue3语法:

<script setup>
import { onLaunch } from '@dcloudio/uni-app';
/** 检查版本更新 */
const checkForUpdate = () => {
  const updateManager = uni.getUpdateManager();
  updateManager.onCheckForUpdate((res) => {
    if (res.hasUpdate) {
      updateManager.onUpdateReady(() => {
        uni.showModal({
          title: '更新提示',
          content: '新版本已经准备好,是否重启应用?',
          success: (res) => {
            if (res.confirm) {
              updateManager.applyUpdate();
            }
          }
        })
      })
    }
    updateManager.onUpdateFailed(() => {
      uni.showModal({
        title: '更新失败',
        content: '新版本下载失败,请检查网络',
        showCancel: false
      })
    })
  })
}

onLaunch(() => {
  checkForUpdate();
})
</script>

这两个代码块二选一即可!!根据自己的vue版本需求

这两个代码块二选一即可!!根据自己的vue版本需求

这两个代码块二选一即可!!根据自己的vue版本需求

这个是Vue2语法

<script>
export default {
  onLaunch() {
    this.checkForUpdate();
  },
  methods: {
    checkForUpdate() {
      const updateManager = uni.getUpdateManager();
      updateManager.onCheckForUpdate((res) => {
        if (res.hasUpdate) {
          updateManager.onUpdateReady(() => {
            uni.showModal({
              title: '更新提示',
              content: '新版本已经准备好,是否重启应用?',
              success: (res) => {
                if (res.confirm) {
                  updateManager.applyUpdate();
                }
              }
            });
          });
        }
      });

      updateManager.onUpdateFailed(() => {
        uni.showModal({
          title: '更新失败',
          content: '新版本下载失败,请检查网络',
          showCancel: false
        });
      });
    }
  }
};
</script>

做完后在小程序里面记得打卡模拟更新:

这个时候稍微等一下,因为uni编译比较慢:

当出现这一个弹窗的时候,恭喜你!你已经成功了!

如果一直没有效果的话,请在函数里面打印res,实在不行,你来找我。

### 实现 Uni-AppApp 版本更新的功能 在 Uni-App 开发中,实现应用版本自动检测和更新是一项常见的需求。以下是关于如何通过网络请求获取最新版本信息并提示用户下载新版本的具体方法。 #### 方法概述 为了实现版本更新功能,通常需要以下几个核心模块的支持: 1. **服务器端提供最新的版本号及相关资源链接**:可以通过 JSON 文件或其他 API 接口返回当前的最新版本号以及 APK 或 IPA 的下载地址。 2. **客户端发起网络请求**:利用 `uni.request` 获取服务端提供的版本数据,并将其与本地存储中的版本号进行比较[^1]。 3. **弹窗提醒用户升级**:如果发现远程版本高于当前安装的应用版本,则可以调用 `uni.showModal` 提醒用户是否立即更新。 4. **引导至外部浏览器或者内置 WebView 打开下载页**:当用户确认更新时,可通过 `plus.runtime.openURL()` (仅限于 HBuilderX 编译后的原生 APP)[^1] 来启动默认浏览器加载指定 URL 地址完成文件下载操作;如果是微信小程序环境则无法直接触发此行为需告知其他途径比如扫码等方式访问官方站点手动执行该动作过程。 #### 示例代码展示 下面给出一段基于上述逻辑编写的简单示例: ```javascript // 调用函数检查是否有新的可用更新 function checkUpdate() { const currentVersion = plus.nfc.version; // 当前运行程序版本uni.request({ url: 'https://example.com/api/getLatestVersion', method:'GET', success(res){ let latestVerion=res.data.latest_version; if(compareVersions(currentVersion ,latestVerion)<0){ // 如果存在更高版本 uni.showModal({title:"发现新版本",content:`目前有${latestVerion}的新版可供使用`,success(modalRes)=>{ if(modalRes.confirm){ plus.runtime.openURL('http://yourdomain/download.apk'); // 自动打开网页让其自行处理后续事情 } }) }else{ console.log("已经是最新版本"); } }, fail(err){ console.error("失败:",err); } }); } // 辅助工具类用于字符串形式对比两个软件版本大小关系 返回值含义同 JavaScript 原生 String.prototype.localeCompare() function compareVersions(vA,vB){ var a=vA.split('.'); var b=vB.split('.'); while(a.length<b.length)a.push(0);while(b.length<a.length)b.push(0); for(var i=parseInt(0,10),len=a.length;i<len;++i){ var numA=parseInt(a[i],10)||0,numB=parseInt(b[i],10)||0; if(numA<numB)return -1;if(numA>numB)return 1; } return 0; } ``` 以上脚本片段展示了基本的工作原理[^2]。需要注意的是实际项目里可能还会涉及到更多细节考量例如错误捕获机制、兼容性测试等问题都需要额外关注解决。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值