微信小程序二维码识别

Posted 2021-01-22 mojxtang

 

目前市场上二维码识别的软件或者网站越来越多，可是真正方便，无广告的却少之很少。

于是，自己突发奇想做了一个微信二维码识别的小程序。

包含功能：

    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: ""
                        })
                    }
                }

            })
        }
       
        
    }

})

View Code

 

文章链接：点击进入