商品详情分享图扫码后与分享内容不一致的bug

测试uniapp开发的微信小程序时,突然发现一个bug

流程:进入商品详情-生成商品海报分享-扫海报进入

扫第一个海报,内容与海报一致.

扫第2,3,4,5个分享图进去,内容都是第一个海报的

当时排查了很久

考虑是否参数覆盖的问题

是否后端返回base64的问题

是否生成海报时的问题

是后端返回前端转微信图片时的问题

排查到最后发现,将后端的base64转微信本地图片时,因为文件名相同

ios会直接覆盖,安卓或者鸿蒙手机会复用之前的,导致分享图2,3,4,5个扫码后显示的是1的内容.

下面是生成微信本地图片的代码:

const fsm = wx.getFileSystemManager ? wx.getFileSystemManager() : null;
const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名

export function base64src(base64data, cb) {
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
    if (!format) {
        return (new Error('ERROR_BASE64SRC_PARSE'));
    }
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
    console.log('filePath', filePath)
    const buffer = wx.base64ToArrayBuffer(bodyData);
    fsm.writeFile({
        filePath,
        data: buffer,
        encoding: 'binary',
        success() {
            cb(filePath);
        },
        fail() {
            return (new Error('ERROR_BASE64SRC_WRITE'));
        },
    });
};
//module.exports = base64src;

只要调用这个方法生成的微信本地图片,在安卓上相同名称都会复用第一张图,ios则会覆盖,导致bug,因此修改方案也很简单,将商品的id传入,然后加在filePath上即可