uni-app 热更新 plus.runtime.install 后 修改过的界面样式错乱

uni-app 热更新 plus.runtime.install 后 修改过的界面样式错乱

测试过的手机：

iphonex、mix2、红米9、华为、oppo、vivo等所有手机都一样

示例代码：

uni.downloadFile({
url: upData.url,
success: res1 => {
console.log('======App Launch======upgrade======download success', res1);
if (res1.statusCode === 200) {
//静默安装 https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.install
plus.runtime.install(
res1.tempFilePath,
{
force: false //true表示强制安装，不校验版本号；false则需要校验版本号是否高于现有应用的版本号
},
res2 => {
console.log('======App Launch======upgrade======install success', res2);
//不直接重启，而是等下次启动的时候生效
// plus.runtime.restart();
},
(err) => {
console.error('======App Launch======upgrade======install fail', err);
//  uni.showToast({
//      icon: 'none',
//      title: '安装失败' + JSON.stringify(err)
//  })
}
);
}
}
});

操作步骤：

用户打开app静默下载wgt，然后install，不执行plus.runtime.restart(); 此时进入app后如果有修改过样式的页面就会出现错乱； 重启之后会变成新的样式，页面展示正常。

预期结果：

没执行plus.runtime.restart()则正常展示原来的样式

实际结果：

页面样式错乱

bug描述：

静默热更新方式 wgt 下载完成执行 plus.runtime.install 后,修改过样式的页面会发生错乱，重启后样式恢复正常！

信息类别 信息内容
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 11.6
HBuilderX类型 正式
HBuilderX版本号 3.2.3
手机系统 全部
手机厂商 华为
页面类型 vue
打包方式 离线
项目创建方式 HBuilderX

更多关于uni-app 热更新 plus.runtime.install 后 修改过的界面样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

安装完毕后需要执行plus.runtime.restart()才可以

更多关于uni-app 热更新 plus.runtime.install 后 修改过的界面样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好 我plus.runtime.install的时候报错{ “code”: 10, “message”: “error in opening zip file” } 这是为什么呢

你提醒我了 确实是界面修改后会出现这个问题

这个问题解决了吗

可以解决吗

请问如果是修改逻辑代码会出现不能使用的问题吗

我有一个想法，下载完不立即安装，在app.vue的onExit里面去执行安装，app退出的时候安装，下次打开就会是新的，也不会影响正在运行的页面，还没试，只是目前的一个设想，下午我会试试，有结果了我会发帖

这是一个典型的资源缓存问题。当使用 plus.runtime.install 安装 wgt 包后，系统会更新应用资源，但当前运行的应用实例可能仍在引用旧的缓存样式文件。

原因分析：

  1. 资源引用未刷新：安装 wgt 后，新的样式文件已写入应用目录，但应用运行时仍加载了之前缓存在内存或临时存储中的旧样式资源。
  2. CSS 缓存机制：WebView 对 CSS 文件有较强的缓存策略，即使文件已更新，仍可能使用旧版本。
  3. 非重启状态：由于没有执行 plus.runtime.restart()，应用进程未完全重启，导致新旧资源混合使用。

解决方案：

  1. 强制刷新当前页面（推荐）： 在 install 成功后，对当前所有页面执行强制重载：

    const pages = getCurrentPages()
pages.forEach(page => {
    if (page.$vm && page.$vm.$forceUpdate) {
        page.$vm.$forceUpdate()
    }
})

  2. 清理 WebView 缓存： 在 install 后执行：

    plus.webview.all().forEach(webview => {
    webview.reload(true) // true 表示强制忽略缓存
})

  3. 添加版本戳防止缓存： 在开发阶段，为 CSS 文件链接添加版本参数：

    <style src="index.css?v=20230401"></style>
回到顶部