微信小程序如何生成二维码-一键免费生成微信小程序

这是我参加11月更新挑战的第8天。 详情请查看：2021年最后更新挑战

如图所示，我们要实现一个学生二维码页面，在其他页面扫码搜索对应的学生。 一起来看看吧~

1.wxml

页面布局如下，重点关注canvas的width、height和canvasId。

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>

复制代码

2.js2.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图中间有个头像，在开发工具里可以正常显示。 后来微信小程序如何生成二维码，手机上的二维码就无法显示了。 知道为什么了，但是最后发现配置图片是合法的域名，但是我们项目的域名不统一，所以后面会去掉，因为上面还有一张学生头像左角。 记录下来。