問題：

在生活中時常需要用小程序掃描識別相應(yīng)的二維碼（不包含小程序二維碼），通過進入到相應(yīng)的小程序，然后調(diào)起手機的相機進行掃一掃。那么將會更加方便簡單的實現(xiàn)相應(yīng)的功能。生成普通的二維碼用weapp-qrcode.js來實現(xiàn)，識別二維碼用wx.scanCode(）或camera來實現(xiàn)，下面下面將會介紹實現(xiàn)步驟，也會介紹用識別這兩種方法的優(yōu)缺點。

例如：廠庫的獲取，用來掃一掃就不需要輸入相應(yīng)的編碼規(guī)格直接就可以找到相應(yīng)的商品，簡單又高效

實現(xiàn)方法：

一、生成普通的二維碼。

實現(xiàn)方法：通過引用weapp-qrcode.js來生成相應(yīng)的二維碼。如下所示

?

?

?（上面圖片作展示效果，不作過多樣式調(diào)整，需要的拿功能去慢慢優(yōu)化自己樣式）

下面作主要代碼介紹

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,
    });
    // 生成圖片，繪制完成后調(diào)用回調(diào)
    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,
            })
          })
        }
      }
    })
  }

二、識別二維碼（除微信的二維碼）。

?實現(xiàn)方法：通過引用wx.scanCode(）或camera來識別二維碼。如下所示

?（上面圖片作展示效果，不作過多樣式調(diào)整，需要的拿功能去慢慢優(yōu)化自己樣式）

下面作主要代碼介紹

方法一：
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使用方法識別，可以自定義頁面布局及樣式，但初次未授權(quán)時候，會提示打開手機相機才行，不然將不會進行。

總結(jié)：

需要的源代碼已經(jīng)放到資源文件里面，將資源下載即可使用，里面也包含掃描需要的微信聲音等。

資源下載文章來源地址http://www.zghlxwxcb.cn/news/detail-724249.html

到了這里，關(guān)于教你簡單搞定小程序掃一掃以及生成普通二維碼功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！