微信小程序随机生成二维码

微信小程序随机生成二维码思路
利用weapp.qrcode.esm随机生成二维码工具
本文章使用的是weapp.qrcode.js v1.1.2版本
首先引入模块

import drawQrcode from '../../utils/weapp.qrcode.esm'

在data数据里面添加一个二维码图片的路径

 // 二维码图片路径
        QRcodeUrl: ''

wxml代码

<view class="bg" bindtap='hideview' style='display:{{display}}'></view>
<view class="show" bindtap='hideview' style='display:{{display}}'>
  <view class='containera'>
    <image class="imagesa" src="{{shareImgSrc}}"></image>
    <view class='fourlayoutstylea'>
      <button size="{{primarySize}}" bindtap="showLocal"> 保存分享图片 </button>
    </view>
    <view class="canvas-box">
      <canvas canvas-id="myCanvas" style="width:100%;height:{{windowHeight}}px;"></canvas>
    </view>
  </view>
</view>
//画布里面存放的是二维码
<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode" style="display: none;"></canvas>

wxss代码,样式可以自己调整

.bg {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.7;
	opacity: 0.70;
	filter: alpha(opacity=70);
  }
  
  .show {
	text-align: center;
	position: absolute;
	top: 5%;
	left: 10%;
	width: 80%;
	height: 90%;
	z-index: 1002;
  }
  
  .canvas-box {
	height: 100%;
	width: 100%;
	position: fixed;
	left: 0;
	top: 999999rpx;
  }
  
  .containera {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	position: relative;
  }
  
  image {
	width: 100%;
	height: 75%;
  }
  
  .fourlayoutstylea {
	width: 50%;
	height: 200rpx;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -25%;
  }
.share image{
	width: 60rpx;
	height: 60rpx;
}
.share{
	float: right;
}
.content{
	padding: 30rpx;
}

js代码

async onLoad() {
        const result = await request({
            url: '/common/notice/getAll'
        })
        console.log(result)
        this.setData({
            noteList: result
        })
        /**
         * 生成二维码
         */
        const that = this
        const query = wx.createSelectorQuery()
        query.select('#myQrcode')
            .fields({
                node: true,
                size: true
            })
            .exec((res) => {
                var canvas = res[0].node
                console.log('这是公告内容', that.data.noteList[0].noticeDes)

                // 调用方法drawQrcode生成二维码
                drawQrcode({
                    canvas: canvas,
                    canvasId: 'myQrcode',
                    width: 260,
                    padding: 30,
                    background: '#ffffff',
                    foreground: '#000000',
                    text: that.data.noteList[0].noticeDes,
                })

                // 获取临时路径（得到之后，想干嘛就干嘛了）
                wx.canvasToTempFilePath({
                    canvasId: 'myQrcode',
                    canvas: canvas,
                    x: 0,
                    y: 0,
                    width: 260,
                    height: 260,
                    destWidth: 260,
                    destHeight: 260,
                    success(res) {
                        console.log('二维码临时路径：', res.tempFilePath)
                        that.setData({
                            QRcodeUrl: res.tempFilePath
                        })
                        console.log(that.data.QRcodeUrl)
                    },
                    fail(res) {
                        console.error(res)
                    }
                })
            })
    },
    onShareAppMessage: function () {
        return {
            title: '筑梦回收',
            desc: '最好用的回收利器!',
            path: 'pages/notice/notice'
        }
    },
    shareOther: function (event) {
        wx.showLoading({
            title: '生成中',
        })
        this.setData({
            display: "block",
        })
        var that = this;
        // 传入头像和名称
        const user = wx.getStorageSync('user')
        const avatarUrl = user.avatarUrl
        const name = user.nickName
        that.onshow(name, avatarUrl)
    },
    //   传入
    onshow: function (name, img) {

        var that = this;
        //1. 请求后端API生成小程序码
        //2. canvas绘制文字和图片
        const ctx = wx.createCanvasContext('myCanvas');
        //背景图
        var bgImgPath = '../../image/公告.jfif'
        var imgPath = this.data.QRcodeUrl; //二维码
        ctx.drawImage(bgImgPath, 0, 0, this.data.windowWidth, 280);

        ctx.setFillStyle('white')
        ctx.fillRect(0, 280, 300, 120);
        ctx.drawImage(imgPath, 190, 290, 100, 100);
        ctx.drawImage(img, 10, 290, 40, 40)
        //绘制字体
        ctx.setFontSize(14)
        ctx.setFillStyle('#6F6F6F')
        ctx.fillText(name, 63, 314)

        ctx.setFontSize(15)
        ctx.setFillStyle('#111111')
        ctx.fillText('最新公告已发布,快来看看吧!', 10, 350)
        ctx.fillText(name + '在智慧社区', 10, 370)

        ctx.setFontSize(10)
        ctx.fillText('长按扫码查看详情', 10, 390)
        ctx.draw(false, setTimeout(function () {
            wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: that.data.windowWidth,
                height: that.data.windowHeight,
                destWidth: that.data.windowWidth * 2,
                destHeight: that.data.windowHeight * 2,
                canvasId: 'myCanvas',
                success: function (res) {
                    console.log(res.tempFilePath);
                    wx.hideLoading();
                    that.setData({
                        shareImgSrc: res.tempFilePath
                    })

                },
                fail: function (res) {
                    wx.hideLoading();
                    wx.showToast({
                        title: '生成失败',
                        icon: "none"
                    })
                }
            })
        }, 200));
    }

实现的效果图