微信小程序 扫码技术调研
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,也可以是一个链接
运行代码即可生成可扫二维码