小程序实现扫码识别二维码内容

前言

在开发程序过程中经常和二维码打交道，经常要查看二维码的内容是什么，所以决定自己开发一个可以识别二维码，生成二维码的小工具。

一、项目展示

用户可以识别生活中常见的支持条码、二维码、DataMatrix和PDF417的内容。

可以输入要生成二维码的字符串，然后点击生成二维码图片。

 

二、扫码识别

页面比较简单，由二维码的回显框、复制内容按钮、重新扫码按钮组成

js中实现在进入首页时直接调用微信扫一扫功能，减少用户操作

识别获取到内容后回显之输入框内

设置打开可以分享好友和朋友圈
 

<view class="container">
    <view class="section">
        <textarea focus="{{focus}}" maxlength="2048" placeholder="扫描识别内容" value="{{show}}"></textarea>
    </view>
</view>
<view class="btn">
    <button bindtap="primary" disabled="{{disabled}}" loading="{{loading}}" plain="{{plain}}" size="{{primarySize}}" type="primary">              复制内容 
  </button>
    <button bindtap="defaultBtn" disabled="{{disabled}}" hoverClass="other-button-hover" loading="{{loading}}" plain="{{plain}}" size="{{defaultSize}}" type="default"> 重新扫描 </button>
</view>

Page({
    data: {
        defaultSize: "default",
        primarySize: "default",
        warnSize: "default",
        disabled: !1,
        plain: !1,
        loading: !1,
        show: ""
    },
    setLoading: function(a) {
        this.setData({
            loading: !this.data.loading
        });
    },
    onLoad: function() {
        var a = this;
        wx.scanCode({
            onlyFromCamera: !0,
            scanType: [ "barCode", "qrCode", "datamatrix", "pdf417" ],
            success: function(t) {
                console.log(t);
                var o = t.result;
                console.log(o), a.setData({
                    show: o
                });
            }
        });
    },
    primary: function(a) {
        wx.setClipboardData({
            data: this.data.show,
            success: function(a) {
                wx.getClipboardData({
                    success: function(a) {
                        console.log(a.data);
                    }
                });
            }
        });
    },
    defaultBtn: function(a) {
        this.onLoad();
    },
    //分享至朋友
    onShareAppMessage (){
        return{
            title:"扫码识别",
            path:"pages/index/index",
            imageUrl:""
        }
    },
    onShareTimeline(){
       return{
            title:"扫码识别",
            query:"pages/index/index",
            imageUrl:""
        }
    }
});

三、生成二维码

页面同样比较简单，由输入框和按钮组成

底部增加canvas用于回显生成二维码图片

给图片增加长按可以保存功能

<view class="container">
    <view class="section">
        <textarea bindconfirm="confirmHandler" bindinput="inputHandler" focus="{{focus}}" maxlength="2048" placeholder="输入需要转换为二维码的字符串" value="{{text}}"></textarea>
    </view>
</view>
<view class="btn">
    <button bindtap="tapHandler" disabled="{{disabled}}" loading="{{loading}}" plain="{{plain}}" size="{{primarySize}}" type="primary">              生成二维码
  </button>
</view>
<canvas bindlongtap="save" canvasId="canvas" class="canvas"></canvas>

var e, t = require("../../utils/weapp-qrcode.js");

Page({
    data: {
        text: "",
        image: ""
    },
    onLoad: function(a) {
        e = new t("canvas", {
            text: "",
            image: "",
            width: 150,
            height: 150,
            colorDark: "#1CA4FC",
            colorLight: "white",
            correctLevel: t.CorrectLevel.H
        });
    },
    confirmHandler: function(t) {
        var a = t.detail.value;
        e.makeCode(a);
    },
    inputHandler: function(e) {
        var t = e.detail.value;
        this.setData({
            text: t
        });
    },
    tapHandler: function() {
        e.makeCode(this.data.text);
    },
    save: function() {
        console.log("save"), wx.showActionSheet({
            itemList: [ "保存图片" ],
            success: function(t) {
                console.log(t.tapIndex), 0 == t.tapIndex && e.exportImage(function(e) {
                    wx.saveImageToPhotosAlbum({
                        filePath: e
                    });
                });
            }
        });
    },

    onShareAppMessage (){
        return{
            title:"扫码识别",
            path:"pages/index/index",
            imageUrl:""
        }
    },
    onShareTimeline(){
        return{
             title:"扫码识别",
             query:"pages/index/index",
             imageUrl:""
         }
     }
});

其中工具类utils/weapp-qrcode.js链接放在网盘请自行获取：https://pan.baidu.com/s/1jjspnfMW_mgFh6b10ToBGA  提取码：9joa