This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

As shown in the figure, we want to realize a two-dimensional code page of students. We can search the corresponding students by scanning the code on other pages. Let’s take a look at it

1.wxml

The page layout is as follows, focusing on the width, height and canvasId of the canvas.

<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">Zhang SAN<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" />Click to refresh the QR code</view>
</view>
Copy the code

2.js

2.1 Introducing app.qrcode.min.js

You can download it here

2.2 drawQrcode method

Text: specifies the content of the QR code. Content determines the complexity of generating a QR code.

Image: To draw pictures on canvas, the level is higher than two-dimensional code. In the mini program, images must be downloaded before being used. In the use, domain names must be configured to ensure image display. Because of the Ali cloud server used in our project. The domain name is not unique, so I removed the picture in the middle first. If you need it, you can add it yourself.

2.3 Qr code to pictures

Since the content of the QR code is the student id, and the student ID is unique, we generated the QR code for the first time and converted it into a picture (WX.canvastotempFilepath), saved the cache, and displayed the picture directly next time to avoid wasting resources. The refresh function has also been removed.

The specific code is as follows for reference:

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

    /** * initial data for the page */
    data: {
        userInfo: ' '.photoUrl: ' '.year: ' '.className: ' '.path: ' '.// The path of the avatar
        qrcodeImg: ' './/
        qrcodeImgStore: ' '.// Image path
    },
    // Generate student qr code
    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), // The content of the QR code
            callback: (e) = > {
                this.setData({
                    qrcodeImg: e.tempFilePath,
                });
                // Use setTimeout to avoid incomplete qr code pictures transferred from some Android devices
                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); }}// The middle image of the qr code
        if(!!!!!this.data.path) {
            options.image = {
                imageResource: this.data.path,
                dx: 70.dy: 70.dWidth: 60.dHeight: 60
            }
        }
        drawQrcode(options);
    },
    // Refresh the QR code
    refreshCode() {
        this.drawCode();
    },

    /** * lifecycle function -- listens for page loading */
    onLoad: function (options) {
        this.setData({
            userInfo: Store.getStorage('userInfo'),
            qrcodeImgStore: Store.getStorage("qrcodeImgStore")})if(!!!!!this.data.qrcodeImgStore) {
            this.drawCode(); }}})Copy the code

3. Scan code to query students

// Scan function
scanCode() {
    wx.scanCode({
        scanType: [].success: (res) = > {
            this.setData({
                value3: res.result && JSON.parse(res.result).userNum
            })
            this.getList();
        },
        fail: (res) = > {},
        complete: (res) = >{},})},Copy the code

Above is the qr code generation, is very simple, at first the UI map is a head, middle in development tools can be normal to show the qr code on the mobile end didn’t come back, always don’t know why, finally found is to configure the picture legal domain, but the domain name of our project is not unified, the back is removed, Because the top left corner also has the student’s head. Take notes.