小程序生成带二维码的分享海报（后端PHP）

小程序wxml页面

<canvas class='mycanvas' style="" canvas-id="myCanvas"></canvas>

<!-- <view class='ft'>保存图片到手机相册，分享到朋友圈</view> -->
<view class='operation' style="">
  <image bindtap='savetup' class="icon" src="/pages/images/down.png"></image>
  <image open-type="share" class="icon" src="/pages/images/share.png"></image>
</view>

小程序wxss页面

.mycanvas{
  margin:0 auto;
  margin-top:30px;
  margin-bottom:30px;
  width: 310px; 
  height: 490px;
  border:1px solid #ddd;
  box-shadow:0px 0px 10px 5px #D8D7DD;

}
.ft{
  text-align: center;
}
.icon{
  width: 110rpx;
  height: 110rpx;
}
.operation{
  display: flex;
  justify-content: space-around;
  padding:10px
}

小程序js页面

/**
   * 页面的初始数据
   */
  data: {
    id: '',
    housetitle: '',
    houseaddress: '',
    houseprice: '',
    qrcode: '',
    houseimg: '',
    codesrc: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    that.setData({
      id: 13608,
    })
    //1. 请求后端API生成小程序码
    wx.request({
      url: 'xxxxxxxxxx',
      data: {
        id: that.data.id
      },
      success: function(data) {
        var houseinfo = data.data;
        var imgurl = houseinfo.fyxx.url;
        var title = houseinfo.fyxx.fytitle;
        var address = houseinfo.fyxx.district + " | " + houseinfo.fyxx.rooms + " room | " + houseinfo.fyxx.site;
        if (title.length > 45){
          var title = houseinfo.fyxx.fytitle.substring(0,42)+"...";
        }
        if (address.length > 45) {
          var address = address.substring(0, 42)+"...";
        }
        console.log(houseinfo)

        that.setData({
          housetitle: title,
          houseaddress: address,
          houseprice: houseinfo.fyxx.price,
        });

        var arr3 = houseinfo.url;
        var imgurl2 = arr3[0];

        //2. canvas绘制文字和图片
        const ctx = wx.createCanvasContext('myCanvas');
        var imgPath = 'xxxxxxxxxx' + imgurl2;
        var bgImgPath = '../images/wifi.jpg';
        // var basicprofile = '../images/房子 (3)@2x.png';

        wx.downloadFile({
          url: imgPath, //二维码路径
          success: function(res) {
            if (res.statusCode === 200) {
              that.setData({
                houseimg: res.tempFilePath
              });
            }
            wx.request({
              url: 'xxxxxxxxxx/index',
              data: {
                id: that.data.id
              },
              method: 'POST',
              success: function(data) {
                that.setData({
                  qrcode: data.data
                });

                wx.downloadFile({
                  url: that.data.qrcode, //二维码路径
                  success: function(res) {
                    if (res.statusCode === 200) {
                      that.setData({
                        codesrc: res.tempFilePath
                      });
                    }

                    //填充背景
                    ctx.setFillStyle('#ffffff');
                    ctx.fillRect(0, 0, 310, 490);

                    //绘制房子图片
                    ctx.drawImage(that.data.houseimg, 0, 0, 310, 260);

                    //绘制标题
                    ctx.setFontSize(13);
                    ctx.setFillStyle('#000000');
                    ctx.fillText(that.data.housetitle, 10, 285);

                    //绘制房子地址
                    ctx.setFontSize(13);
                    ctx.setFillStyle('#6F6F6F');
                    ctx.fillText(that.data.houseaddress, 10, 310);

                    //绘制房子价格
                    const metrics = ctx.measureText(that.data.houseprice); //测量文本信息
                    ctx.stroke();
                    ctx.rect(10, 328, metrics.width + 30, 25);
                    ctx.setFillStyle('rgba(20,136,204,1)');
                    ctx.fill();
                    ctx.setFillStyle('#FFFFFF');
                    ctx.fillText('￥'+ that.data.houseprice, 15, 345);

                    //房源浏览量
                    ctx.setFillStyle('#6F6F6F');
                    ctx.fillText('1000＋  views', 215, 345)

                    //绘制一条虚线
                    ctx.strokeStyle = 'blue';
                    ctx.beginPath();
                    ctx.setLineWidth(1);
                    ctx.setLineDash([2, 4]);
                    ctx.moveTo(10, 365);
                    ctx.lineTo(300, 365);
                    ctx.stroke();

                    //绘制介绍
                    ctx.setFontSize(12.5);
                    ctx.setFillStyle('#aaaaaa');
                    ctx.fillText('Long click scan code for details', 10, 414);
                    ctx.fillText('Share SmartHousing applet', 10, 443);
                    ctx.drawImage(that.data.codesrc, 205, 382, 90, 90);
                    ctx.draw();

                  }
                })
              }
            })
          }
        })

      }
    });
  },

  /**
   * 多行文字处理，每行显示数量
   * @param text 为传入的文本
   * @param num  为单行显示的字节长度
   */
  textByteLength(text, num) {
    let strLength = 0; // text byte length
    let rows = 1;
    let str = 0;
    let arr = [];
    for (let j = 0; j < text.length; j++) {
      if (text.charCodeAt(j) > 255) {
        strLength += 2;
        if (strLength > rows * num) {
          strLength++;
          arr.push(text.slice(str, j));
          str = j;
          rows++;
        }
      } else {
        strLength++;
        if (strLength > rows * num) {
          arr.push(text.slice(str, j));
          str = j;
          rows++;
        }
      }
    }
    arr.push(text.slice(str, text.length));
    return [strLength, arr, rows] //  [处理文字的总字节长度，每行显示内容的数组，行数]
  },

  // 保存到相册
  savetup: function() {
    var that = this;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 310,
      height: 490,
      destWidth: 930,
      destHeight: 1470,
      canvasId: 'myCanvas',
      success: function(res) {
        //调取小程序当中获取图片
        console.log(res.tempFilePath);
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showModal({
              title: 'Save chart success!',
              content: 'The picture was successfully saved to the album, you can go to share ~',
              showCancel: false,
              confirmText: 'OK',
              confirmColor: '#72B9C3',
              success: function(res) {
                if (res1.confirm) {
                  console.log('用户点击确定');
                }
              }
            })
          }
        })
      },
      fail: function(res) {
        console.log(res)
      }
    })
  },

PHP后端

<?php

namespace app\index\controller;

use think\Controller;
use think\Db;


class Wxcode extends Controller
{
    public function index($id = "")
    {
        header('content-type:text/html;charset=utf-8');
        //配置APPID、APPSECRET
        $APPID = "xxxxxxxxxxxxx";
        $APPSECRET =  "xxxxxxxxxxxxxxx;
        //获取access_token
        $access_token = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$APPID&secret=$APPSECRET";

        //缓存access_token
        session_start();
        $_SESSION['access_token'] = "";
        $_SESSION['expires_in'] = 0;
        if(!isset($_SESSION['access_token']) || (isset($_SESSION['expires_in']) && time() > $_SESSION['expires_in']))
        {
            $json = $this->httpRequest( $access_token );
            $json = json_decode($json,true);
            $_SESSION['access_token'] = $json['access_token'];
            $_SESSION['expires_in'] = time()+7200;
            $ACCESS_TOKEN = $json["access_token"];
        }else{
            $ACCESS_TOKEN =  $_SESSION["access_token"];
        }

        //构建请求二维码参数
        //path是扫描二维码跳转的小程序路径，可以带参数?id=xxx
        //width是二维码宽度
        $qcode ="https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=$ACCESS_TOKEN";
        $path = "pages/houseDetail/houseDetail";
        $param = json_encode(array("scene"=>"$id","page"=>"$path","width"=> 150));

        //POST参数
        $result = $this->httpRequest( $qcode, $param,"POST");
        //生成二维码
        file_put_contents("qrcode.jpg", $result);
//        $base64_image ="data:image/jpeg;base64,".base64_encode( $result );
        $img_url = "https://xxxx/qrcode.jpg";
        return $img_url;
    }

    //把请求发送到微信服务器换取二维码
    public function httpRequest($url, $data='', $method='GET'){
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
        curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
        curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
        curl_setopt($curl, CURLOPT_AUTOREFERER, 1);
        if($method=='POST')
        {
            curl_setopt($curl, CURLOPT_POST, 1);
            if ($data != '')
            {
                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
            }
        }

        curl_setopt($curl, CURLOPT_TIMEOUT, 30);
        curl_setopt($curl, CURLOPT_HEADER, 0);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        $result = curl_exec($curl);
        curl_close($curl);
        return $result;
    }
}