目前市場上二維碼識別的軟件或者網站越來越多，可是真正方便，無廣告的卻少之很少。

於是，自己突發奇想做了一個微信二維碼識別的小程序。

包含功能：

1、識別二維碼

①普通二維碼

②條形碼

③只是復制解析出來的數據

2、生成二維碼

①只是從粘貼板生成二維碼

軟件截圖：

體驗二維碼：

以下為主要代碼

index.js

// pages/main/index.js
var QR = require("../../utils/qrcode.js");
Page({
    data: {
        canvasHidden: 
 
false,
        maskHidden: true,
        imagePath: ‘‘,
      placeholder: ‘https://www.mojxtang.club/‘,//默認二維碼生成文本
        placeholder_data:"點擊自動獲取剪切板的內容！",
        QRcode:"",
        bindfocus_value:"",
        input_state:0
    },
    onLoad: function (options) {
        // 頁面初始化 options為頁面跳轉所帶來的參數
        var
 
 size = this.setCanvasSize();//動態設置畫布大小
        var initUrl = this.data.placeholder;
        this.createQrCode(initUrl, "mycanvas", size.w, size.h);
    },
    onReady: function () {

    },
    onShow: function () {
        var that = this;
            that.setData({
                input_state:0
            })
        
 
// 頁面顯示
    },
    onHide: function () {
        // 頁面隱藏
    },

    onUnload: function () {
        // 頁面關閉

    },
    //適配不同屏幕大小的canvas
    setCanvasSize: function () {
        var size = {};
        try {
            var res = wx.getSystemInfoSync();
            var scale = 750 / 686;//不同屏幕下canvas的適配比例；設計稿是750寬
            var width = res.windowWidth / scale;
            var height = width;//canvas畫布為正方形
            size.w = width;
            size.h = height;
        } catch (e) {
            // Do something when catch error
            console.log("獲取設備信息失敗" + e);
        }
        return size;
    },
    createQrCode: function (url, canvasId, cavW, cavH) {
        //調用插件中的draw方法，繪制二維碼圖片
        QR.api.draw(url, canvasId, cavW, cavH);
        setTimeout(() => { this.canvasToTempImage(); }, 1000);

    },
    //獲取臨時緩存照片路徑，存入data中
    canvasToTempImage: function () {
        var that = this;
        wx.canvasToTempFilePath({
            canvasId: ‘mycanvas‘,
            success: function (res) {
                var tempFilePath = res.tempFilePath;
                console.log(tempFilePath);
                that.setData({
                    imagePath: tempFilePath,
                    // canvasHidden:true
                });
            },
            fail: function (res) {
                console.log(res);
            }
        });
    },
    //點擊圖片進行預覽，長按保存分享圖片
    previewImg: function (e) {
        var img = this.data.imagePath;
        console.log(img);
        wx.previewImage({
            current: img, // 當前顯示圖片的http鏈接
            urls: [img] // 需要預覽的圖片http鏈接列表
        })
    },
    formSubmit: function (e) {
        var that = this;
        var url = e.detail.value.url;
        that.setData({
            maskHidden: false,
            QRcode:""
        });
        wx.showToast({
            title: ‘生成中...‘,
            icon: ‘loading‘,
            duration: 2000
        });
        var st = setTimeout(function () {
            wx.hideToast()
            var size = that.setCanvasSize();
            //繪制二維碼
            that.createQrCode(url, "mycanvas", size.w, size.h);
            that.setData({
                maskHidden: true
            });
            clearTimeout(st);
        }, 2000)

    },
    rq_jiema:function(evt){
        var that = this;
        console.log(evt);
        wx.scanCode({
            success: function (res) {
                console.log(res);
                that.setData({
                    QRcode: res.result
                })
                
            }
        })
    },
    Copy_to_clipboard:function(evt){
        var that = this;
        wx.setClipboardData({
            data: evt.currentTarget.dataset.text,
            success(res) {
               
            }
        })
    },
    bindfocus_value:function(){
        var that = this;
        if (that.data.input_state == 0){
            wx.showModal({
                title: ‘提示‘,
                content: ‘是否將剪切板的內容,制作成二維碼？‘,
                success: function (res) {
                    if (res.confirm) {
                        wx.getClipboardData({
                            success(res) {
                                that.setData({
                                    input_state:0,
                                    bindfocus_value: res.data
                                })
                            }
                        })
                    } else {
                        that.setData({
                            input_state: 1,
                            bindfocus_value: ""
                        })
                    }
                }

            })
        }
       
        
    }

})

文章鏈接：點擊進入

微信小程序二維碼識別