微信小程序image组件无法携带cookie问题解决

微信小程序image组件无法携带cookie问题解决

问题背景

很多项目中会需要访问服务器获取网络图片，本文将介绍微信小程序是如何加载需要cookie的图片的。

问题分析

很多项目中，图片服务器一般会进行cookie的登录相关校验，客户端上使用比如安卓端使用glide等组件进行远程图片加载都是可以直接传cookie的，而小程序的image图片组件是无法直接传cookie进行图片加载的，因此需要进行特殊处理。
由于小程序登录之后不会像网页端会自动携带cookie，因此在需要使用小程序提供的wx.downloadFile() 方法，将文件下载到本地，然后赋值给image的src属性即可。
相关api介绍，参考官网文档， https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html ，示例代码如下：

wx.downloadFile({
  url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
  success (res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      wx.playVoice({
        filePath: res.tempFilePath
      })
    }
  }
})

问题解决

话不多说，直接上代码。

let flieName = `${new Date().valueOf()}.png`
      wx.downloadFile({
        header: {
          'cookie': wx.getStorageSync("cookie"),
          'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        url: data[i].url,
        filePath:`${wx.env.USER_DATA_PATH}/${flieName}`,
        success(res) {
          console.log('res show')
          console.log(res)
          if (res.statusCode == 200) {
            data[i].picture = res.filePath
          }
        },
        fail(res) {
          console.log(res)
        }
      })

问题总结

本文介绍了微信小程序是如何加载需要cookie的图片的，有兴趣的同学可以进一步深入研究。