小程序二维码生成(海报,宣传图片等)

小程序二维码前端生成(海报形式保存手机相册)

  • 1、几个重要点步骤(爬坑)
    • 1、首先获取到小程序接口权限access_token
    • 2、拿到access_token就可以去拿小程序的二维码
    • 3、绘制海报Canvas
    • 4、保存Canvas图片

1、几个重要点步骤(爬坑)

1、首先获取到小程序接口权限access_token

官方文档地址: https://developers.weixin.qq.com/miniprogram/dev/api/getAccessToken.html

wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token',
      header: { 'content-type': 'application/json' },
      data: {
        grant_type: 'client_credential',
        appid:'小程序ID',//小程序开发者进入后台可以看到
        secret: '小程序秘钥'//小程序开发者进入后台可以看到
      }
    })

返回data 就看到access_token了,access_token时效就2小时,并且重复请求后,上一个会失效!

2、拿到access_token就可以去拿小程序的二维码

官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/getWXACodeUnlimit.html
坑点:
1、请求方式要用post method:‘POST’
2、access_token 要连接 在 接口后面https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=XXXXXXX
3、返回类型格式responseType:'arraybuffer’
4、参数path 必须为正式版发布了小程序存在的页面
5、参数scene即二维码进入小程序页面场景的参数
如果涉及到1个参数还好,该咋咋地,如2个以上,习惯用&拼接的话 可能在开发调试阶段就会出错了(场景模拟入口参数如scene=id%3D1%26activeid%3D1), decodeURIComponent(option.scene)解码

进入页面获取到scene,转码(二维码进入),我是用,隔开参数

	  let scene = decodeURIComponent(option.scene)
      let itemId = scene.split(',')[0]
      let activeId = scene.split(',')[1]

6、请求成功后获取到的是二进制的数据,需要将其转化成64位

let base64 = wx.arrayBufferToBase64(res.data)

7、转换为64位图片后还不是完整的二维码,需要添加一下字符串

let codeImg= 'data:image/PNG;base64,' + base64

贴下完整代码:

		wx.request({
          // 调用接口C
          url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=XXXXXX',
          method: 'POST',
          responseType: 'arraybuffer',
          data: {
            "page": '正式版已发布的页面路由pages/index/index',
            "width": 430,
            'scene': that.data.id + ','  + that.data.activityId
          },
          success(res) {
            console.log(res)
            let base64 = wx.arrayBufferToBase64(res.data)
            that.setData({
              codeImg: 'data:image/PNG;base64,' + base64
            })
           
          },
          fail(err){
            console.log(err)
          }
        })

3、绘制海报Canvas

看到这里已经成功了一半,获取到二维码是64位格式图片
但是!小程序正式版真机 Canvas.drawImage 不支持64位格式,只支持http那种网络格式图片
所以要么前端有办法将64位变化成HTTP格式图片(我失败了),要么就交给后端,重复以上操作返回网络图片给前端。
绘制网络图片二维码代码

	let that = this;
    const ctx = wx.createCanvasContext('poster', this)
    ctx.drawImage('/images/poster3.png', 0, 0, 300, 456)
    ctx.beginPath()
    ctx.setFillStyle('#212c67')
    ctx.setFontSize(22)
    ctx.fillText(that.data.itemInfo.Name, 104, 160)
     //坑点  wx.getImageInfo 是个请求会有延时,如果在外边写ctx.draw(),可能就会绘制不出来一些图片文字形状
    wx.getImageInfo({
      src: img,
      success(res) {
        console.log(img)
        ctx.drawImage(res.path, 80, 240, 140, 140)
        // //画个圆
        ctx.arc(150, 80, 54, 0, 2 * Math.PI)
        ctx.clip()
        wx.getImageInfo({
          src: that.data.itemInfo.ImgPH,
          success(res) {
            console.log(that.data.itemInfo.ImgPH)
            ctx.drawImage(res.path, 100, 28, 100, 100)
            ctx.draw()
            wx.hideLoading()
          }
        })
      }
    })

4、保存Canvas图片

	let that=this;
	//剪裁Canvas里的位置,保存为临时图片地址
    wx.canvasToTempFilePath({
      canvasId: 'poster',
      x: 0,
      y: 0,
      width: 375,
      height: 570,
      destWidth: 375,
      destHeight: 570,
      success(res) {
        that.setData({
          posterImg: res.tempFilePath
        })
        //下载到手机里了
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showToast({
              title: '保存成功',
            })
          }
        })
      }
    }, this)

你可能感兴趣的:(小程序)