微信小程序 扫码技术调研

微信小程序 扫码技术调研

1.微信小程序扫一扫的功能实现

参考：官方文档：调起客户端扫码界面进行扫码

其实很简单，文档之中也一目了然，还是忍不住写了个小的简单的demo：

wxml部分：

<view class="container">
  <button bindtap='getScancode'>绑定车辆</button>
  <view wx:if="{{result !=''}}">
    <view>扫码的内容:{{result}}</view>
  </view>
</view>

JS部分：

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    result: ''
  },
  onLoad: function() {
  },
  getScancode: function() {
    var _this = this;
    // 允许从相机和相册扫码
    wx.scanCode({
      success: (res) => {
        var result = res.result;
        _this.setData({
          result: result,
        })
      }
    })
 
  }
})

在电脑上的效果是这样的：

选择需要识别的二维码识别即可获取二维码中的内容:

以下是手机上的演示：

可以扫描当前屏幕也可从相册读取

备注：如何手动生成二维码图片

草料二维码

2.微信小程序微信二维码生成实现

 

首先，在wxml中写入需要展示二维码的canvas

WXml代码如下：

<canvas canvas-id='canvas'></canvas>

然后去Git上下载qrcode中的util，并在需要使用的js中引入

JS代码如下：

var QRCode = require('../../utils/weapp-qrcode.js');

然后再函数中new一个QRCode的对象

JS代码如下：

qrcode = new QRCode('canvas', {   //'canvas'为html中定义的canvas-id
      text: "https://aaaaa/login",
      width: 150,       // 二维码宽度
      height: 150,        // 二维码高度
      colorDark: "#000000",    //设置二维码双色
      colorLight: "#ffffff",    //设置二维码双色
      correctLevel: QRCode.CorrectLevel.H,    //容错级别
    });

备注：其中text中的内容即是核销券所对应的Code，也可以是一个链接

 

运行代码即可生成可扫二维码

备注：weapp-qrcode.js下载地址