教你简单搞定小程序扫一扫以及生成普通二维码功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了教你简单搞定小程序扫一扫以及生成普通二维码功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题：

在生活中时常需要用小程序扫描识别相应的二维码（不包含小程序二维码），通过进入到相应的小程序，然后调起手机的相机进行扫一扫。那么将会更加方便简单的实现相应的功能。生成普通的二维码用weapp-qrcode.js来实现，识别二维码用wx.scanCode(）或camera来实现，下面下面将会介绍实现步骤，也会介绍用识别这两种方法的优缺点。

例如：厂库的获取，用来扫一扫就不需要输入相应的编码规格直接就可以找到相应的商品，简单又高效

实现方法：

一、生成普通的二维码。

实现方法：通过引用weapp-qrcode.js来生成相应的二维码。如下所示

微信小程序扫一扫,微信小程序,小程序,微信小程序,前端,javascript

（上面图片作展示效果，不作过多样式调整，需要的拿功能去慢慢优化自己样式）

下面作主要代码介绍

var QRCode = require('../../utils/weapp-qrcode.js')
import rpx2px from '../../utils/rpx2px.js'
const qrcodeWidth = rpx2px(300) 
//生成二维码图片
set_img(){
    qrcode = new QRCode('canvas', {
      usingIn: this,
      // text: "https://github.com/tomfriwel/weapp-qrcode",
      image: '/images/bg.jpg',
      width: qrcodeWidth,
      height: qrcodeWidth,
      // width: 150,
      // height: 150,
      colorDark: "#1CA4FC",
      colorLight: "white",
      correctLevel: QRCode.CorrectLevel.H,
    });
    // 生成图片，绘制完成后调用回调
    qrcode.makeCode(z.data.text)
}

//下面是保存图片
// 长按保存
  save: function() {
    console.log('save')
    wx.showActionSheet({
      itemList: ['保存图片'],
      success: function(res) {
        console.log(res.tapIndex)
        if (res.tapIndex == 0) {
          qrcode.exportImage(function(path) {
            wx.saveImageToPhotosAlbum({
              filePath: path,
            })
          })
        }
      }
    })
  }

二、识别二维码（除微信的二维码）。

实现方法：通过引用wx.scanCode(）或camera来识别二维码。如下所示

微信小程序扫一扫,微信小程序,小程序,微信小程序,前端,javascript

（上面图片作展示效果，不作过多样式调整，需要的拿功能去慢慢优化自己样式）

下面作主要代码介绍

方法一：
get_scanCode(){
        var a = this;
        wx.scanCode({
            scanType: [ "barCode", "qrCode", "datamatrix", "pdf417" ],
            success: function(t) {
                console.log(t);
                var o = t.result;
                let data= a.SceneToObj(o,false);
                console.log(data)
                console.log(o), a.setData({
                    show: o
                });
            },
            complete() {
                // 扫码震动
                /*wx.vibrateShort({
                    type: 'heavy'
                })*/
                // 播放音乐
                //a.playMusic()
            }
        });
},
方法二：
<camera class="camera" binderror="error" mode="scanCode" bindscancode="scancode">
        <cover-image class="coverImg" src="QHImage/iconScanBg.png"></cover-image>
        <cover-view class="moveLine" animation="{{animation}}"></cover-view>
 </camera>
// 扫一扫 
scancode: function(e) {
        var that = this;
        var result = e.detail.result;
        if(result) {
            that.setData({
                scanResult: result,
                canScan: false
            });
            wx.setNavigationBarColor({
                backgroundColor: '#ffffff',
                frontColor: '#000000'
            });
        }
        that.setData({
            show:result
        })

        // 扫码震动
        /*wx.vibrateShort({
            type: 'heavy'
        })*/
        // 播放音乐
        //that.playMusic()
 },

wx.scanCode(）使用方法识别，点击扫描时候，会进入一个全屏识别扫描页面，该页面不可控，也不能在里面加入自定义样式等。

camera使用方法识别，可以自定义页面布局及样式，但初次未授权时候，会提示打开手机相机才行，不然将不会进行。