微信版本：8.0.47
调试基础库版本：3.3.4
调试的设备：型号：iPhone12 版本：iOS 17.3.1
问题描述：
页面一次性加载List数据（共9条），每条数据带一个公众号链接（链接形式：https://mp.weixin.qq.com/xxx/xxxw），跳转到公众号后再返回小程序，再点击另一条跳转，再返回，会引起白屏问题或渲染问题，但如果数据少一些，如3条，就几乎不会有这个问题。（页面并未在OnShow或onLoad 做任何其他的跳转）
相关问题
微信版本：8.0.47
调试基础库版本：3.3.4
调试的设备：型号：iPhone12 版本：iOS 17.3.1
问题描述：
页面一次性加载List数据（共9条），每条数据带一个公众号链接（链接形式：https://mp.weixin.qq.com/xxx/xxxw），跳转到公众号后再返回小程序，再点击另一条跳转，再返回，会引起白屏问题或渲染问题，但如果数据少一些，如3条，就几乎不会有这个问题。（页面并未在OnShow或onLoad 做任何其他的跳转）
1 个回答
经排查，是列表图片太大引起的渲染问题，我们的终解决方案是【裁剪并压缩图片】，图片是放在ossbrowser上的，示例代码如下：
<view v-for="item in list"><image :src="compressAndCropImage(item.img, 50, 80, 3)" mode="aspectFill"></image> ...</view>
function compressAndCropImage(
url: string, //图片路径
targetWidth?: number, //裁剪后的目标宽度
targetHeight?: number, //裁剪后的目标高度
resizeScale: number = 1 //裁剪比例（宽高的倍数）
): string {
if (url.includes('.gif')) {
return url
}
let ossParams = `?x-oss-process=image/format,webp`
if (targetWidth && targetHeight) {
ossParams += `,image/resize,h_${targetHeight * resizeScale},w_${
targetWidth * resizeScale
},m_fill`
}
const [baseUrl, queryString] = url.split('?')
return queryString ? `${baseUrl}${ossParams}&${queryString}` : `${url}${ossParams}`
}