前言

效果如图：

一、二维码

1 选用getUnlimited

因为它：永久有效，数量暂无限制。 使用 后端生成，返回到前端显示

2 后端java

service写好的服务 第一步：获取access_token,我这里把它做一个一下处理，把他存在redis中，时间设置2个小时，哪个redisUtil是我封装的一个的，可以换成你们自己的。

第二步：填一下你需要参数 我这边写的是的，方便我传入，page是页面，扫一下二维码，会进入对应页面。scene是参数，进入页面是代入参数

3 前端（小程序页面）

我们才后端获取图片，需要通过base64转成img 这个是一个方法，当然，你也可以在java后台做一些处理，把图片在服务器，或者存在ssm，返回一个链接过来，前端页面直接使用。就不需要转化了

const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = tmp_base64src; //自定义文件名

function base64src(base64data, cb) {
          
   
  const [, format, bodyData] = /data:image/(w+);base64,(.*)/.exec(base64data) || [];
  if (!format) {
          
   
    return (new Error(ERROR_BASE64SRC_PARSE));
  }
  const filePath = `${
          
   wx.env.USER_DATA_PATH}/${
          
   FILE_BASE_NAME}.${
          
   format}`;
  const buffer = wx.base64ToArrayBuffer(bodyData);
  fsm.writeFile({
          
   
    filePath,
    data: buffer,
    encoding: binary,
    success() {
          
   
      cb(filePath);
    },
    fail() {
          
   
      return (new Error(ERROR_BASE64SRC_WRITE));
    },
  });
};
module.exports = base64src;

在js

var base64src = require(../../../utils/base64src.js);

生成图片方法(请求rq做一下封装，大家可以wx.request去请求你后端写好代码)

createImg() {
          
   
        wx.vibrateShort({
          
   
            type: light,
        })
        wx.showLoading({
          
   
            title: 生成中...,
        })
        var that = this;
        that.setData({
          
   
            isCode:true
        })
        const query = wx.createSelectorQuery()
        //返回一个对象实例,通过实例可获取canvas
        query.select(#shareCard).fields({
          
   
            node: true,
            size: true
        }).exec((res) => {
          
    //绘制canvas
            console.log(width, that.data.width)
            console.log(piR, that.data.pixelRatio)
            console.log(res)
            var width = res[0].width
            var height = res[0].height

            const canvas = res[0].node
            const ctx = canvas.getContext(2d)

            //使canvas适应各种屏幕不至于大小不同
            let piR = that.data.pixelRatio; //比例
            canvas.width = width * piR
            canvas.height = height * piR
            ctx.scale(piR, piR)


            // 绘制图片背景
            const backImg = canvas.createImage();

            let data = {
          
   
                page: pages/system/login/login,
                scene: 108,//用户id
            }
            rq(WeChat/getQrImage, data, GET).then(res => {
          
   
                base64src(res, resCurrent => {
          
   
                    console.log(resCurrent)
                    backImg.src = resCurrent;
                    backImg.onload = () => {
          
   
                        ctx.drawImage(backImg, width*0.1, width*0.1, width*0.8, width*0.8);
                        wx.hideLoading();
                    }
                })
            })
            const avatarImg = canvas.createImage();
            let avatarUrl = wx.getStorageSync(avatarUrl);
            if (avatarUrl == ) avatarUrl = /img/base/avatar.jpg
            avatarImg.src = avatarUrl; //头像路径
            avatarImg.onload = () => {
          
   
                let size = width * 100 / 750; //大小
                ctx.drawImage(avatarImg, width * 0.1, width-15, size, size);
            }

            //文字
            ctx.font = normal bold 18px sans-serif;
            ctx.fillStyle = #000000; //背景颜色
            let w = width * 0.1 + 10 + width * 100 / 750;
            ctx.fillText(邀请你，扫码登录, w, width+10);
            // ctx.draw = true;

        })
    },

wxml写一个页面(页面样式这里不展示呢)

二、普通二维码使用

是把你内容，变成二维码形式，方便扫描获取，上面可以说是程序码，非常适合小程序。先看一下结果 大家扫描会获取到 abc 12345。这是固定的

这里使用 weapp-qrcode 是一个开源的 在github 地址是：https://github.com/MrITzhongzi/small_routine_components/tree/master/6.create_qr_code

把下来，把 weapp-qrcode.js存在你小程序中

js 引入：

import QRCode from ../../../utils/weapp-qrcode.js;

wxml和前面一样 其中canvas 其中 这条一定要存在，不然不显示不出来二维码

<!--创建一个画布，将它移出屏幕外看不到的地方 不看见的-->
 <canvas canvas-id="myQrcode" style="background:#fff;width: {
          
   {width}}px;height: {
          
   {width}}px; display:block; left:-800rpx;position:absolute;" />

总结：

对于这2中生成二维码方式。我还是推荐是使用第一种的，因为比较适合小程序。第2种，可以弄来看一下。大家觉得呢