小程序
小游戏
企业微信
微信支付
扫描小程序码分享
微信版本: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}`
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
经排查,是列表图片太大引起的渲染问题,我们的终解决方案是【裁剪并压缩图片】,图片是放在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}`
}