uni-app 热更新 plus.runtime.install后打开页面样式错乱

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

uni-app 热更新 plus.runtime.install后打开页面样式错乱

操作步骤：

  • 按我上方说的步骤复现

预期结果：

  • 按我上方说的步骤复现

实际结果：

  • 按我上方说的步骤复现

bug描述：

今天使用了热更新后，完全颠覆了我的认知，直接导致我后面不敢使用热更新。请相关技术人员排查问题。

现在比如App使用版本1.0.0（app热更新代码见附件），先打了热更新包1.0.1.wgt
我使用plus.runtime.install安装的wgt包，安装成功后不调用restart，下次重启App生效是符合我的需求的。

问题：假设在App1.0.0有个页面叫 pages/detail/detail，打的1.0.1.wgt热更新包对 pages/detail/detail 页面UI做了修改（比如加了按钮或者搜索框）。修改完成后发布wgt热更新包，plus.runtime.install的success回调了，没有调用restart。

重点来了，重点来了，重点来了，重点来了，重点来了
热更新成功后，用户不重启App，直接打开detail页面，UI全乱了。但是能看到一些文案，这个文案却是1.0.1wgt包里才加的。用户重启App后，是最新的1.0.1，是正常的，没有任何问题。

我的理解：install后不调用restart方法，当前app使用的还是上一次的资源包，不会有热更新包的任何信息，但结果却不是，请相关技术人员排查问题。


Harmonyos Next教程
2 回复

HBuilder X 版本 4.36


在处理uni-app热更新（HBU, Hot Bundle Update）后页面样式错乱的问题时，通常这是由于新旧资源缓存冲突、样式文件未正确更新或者资源加载顺序问题导致的。下面提供一个通过代码检查和调整资源加载顺序的示例，来帮助你定位和解决该问题。

步骤一：确保热更新资源正确加载

首先，确保在调用plus.runtime.install进行热更新后，应用正确加载了新的资源。你可以在安装成功后，通过日志输出或调试工具检查是否加载了预期的新版本资源。

plus.runtime.getProperty(plus.runtime.APPID, (info) => {
    const newVersion = 'your_new_version_code'; // 替换为你的新版本号
    if (info.version !== newVersion) {
        plus.downloader.createDownload(yourUpdateUrl, {}, (d, status) => {
            if (status === 200) {
                const wgtPath = '_www/' + d.filename;
                plus.runtime.install(wgtPath, {}, (e) => {
                    if (!e) {
                        console.log('热更新成功，即将重启应用');
                        plus.runtime.restart();
                    } else {
                        console.error('热更新失败：', e.message);
                    }
                });
            } else {
                console.error('下载更新包失败：', status);
            }
        }).start();
    } else {
        console.log('已是最新版本');
    }
});

步骤二：清理缓存

热更新后，尝试清理应用缓存，尤其是样式文件相关的缓存，以避免缓存导致的样式错乱。虽然uni-app本身管理大部分缓存，但在某些情况下手动清理可能有助于解决问题。

// 清理缓存示例（注意：此方法可能需要根据实际项目调整）
function clearCache() {
    const caches = window.caches;
    caches.keys().then((cacheNames) => {
        return Promise.all(
            cacheNames.map((cacheName) => {
                if (cacheName.startsWith('your-cache-prefix')) { // 仅清理特定前缀的缓存
                    return caches.delete(cacheName);
                }
            })
        );
    }).then(() => {
        console.log('缓存清理完成');
    }).catch((error) => {
        console.error('清理缓存失败：', error);
    });
}

步骤三：检查样式文件加载顺序

确保在热更新后，样式文件的加载顺序没有发生变化。有时候，由于资源路径或打包配置的问题，样式文件的加载顺序可能会被打乱，导致样式覆盖问题。

<!-- 确保样式文件按照预期顺序加载 -->
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/theme.css">
<!-- 其他样式文件 -->

通过上述步骤，你应该能够定位并解决uni-app热更新后页面样式错乱的问题。如果问题依旧存在，建议详细检查热更新包的构建配置和资源路径，确保一切符合预期。

回到顶部