微信小程序-二维码的生成和使用

这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战

如图要实现一个学生二维码页面，在其他页面扫码可以搜索到对应学生，下面我们一起看看吧~

1.wxml

页面布局如下，重点是canvas的width，height，canvasId.

<view class="bg-black">
    <view class="inner">
        <view class="d-fx message">
            <view class="photoContainer">
                <image src="{{photoUrl}}" wx:if="{{photoUrl}}" mode="aspectFill"></image>
            </view>
            <view class="right">
                <view class="fs16 txt-overflow widClass">
                    张三<van-icon class="icon iconfont iconnv" wx:if="{{userInfo.gender == 1}}">
                    </van-icon>
                    <van-icon class="icon iconfont iconnan" wx:if="{{userInfo.gender == 0}}"></van-icon>
                </view>
                <text class="fs10 black-45 txt-overflow widClass">{{userInfo.className}}</text>
            </view>
        </view>
        <image src="{{qrcodeImgStore}}" wx:if="{{qrcodeImgStore}}" mode="aspectFill"
            style="width: 400rpx; height: 400rpx;"></image>
        <canvas style="width: 400rpx; height: 400rpx;" canvas-id="myQrcode" wx:else></canvas>
    </view>
    <view class="bottom-text" bindtap="refreshCode">
        <van-icon name="replay" /> 点击刷新二维码
    </view>
</view>

2.js

2.1 引入weapp.qrcode.min.js，

可以 这里 下载

2.2 drawQrcode方法

text：二维码的内容，必须设置。内容决定生成二维码的复杂程度。

image：在canvas上绘制图片，层级高于二维码，其中，在小程序中图片必须先下载，再使用，此处在使用中，必须要配置域名才能保证图片展示。由于我们项目中用的阿里云服务器。域名不唯一，就先去掉了中间的图片，需要的同学可以自行加上。

2.3 二维码转图片

由于二维码的内容是学生的学号，而学号是唯一的，所以就在第一次进来生成二维码之后，把二维码转成了图片（wx.canvasToTempFilePath），存了缓存，下次直接展示图片，避免了资源的浪费。同时刷新的功能也去掉了。

具体的代码如下，可参考：

import drawQrcode from '../../../../utils/weapp.qrcode.min.js';
import Store from '../../../../utils/store.js'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        userInfo: '',
        photoUrl: '',
        year: '',
        className: '',
        path: '', // 头像的路径
        qrcodeImg: '', // 二维码图片
        qrcodeImgStore: '', // 图片路径
    },
    // 生成学生二维码
    drawCode() {
        let winWidth = 750;
        wx.getSystemInfo({
            success: (result) => {
                winWidth = result.windowWidth;
            },
        })
        let info = {
            userNum: this.data.userInfo && this.data.userInfo.userNum,
            tid: this.data.userInfo && this.data.userInfo.tid,
        }
        let options = {
            width: 405 / 750 * winWidth,
            height: 200,
            canvasId: 'myQrcode',
            text: JSON.stringify(info), // 二维码内容
            callback: (e) => {
                this.setData({
                    qrcodeImg: e.tempFilePath,
                });
                // 使用 setTimeout, 避免部分安卓机转出来的二维码图片不完整
                setTimeout(() => {
                    wx.canvasToTempFilePath({
                        canvasId: 'myQrcode',
                        x: 0,
                        y: 0,
                        width: 200,
                        height: 200,
                        success: (e) => {
                            this.setData({
                                qrcodeImgStore: e.tempFilePath,
                            });
                            Store.setStorage("qrcodeImgStore", e.tempFilePath);
                        }
                    })
                }, 0);
            }
        }
        // 二维码中间的图片
        if (!!this.data.path) {
            options.image = {
                imageResource: this.data.path,
                dx: 70,
                dy: 70,
                dWidth: 60,
                dHeight: 60
            }
        }
        drawQrcode(options);
    },
    // 刷新二维码
    refreshCode() {
        this.drawCode();
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData({
            userInfo: Store.getStorage('userInfo'),
            qrcodeImgStore: Store.getStorage("qrcodeImgStore")
        })
        if (!!this.data.qrcodeImgStore) {
            this.drawCode();
        }
    },
})

3.扫码查询学生

// 扫描功能
scanCode() {
    wx.scanCode({
        scanType: [],
        success: (res) => {
            this.setData({
                value3: res.result && JSON.parse(res.result).userNum
            })
            this.getList();
        },
        fail: (res) => {},
        complete: (res) => {},
    })
},

以上就是二维码的生成了，是不是很简单，一开始的时候UI图中间是有头像的，在开发工具中是可以正常展示的，后面在手机端二维码就是出不来，一直不知道为什么，最后发现是要配置图片的合法的域名，但是我们项目的域名不统一，后面就去掉了，因为左上角也是有学生头像的。记录一下。