uni-app小程序SDK更新wgt包到安卓客户端时,第一次进入小程序页面必出现白屏
uni-app小程序SDK更新wgt包到安卓客户端时,第一次进入小程序页面必出现白屏
操作步骤
请先下载附件,里面有安装包apk
- 先安装app-debug_100.apk
- 打开安装好的应用UnimpDemo,点击‘启动小程序直达二级页面’按钮进入小程序页面(进入小程序页面这步一定要执行)
- 关闭app(一定要退出当前应用,或者直接后台杀死应用进程,否则有的机型无法复现白屏bug),再安装app-debug_101.apk或者app-debug_102.apk(102版本为wgt fix版本)
- 重新打开应用UnimpDemo,点击‘启动小程序直达二级页面’按钮进入小程序页面,直接白屏
- 返回当前白屏页面再重新进入就不会再白屏了
预期结果
更新版本,能够正常进入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
复现步骤:
- 先安装app-debug_100.apk
- 打开安装好的应用UnimpDemo,点击‘启动小程序直达二级页面’按钮进入小程序页面(进入小程序页面这步一定要执行)
- 关闭app(一定要退出当前应用,或者直接后台杀死应用进程,否则有的机型无法复现白屏bug),再安装app-debug_101.apk或者app-debug_102.apk(102版本为wgt fix版本)
- 重新打开应用UnimpDemo,点击‘启动小程序直达二级页面’按钮进入小程序页面,直接白屏
- 返回当前白屏页面再重新进入就不会再白屏了
出现白屏测试机型号
红米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 |
附件
为什么附件无法上传,是有大小限制吗?
我也遇到了,安卓端集成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包到安卓客户端时首次进入小程序页面出现白屏的问题。请根据实际情况调整和测试代码。