uni-app小程序SDK更新wgt包到安卓客户端时,第一次进入小程序页面必出现白屏

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

uni-app小程序SDK更新wgt包到安卓客户端时,第一次进入小程序页面必出现白屏

操作步骤

请先下载附件,里面有安装包apk

  1. 先安装app-debug_100.apk
  2. 打开安装好的应用UnimpDemo,点击‘启动小程序直达二级页面’按钮进入小程序页面(进入小程序页面这步一定要执行)
  3. 关闭app(一定要退出当前应用,或者直接后台杀死应用进程,否则有的机型无法复现白屏bug),再安装app-debug_101.apk或者app-debug_102.apk(102版本为wgt fix版本)
  4. 重新打开应用UnimpDemo,点击‘启动小程序直达二级页面’按钮进入小程序页面,直接白屏
  5. 返回当前白屏页面再重新进入就不会再白屏了

预期结果

更新版本,能够正常进入uni小程序页面

实际结果

每次更新版本,第一次进入uni小程序页面必出现白屏

bug描述

在我们公司的app上出现的这个bug,为了排除我们app代码的影响,在SDK-Android@3.8.7-20230628里面的demo复现了该bug

UniMPDemo为uni小程序SDK的官方demo
unimp-test是我自己创建的一个很简单的小程序demo,AppID为UNI1EEB354,用来打成wgt包集成到UniMPDemo中

第一次打开UniMPDemo应用,进入unimp-test的小程序页面一切正常
然后修改unimp-test页面的任意显示文字内容,修改manifest.json中的版本号及版本名称,然后生成wgt包再解压,导入到UniMPDemo
重新打开UniMPDemo应用,进入unimp-test的小程序页面必定白屏,且一直停留在白屏,退出小程序再重新进入小程序页面才正常

附件中有UniMPDemo项目的源码及unimp-test项目的源码
也有打包好的app-debug_100.apk、app-debug_101.apk、app-debug_102.apk三个apk包可以直接安装复现该bug

复现步骤:

  1. 先安装app-debug_100.apk
  2. 打开安装好的应用UnimpDemo,点击‘启动小程序直达二级页面’按钮进入小程序页面(进入小程序页面这步一定要执行)
  3. 关闭app(一定要退出当前应用,或者直接后台杀死应用进程,否则有的机型无法复现白屏bug),再安装app-debug_101.apk或者app-debug_102.apk(102版本为wgt fix版本)
  4. 重新打开应用UnimpDemo,点击‘启动小程序直达二级页面’按钮进入小程序页面,直接白屏
  5. 返回当前白屏页面再重新进入就不会再白屏了

出现白屏测试机型号
红米Redmi Note 11T Pro (必现)
红米Redmi K40 (必现)
华为Mate 40E (出现概率高)
红米Redmi Note 8 Pro (偶现)

社区里uni官方回答说用 这个帖子里提到的方案 解决,但是我试了不行,应该不是同一个bug
debug_102.apk就是用该帖子里提到的方案生成的wgt包打的apk包,更新安装后还是会白屏

源码及安装包以及bug演示视频见附件

开发环境信息

项目创建方式 产品分类 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 SDK版本号
uni小程序SDK Android Android 12 小米 红米Redmi Note 11T Pro vue SDK-Android@3.8.7-20230628

14 回复

为什么附件无法上传,是有大小限制吗?

我也遇到了,安卓端集成uni小程序,每次升级小程序,覆盖安装,第一次打开小程序一直白屏

我加你QQ 你发我复现示例吧

解决了吗?我也出现了

解决了吗 第一次打开就是白屏

解决了吗 第一次打开就是白屏

解决了吗?

解决了吗,24年3月8日依然有该问题

解决了吗,24年7月30日依然有该问题

请问解决了吗?我也是这样

在处理uni-app小程序SDK更新wgt包到安卓客户端时首次进入小程序页面出现白屏的问题时,这通常是由于资源加载或缓存处理不当导致的。以下是一些可能的解决方案和相关的代码示例,你可以根据你的项目情况进行调整和测试。

1. 清理缓存

确保在更新wgt包后,客户端能够正确清理旧的缓存资源。可以在应用启动时或在更新完成后添加清理缓存的逻辑。

// 在应用启动时清理缓存
if (process.env.PLATFORM === 'android') {
  plus.io.resolveLocalFileSystemURL('_www/', entry => {
    entry.createReader().readEntries(files => {
      files.forEach(file => {
        if (file.isFile && file.name.endsWith('.wgt')) {
          file.remove();
        }
      });
    });
  });
}

2. 优化wgt包加载逻辑

确保wgt包的加载逻辑正确,并且在加载完成后才进行页面的渲染。

// 监听wgt包下载完成事件
plus.runtime.onInstalled = function (event) {
  if (event.newVersion || event.manifest) {
    // 清理旧的缓存,如果有必要
    // 然后加载新的wgt包
    plus.webview.create('local://your-new-wgt-package/index.html', '_blank', {
      top: '0px',
      bottom: '0px'
    }, wv => {
      setTimeout(() => {
        plus.webview.currentWebview().close(); // 关闭旧页面
      }, 1000); // 延迟关闭,确保新页面已渲染
    });
  }
};

3. 延迟页面渲染

在wgt包加载完成后,通过延迟页面渲染来避免白屏。

// 在新wgt包的入口文件中
document.addEventListener('plusready', function () {
  setTimeout(() => {
    // 渲染页面内容
    document.body.innerHTML = '<h1>Hello, uni-app!</h1>';
  }, 500); // 延迟渲染,确保资源已加载
});

4. 检查网络状态

确保在更新wgt包时网络状态良好,避免因网络问题导致的资源加载失败。

// 检查网络状态
function checkNetwork() {
  const network = plus.networkinfo.getCurrentType();
  if (network !== plus.networkinfo.CONNECTION_NONE) {
    // 网络可用,进行wgt包更新
    // ...
  } else {
    // 提示用户检查网络
    plus.ui.toast('网络不可用,请检查网络设置');
  }
}

通过以上方法,你可以尝试解决uni-app小程序SDK更新wgt包到安卓客户端时首次进入小程序页面出现白屏的问题。请根据实际情况调整和测试代码。

回到顶部