uniapp 实现热更新

有的时候博客内容会有变动，首发博客是最新的，其他博客地址可能会未同步, 认准 https://blog.zysicyj.top

可点击链接 https://blog-1253652709.cos.ap-guangzhou.myqcloud.com//picgo/202401180921373.png 解答疑问

插件地址：https://ext.dcloud.net.cn/plugin?id=7286#detail

离线下载地址：https://blog-1253652709.cos.ap-guangzhou.myqcloud.com/file/rt-uni-update_1.5.2.zip

安装

在插件市场打开本插件页面，在右侧点击使用 HBuilderX 导入插件，选择要导入的项目点击确定（建议使用 uni_modules 版本
非 uni_modules 版本不在维护，有需要自行修改）

在 pages.json 中添加页面路径。注意：一定不要设置为 pages.json 中第一项（在 1.1.9 版本新增弹出一个合并页面路由的 pages.json 修改界面。点击确认按钮即可完成插件页面向项目 pages.json 的注册。HBuilderX
3.5.0+ 支持，无需手动添加）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "path": "uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update",
  "style": {
    "app-plus": {
      "animationDuration": 200,
      "animationType": "fade-in",
      "background": "transparent",
      "backgroundColorTop": "transparent",
      "popGesture": "none",
      "scrollIndicator": false,
      "titleNView": false
    },
    "disableScroll": true
  }
}

查看显示效果 (注意：这里只是查看显示效果，具体代码需要按照下面的项目使用说明编写)

// App.vue 的 onShow 中查看效果 如果无法跳转 请在 pages.json 中添加页面路径，参照第二步

uni.navigateTo({
url: ‘/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update’
});

版本管理系统

这玩意一般要，没有就自己搭建一个吧。。。只要返回下面的格式就行。。

1
2
3
4
5
6
7
8
9
10
11
12
data:{
// 版本更新内容 支持 <br> 自动换行
describe: '1. 修复已知问题 <br>
2. 优化用户体验 ', 
edition_url: '', //apk、wgt 包下载地址或者应用市场地址  安卓应用市场 market://details?id=xxxx 苹果 store itms-apps://itunes.apple.com/cn/app/xxxxxx
edition_force: 0, // 是否强制更新 0 代表否 1 代表是
package_type: 1, //0 是整包升级（apk 或者 appstore 或者安卓应用市场） 1 是 wgt 升级
edition_issue: 1, // 是否发行  0 否 1 是 为了控制上架应用市场审核时不能弹出热更新框
edition_number: 100, // 版本号 最重要的 manifest 里的版本号 （检查更新主要以服务器返回的 edition_number 版本号是否大于当前 app 的版本号来实现是否更新）
edition_name: '1.0.0', // 版本名称 manifest 里的版本名称
edition_silence: 0, // 是否静默更新 0 代表否 1 代表是
}

注意点

edition_number 传这个参数是为了解决部分用户 app 长期不使用，第一次打开服务器查到的版本是最新的是 wgt 包，但是之前 app 有过整包更新，如果直接更新最新 wgt 的话，会出现以前的整包添加的原生模块或者安卓权限无法使用，所以后端查询版本必须返回大于当前 edition_number 版本的最新的整包 apk 地址或者是应用市场地址，如果没有大于 edition_number 的整包，就返回最新的 wgt 包地址就行。

前端示例代码 或者根据实际业务修改 如果需要自动检测新版本，建议写在 App.vue 的 onShow 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import silenceUpdate from '@/uni_modules/rt-uni-update/js_sdk/silence-update.js' // 引入静默更新

//#ifdef APP-PLUS 

// 获取本地应用资源版本号
        plus.runtime.getProperty(plus.runtime.appid, (inf) => {
            // 获取服务器的版本号
            uni.request({
                url: 'http://127.0.0.1:8088/edition_manage/get_edition', // 示例接口
                data: {
                    edition_type: plus.runtime.appid,
                    version_type: uni.getSystemInfoSync().platform, //android 或者 ios
                    edition_number: inf.versionCode // 打包时 manifest 设置的版本号 
                },
                success: (res) => {
                    //res.data.xxx 根据后台返回的数据决定（我这里后端返回的是 data），所以是 res.data.data 
                    // 判断后台返回版本号是否大于当前应用版本号 && 是否发行 （上架应用市场时一定不能弹出更新提示）
                    if (Number(res.data.data.edition_number) > Number(inf.versionCode) && res
                        .data.data.edition_issue == 1) {

                        // 如果是 wgt 升级，并且是静默更新 （注意！！！ 如果是手动检查新版本，就不用判断静默更新，请直接跳转更新页，不然点击检查新版本后会没反应）
                        if (res.data.data.package_type == 1 && res.data.data.edition_silence == 1) {

                            // 调用静默更新方法 传入下载地址
                            silenceUpdate(res.data.data.edition_url)

                        } else {
                            // 跳转更新页面 （注意！！！如果 pages.json 第一页的代码里有一打开就跳转其他页面的操作，下面这行代码最好写在 setTimeout 里面设置延时 3 到 5 秒再执行）
                            uni.navigateTo({
                                url: '/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=' +
                                    JSON.stringify(res.data.data)
                            });
                        }
                    } else {

                        // 如果是手动检查新版本 需开启以下注释
                        /* uni.showModal({
                            title: ' 提示 ',
                            content: ' 已是最新版本 ',
                            showCancel: false
                        }) */
                    }
                }

            })

        });

        //#endif

常见问题汇总

热更新制作 wgt 包的方法：1、修改 manifest.json 版本名称和版本号，必须大于当前版本。2、点击菜单的发行——原生 App- 制作应用 wgt 包

app 上传地址：个人建议开通 unicloud 的阿里云按量付费，方便、便宜，apk 或者 wgt 包直接上传到云存储就行。

1、调试请打包自定义基座测试，否则 uni.getSystemInfoSync().platform 获取到的可能不是 android 或者 ios，会导致无法跳转更新页

2、进度条不显示，但可以正常安装，原因：99% 的情况是因为下载链接为内网链接，内网链接无法监听下载进度，请更换为外网链接

3、进度条显示，下载 apk 完成后，安卓不会自动弹出安装页面，原因：可能是离线打包未添加安卓安装权限，请添加以下权限或者使用云打包

1
2
3

<uses-permission android:name="android.permission.INSTALL_PACKAGES"/>
<uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES"/>

4、在 app.vue 中无法跳转到更新页，原因：第一、在 pages.json 中忘记注册页面，第二、如果已经注册过页面，一般在 app.vue 或者首页中会有默认跳转，所以影响到了跳转更新页，解决办法：修改跳转逻辑或者在跳转更新页时加 setTimeout，延时几秒在跳转
5、app 内下载 apk 时会跳转外部下载，原因：安卓 apk 下载链接必须为.apk 结尾，如果不是.apk 结尾，就会跳转外部下载（比如应用市场链接）。
6、热更新时 wgt 包可以下载，但是无法安装，控制台提示 wgt/wgtu 文件格式错误。解决方法：下载地址必须为 http:
<//xxxxxx.wgt> 的格式，就是链接必须以.wgt 结尾。2、如果地址是http://xxxxxx.wgt 格式，请在浏览器打开这个下载地址，如果无法自动下载，一般可能都是后端下载权限的问题导致的
7、整包更新 / 热更新成功后，还是一直弹更新弹窗，原因是，打 wgt 包时未修改 manifest.json 的版本号，请修改版本号后上传服务器后重试。
8、苹果支持 appstore 链接和 wgt 更新，不支持整包 ipa 更新。
9、wgt 更新，进度条 100%，苹果无法安装，原因：1、wgt 包名不要设置为中文，2、增加原生模块必须上传 appstore，不能热更新
10、不能热更新的有：1、如果原项目没有 nvue 页面，新增 nvue 后也必须整包更新，2、增加推送、第三方登录、地图、视频播放、支付等模块，或者其他安卓权限。3、修改启动图或者 app 图标
11、更新弹窗后面的页面一半儿白屏，官方的 bug
12、跳转更新页后无法获取参数，可能是使用了 uni-simple-router 等第三方路由插件，解决办法：通过 eventChannel.$emit 等方式传参，在插件里接收赋值