uni-app wgt 热更新后 某些机型出现 图片显示不出来

uni-app wgt 热更新后 某些机型出现 图片显示不出来

开发环境 版本号 项目创建方式
Windows Windows 11 家庭中文版 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Windows

HBuilderX类型:正式

HBuilderX版本号:3.99

手机系统:Android

手机系统版本号:Android 15

手机厂商:华为

手机机型:nova13

页面类型:vue

vue版本:vue2

打包方式:云端

示例代码:

<template>
  <view>
    <text>index.vue</text>
  </view>
</template>

<script>
export default {
  onShow() {
    checkUpdate();
    if (uni.getStorageSync("downloadFilePath")) {
      uni.setStorageSync('IsDownload', false);
      plus.runtime.install(
        uni.getStorageSync("downloadFilePath"),
        {
          force: false,
        },
        (result) => {
          console.error('install success', JSON.stringify(result));
          uni.setStorageSync('isInstall', false);
          uni.setStorageSync('IsDownload', true);
          uni.setStorageSync('downloadFilePath', '');
          // #ifdef APP-PLUS
          plus.runtime.restart();
          // #endif
        },
        (result) => {
          uni.setStorageSync('isInstall', false);
          uni.setStorageSync('downloadFilePath', '');
        }
      );
    } else {
      uni.setStorageSync('IsDownload', true);
    }
  },
};
</script>

<style>
/* 样式代码 */
</style>
/*
 * check-update的内容
 */
import toast from '@/utils/function/toast';
import callCheckVersion from './call-check-version';

const isDebug = false;
const PACKAGE_INFO_KEY = '__package_info__';
let downLoadPath = '';
let downLoadTask = null;

export default function () {
  return new Promise((resolve, reject) => {
    callCheckVersion().then(async (e) => {
      if (!e.result) return;
      const {
        code,
        message,
        is_silently, // 是否静默更新
        url, // 安装包下载地址
        platform, // 安装包平台
        type, // 安装包类型
      } = e.result;

      if (code > 0) {
        const { fileList } = await uniCloud.getTempFileURL({
          fileList: [url],
        });
        if (fileList[0].tempFileURL) e.result.url = fileList[0].tempFileURL;
        resolve(e);

        uni.getNetworkType({
          success: (res) => {
            let netWork =
              isDebug ? (res.networkType == "4g" || res.networkType == "5g" || res.networkType == 'wifi') :
              (res.networkType == "4g" || res.networkType == "5g");
            if (netWork) {
              if (is_silently && uni.getStorageSync("IsDownload")) {
                downLoadTask = uni.downloadFile({
                  url: e.result.url,
                  success: (res) => {
                    console.log(res, 'IsDownload');
                    if (res.statusCode == 200) {
                      uni.setStorageSync('IsDownload', false);
                      uni.setStorageSync('downloadFilePath', res.tempFilePath);
                      uni.setStorageSync('isInstall', true);
                    }
                  },
                  fail: (err) => {
                    uni.setStorageSync('IsDownload', true);
                    console.log(err, 3000);
                  },
                });
                downLoadTask.onProgressUpdate((res) => {
                  console.log(res, 'onProgressUpdate');
                });
                return;
              }
            } else {
              downLoadTask.abort();
              downLoadTask = null;
              uni.setStorageSync('IsDownload', true);
            }
          },
          fail: (res) => {
            downLoadTask.abort();
            downLoadTask = null;
            uni.setStorageSync('IsDownload', true);
          },
        });

        if (is_silently && uni.getStorageSync("IsDownload")) {
          downLoadTask = uni.downloadFile({
            url: e.result.url,
            success: (res) => {
              console.log(res, 'IsDownload');
              if (res.statusCode == 200) {
                uni.setStorageSync('IsDownload', false);
                uni.setStorageSync('downloadFilePath', res.tempFilePath);
                uni.setStorageSync('isInstall', true);
              }
            },
            fail: (err) => {
              uni.setStorageSync('IsDownload', true);
              console.log(err, 3000);
            },
          });
          downLoadTask.onProgressUpdate((res) => {
            console.log(res, 'onProgressUpdate');
          });
        }

        if (is_silently && uni.getStorageSync("IsDownload")) {
          downLoadTask = uni.downloadFile({
            url: e.result.url,
            success: (res) => {
              console.log(res, 'IsDownload');
              if (res.statusCode == 200) {
                uni.setStorageSync('IsDownload', false);
                uni.setStorageSync('downloadFilePath', res.tempFilePath);
                uni.setStorageSync('isInstall', true);
              }
            },
            fail: (err) => {
              uni.setStorageSync('IsDownload', true);
              console.log(err, 3000);
            },
          });
          downLoadTask.onProgressUpdate((res) => {
            console.log(res, 'onProgressUpdate');
          });
        }
      } else if (code < 0) {
        console.error(message);
        reject(e);
      }
      resolve(e);
    }).catch((err) => {
      console.error(err);
      reject(err);
    });
  });
}
</script>

操作步骤:

wgt上传更新 然后低版本更新 更新后 图片不展示

预期结果:

展示正常

实际结果:

展示不正常

bug描述:

wgt热更新后 某些机型出现 首页图标svg展示不出来


更多关于uni-app wgt 热更新后 某些机型出现 图片显示不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app wgt 热更新后 某些机型出现 图片显示不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的wgt热更新后资源加载问题,可能由以下几个原因导致:

  1. 资源路径问题:热更新后图片路径可能发生了变化,但代码中仍使用旧路径。建议检查图片引用方式是否为相对路径。

  2. 缓存问题:某些Android机型会缓存旧资源。可以在图片URL后添加时间戳参数强制刷新:

<image :src="imageUrl + '?t=' + Date.now()"></image>
  1. 权限问题:热更新后需要确保应用有存储权限访问更新后的资源文件。

  2. 文件完整性:检查wgt包是否完整,特别是svg文件是否被正确打包。

  3. 加载时机问题:在onShow中立即执行热更新可能导致资源未完全加载。建议:

onLoad() {
    setTimeout(() => {
        checkUpdate();
    }, 500);
}
回到顶部