新版微信小程序通过接口获取背景图和二维码（页面）

使用最新版微信小程序，通过接口去获取背景图，二维码

官方文档：canvas | 微信开放文档 (qq.com)

二维码文档：获取小程序码 | 微信开放文档 (qq.com)

此方法使用canvas画布绘制出来二维码，是一个单独的页面，如果是想点击显示弹窗出来的那种，就需要写一个点击事件，去调用就行了

wxml:

<view class="promotion-head">
  <view class="promotion-background">
    <image src="/image/tome.jpg" mode=""/>
  </view>
  <canvas type="2d" id="myCanvas" ></canvas>
</view> 

js:

代码中，请求接口的方式是url: getApp().globalData.url + '/api/personal/getWxcode',

这个方法是提取了公共部分，将接口的前半部分写到全局，使用的时候调用一下，再将后段接口补齐，若和代码段中方法不一样就直接将getApp到加号位置删除就行，直接将自己的接口写全

拿数据的时候是在接口里面直接去写，是因为试过了很多办法，在接口之外的话没办法拿到那个code，也许是自己方法使用不当..当然，肯定不值这一种方法，可以多尝试，这个方法也是和朋友沟通，看了他的方法才整出来的

Page({
  data: {
    code: '',
  },
  onReady() {
    wx.request({
      url: getApp().globalData.url + '后半接口域名',
      method: "POST",
      data: {
        //其余数据根据自己接口所需去拿
      },
      success: (res) => {
        var code = res.data;
        console.log(code);
        const query = wx.createSelectorQuery()
        query.select('#myCanvas')
          .fields({
            node: true,
            size: true
          })
          .exec((res) => {
            const canvas = res[0].node
            const ctx = canvas.getContext('2d')
            const dpr = wx.getSystemInfoSync().pixelRatio
            canvas.width = res[0].width * dpr // 获取宽
            canvas.height = res[0].height * dpr // 获取高
            ctx.scale(dpr, dpr)
            // 到这里就可以直接绘制
            let image = canvas.createImage(); //创建iamge实例
            image.src = '/image/friend.jpg'; // 引入本地图片，也可以使用网络路径的图片
            image.onload = function () {
              ctx.drawImage(image, 0, 0, 289, 370); // 背景图
              // 绘制base64图片
              //声明文件系统
              const fs = wx.getFileSystemManager();
              var times = new Date().getTime();
              var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
              //将base64图片写入
              fs.writeFile({
                filePath: codeimg,
                data: code.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)
                encoding: 'base64',
                success: () => {
                  wx.createSelectorQuery().select('#myCanvas').fields({
                      node: true,
                      size: true
                    })
                    .exec((res) => {
                      let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文
                      let canvas = res[0].node;
                      const bg = canvas.createImage();
                      bg.src = codeimg;
                      bg.onload = function () {
                        ctx.drawImage(bg, 76, 175, 140, 140);
                      }
                    })
                }
              });
            }
          })
      }
    })
 
  }
})