uni-app制作app升级包的简单办法

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app制作app升级包的简单办法

检测和更新APP版本

思路

当要检测是否有最新升级包时,APP必须发送当前的版本号到服务器的某个接口用于和最新的APP发行版本进行比较。

假如当前版本是1.1,和最新发行版本1.2比较,比较一下版本的数字大小就知道升级包有新版本,可以进行升级。(为了方便进行大小比较,建议写版本的时候用小数,而不是用1.1.2这种类型,不方便比较大小);

服务器端代码(PHP)

$appinfo = array(
    'appid' => 'HBuilder',
    'version' => '2.0',
    'fileurl' => 'upgrade/H5366115D.wgt' // 这个是相对服务器端网址url下的根目录,升级包文件
);

if(isset($_POST['ver']) && ($_POST['ver'] < $appinfo['version'])){
    $ret = array('code' => 1, 'url' => $appinfo['fileurl']);
} else {
    $ret = array('code' => 0, 'url' => '');
}
echo json_encode($ret);
exit;

APP端检查升级的JS代码

var _config = {url: 'http://www.xxxxx.com/'};
var checkUrl = _config.url + "appgys/upgrade.php";

// 需要传递当前的版本
function checkUpdate(wgtVer) {
    plus.nativeUI.showWaiting("检测更新...");
    mui.ajax(checkUrl, {
        dataType: "json",
        type: 'POST',
        data: {ver: wgtVer},
        success: function(json) {
            plus.nativeUI.closeWaiting();
            if (parseInt(json.code) == 1) {
                // 可以升级
                plus.nativeUI.confirm("检查到当前版本有最新更新,下载升级?",
                    function(event) {
                        if (event.index == 0) {
                            console.log('下载地址:' + _config.url + json.url)
                            downWgt(_config.url + json.url); // 下载更新版的地址
                        }
                    }, '系统消息', ['马上升级', '下次再说']);
            } else {
                plus.nativeUI.toast("无新版本可更新!");
            }
        },
        error: function(xhr, error) {
            plus.nativeUI.closeWaiting();
            plus.nativeUI.toast('检测更新失败!');
        }
    });
}

// 下载wgt文件
function downWgt(wgtUrl) {
    plus.nativeUI.showWaiting("下载更新文件...");
    plus.downloader.createDownload(wgtUrl, {filename: "_doc/update/"}, function(d, status) {
        if (status == 200) {
            //console.log("下载wgt成功:" + d.filename);
            installWgt(d.filename); // 安装wgt包
        } else {
            //console.log("下载wgt失败!");
            plus.nativeUI.alert("下载更新失败!");
        }
        plus.nativeUI.closeWaiting();
    }).start();
}

// 更新应用资源
function installWgt(path) {
    plus.nativeUI.showWaiting("安装更新文件...");
    plus.runtime.install(path, {}, function() {
        plus.nativeUI.closeWaiting();
        plus.nativeUI.alert("应用资源更新完成!", function() {
            plus.runtime.restart();
        });
    }, function(e) {
        plus.nativeUI.closeWaiting();
        plus.nativeUI.alert("安装更新文件失败[" + e.code + "]:" + e.message);
    });
}

8 回复

接下来 是 用户主动进行升级的时候: 需要做一个按钮让用户点击,然后开始升级代码:

<script type="text/javascript"> //在页面中初始化plus插件 mui.init(); mui.plusReady(function(){ plus.runtime.getProperty(plus.runtime.appid,function(inf){ document.getElementById("version_id").innerHTML = inf.version; }); }); //检测升级 function upgrade_app_wgt(){ plus.runtime.getProperty(plus.runtime.appid,function(inf){ checkUpdate( inf.version); console.log(inf.version) //sessionStorage.setItem('upgrade','1'); }); } </script>

接着,放一个按钮,让用户一点运行检查升级

<button onclick="upgrade_app_wgt()">当前版本</button>


另外是 app自动检查到有最新升级包,然后提示用户安装升级包:
//检查更新
if(sessionStorage.getItem(‘upgrade’) !=‘1’){
plus.runtime.getProperty(plus.runtime.appid,function(inf){
checkUpdate( inf.version);
sessionStorage.setItem(‘upgrade’,‘1’);
});
} 这里利用app 的sessionStorage来保存是否有检测过更新, 这样就每次在用户打开app 的时候,app主动去检查是否有更新。

有没有做好的升级程序直接下载来用的啊?谢谢

你好,我的一直提示无法降级安装,怎么回事,手机版本1.0,服务端版本是1.1

最近在学习制作app,刚好到了升级这块。学习了

在uni-app中制作APP升级包,通常涉及版本管理和下载更新逻辑。以下是一个简单的实现思路及代码示例,用于指导你如何在uni-app中实现APP升级功能。

1. 版本管理

首先,你需要在服务器端维护一个version.json文件,用于记录当前最新版本信息。这个文件可能包含如下内容:

{
  "versionCode": 3,
  "versionName": "1.0.3",
  "updateUrl": "https://example.com/update/yourapp_v1.0.3.apk",
  "releaseNotes": "修复了一些已知问题,优化了用户体验。"
}

2. 客户端检查更新

在APP启动时,客户端需要请求这个version.json文件,并与当前APP的版本进行比较。以下是一个简单的实现示例:

// 在main.js或App.vue的onLaunch生命周期中调用检查更新函数
onLaunch() {
  this.checkAppUpdate();
},

methods: {
  async checkAppUpdate() {
    try {
      const response = await uni.request({
        url: 'https://example.com/version.json',
        method: 'GET'
      });
      
      const serverVersion = response.data.versionCode;
      const localVersion = uni.getSystemInfoSync().versionCode; // 获取本地版本码,需要在manifest.json中配置
      
      if (serverVersion > localVersion) {
        uni.showModal({
          title: '软件更新',
          content: `发现新版本${response.data.versionName},是否立即更新?`,
          success: (res) => {
            if (res.confirm) {
              this.downloadAndUpdate(response.data.updateUrl);
            }
          }
        });
      }
    } catch (error) {
      console.error('检查更新失败', error);
    }
  },

  downloadAndUpdate(url) {
    uni.downloadFile({
      url: url,
      success: (res) => {
        if (res.statusCode === 200) {
          uni.saveFile({
            tempFilePath: res.tempFilePath,
            success: () => {
              // 对于Android平台,可以使用plus.runtime.install进行安装
              // 对于iOS平台,需要引导用户到App Store更新
              #ifdef APP-PLUS
                plus.runtime.install(res.savedFilePath, {}, (e) => {
                  if (e.code === 0) {
                    uni.showToast({
                      title: '更新成功',
                      icon: 'success'
                    });
                  } else {
                    uni.showToast({
                      title: '更新失败',
                      icon: 'none'
                    });
                  }
                });
              #else
                uni.showModal({
                  title: '更新提示',
                  content: '请在App Store中更新您的应用。',
                  showCancel: false
                });
              #endif
            },
            fail: () => {
              uni.showToast({
                title: '保存文件失败',
                icon: 'none'
              });
            }
          });
        } else {
          uni.showToast({
            title: '下载更新包失败',
            icon: 'none'
          });
        }
      },
      fail: () => {
        uni.showToast({
          title: '下载更新包失败',
          icon: 'none'
        });
      }
    });
  }
}

注意事项

  • 上述代码示例主要适用于Android平台,iOS平台需要引导用户到App Store进行更新。
  • 在实际应用中,应添加更多的错误处理和用户交互逻辑,以提升用户体验。
  • 确保服务器上的version.json和APK文件是安全可访问的,避免被篡改。

通过上述步骤,你可以在uni-app中实现一个简单的APP升级功能。

回到顶部