公告列表
公告列表
收藏
回答

跳转到公众号文章后返回小程序，出现白屏问题或渲染问题？

微信版本：8.0.47

调试基础库版本：3.3.4

调试的设备：型号：iPhone12 版本：iOS 17.3.1

问题描述：

页面一次性加载List数据（共9条），每条数据带一个公众号链接（链接形式：https://mp.weixin.qq.com/xxx/xxxw），跳转到公众号后再返回小程序，再点击另一条跳转，再返回，会引起白屏问题或渲染问题，但如果数据少一些，如3条，就几乎不会有这个问题。（页面并未在OnShow或onLoad 做任何其他的跳转）


回答关注问题邀请回答
收藏

1 个回答

  • 下一秒
    下一秒
    03-20

    经排查，是列表图片太大引起的渲染问题，我们的终解决方案是【裁剪并压缩图片】，图片是放在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}`

    }



    03-20
    有用
    回复
请 登录 后发表内容
相关问题
相关文档