uniapp小程序之生成二维码海报踩坑之缓存

$\color{#4285f4}{业务场景：}$ 小程序画海报，先根据url生成base64位的二唯码，然后在使用# writeFile方法写入，生成一张本地图片，才可以继续在canvas继续画图，然后把海报生成，下载下来，而且一个页面是根据不同的tab生成不同的海报。

$\color{#ea4335}{问题来了}$ 每次生成的海报都是第一张图，切换tab生成不同的海报时，下载下来的都是第一张，因为使用wirteFile方法画图的api封装好的，而且网上也有在找这个问题的

检查代码，确定每次画图的url都不一样，然后既然是缓存问题就好办了，直接给加上一个时间搓就完事了

base64src(qrcodeSrc, (res) => {
    this.targetQrCode = `${res}?=${new Date().getTime()}`
    // targeetQrCode = http://usr/tmp_base64src9477.gif?v=1667464318733
})

在次在工具上tab切换来去，保存都无问题，然后发布上去提测。

然后真机上一看，二唯码空白的，又出现一个开发工具正常显示，真机空白的问题了，打开调度模式一看发现真机上面的地址和工具上的地址不一样

• 工具上："http://usr/tmp_base64src9477.gif?v=1667464318733"
• 真机上："wxfile://usr/tmp_base64src.gif?v=1667441560641"

空白原因 仅仅只是因为加了一个时间搓，就导致真机空白，找不到图片。。。真的是$\color{#4285f4}{七}\color{#ea4335}{彩}\color{#fbbc05}{斑}\color{#4285f4}{斓}\color{#34a853}{的}\color{#ea4335}{坑}$

因为缓存原因加上的时间搓只能删掉了，但又回到了第一个问题，就是fs.writeFile 写入的图片，它不会替换，就写十张不一样的base64图片进去，他返回的地址给到的都是第一张图片

解决方案

既然fx.writeFile返回的图片都是第一张图片，又不能加时间搓，那么我只能让他每次的地址不一样了，最后给图片路径加上时间搓

const fsm = uni.getFileSystemManager()

function base64src(base64data, cb) {
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []
    // 取时间搓的后四位
    const random = Math.random().toString().slice(-4)
    const FILE_BASE_NAME = 'tmp_base64src'+ random
    if (!format) {
        return (new Error('ERROR_BASE64SRC_PARSE'))
    }
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`
    const buffer = uni.base64ToArrayBuffer(bodyData)
    fsm.writeFile({
        filePath,
        data: buffer,
        encoding: 'binary',
        success() {
            cb(filePath)
        },
        fail() {
            return (new Error('ERROR_BASE64SRC_WRITE'))
        }
    })
}

问题解决，一个图片缓存问题，一波三折，值得分享一下。