如何在小程序中实现扫一扫功能
原创
扫码，是现代生活不可或缺的一部分，不管是实现共享单车开锁，还是去自动售卖机付款，都需要扫码二维码或者条形码。那么，可不可以将扫码功能集成在小程序端呢？答案是可以的，我们可以调用小程序给出的扫码APIwx.scanCode()，实现调起客户端扫码界面进行扫码。
在教程开始之前，需要搭建搭建好小程序的基础开发环境，关于如何配置，大家可以参考如何入门小程序开发这篇文章的入门教程。
扫一扫API调用
因为我们要调用小程序的API，就不能像以前那样直接在index.wxml中写相关组件直接调用，我们可以通过一些组件，如view或button之类的组件来调用相关函数。首先，在index.wxml中写出下面的代码。
<button type="primary" bindtap="scanCode">扫码</button>我们新建一个按钮，当点击这个按钮的时候，执行scanCode函数，去调用wx.scanCode()API。关于wx.scanCode()API的使用，我们可以参考下表。
属性 | 类型 | 默认值 | 是否必填 | 说明 |
|---|---|---|---|---|
onlyFromCamera | boolean | false | 否 | 是否只能从相机扫码，不允许从相册选择图片 |
scanType | Array.<string> | ['barCode', 'qrCode'] | 否 | 扫码类型 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
接下来，我们撰写scanCode函数，打开index.js文件，然后在page()之间，写出下面的代码。
scanCode() {
},首先，我们新建sacnCode函数，接下来，调用wx.scanCodeAPI。参考上表，我们撰写如下代码，当接口调用成功，执行某个函数。
scanCode() {
wx.scanCode({
success(res) {
}
})
},我们可以通下表属性来确定我们在成功后应该执行什么函数。
属性 | 类型 | 说明 |
|---|---|---|
result | string | 所扫码的内容 |
scanType | string | 所扫码的类型 |
charSet | string | 所扫码的字符集 |
path | string | 当所扫的码为当前小程序的合法二维码时，会返回此字段，内容为二维码携带的 path |
rawData | string | 原始数据，base64编码 |
这里我想使用console.log将得到的数据打印在控制台，那么可以将代码写成这样。
scanCode() {
wx.scanCode({
success(res) {
console.log(res.result)
}
})
},这时，我们点击微信开发者工具的真机调试按钮，然后使用手机扫码二维码，如果你扫码二维码，控制台返回了二维码相关结果，证明配置成功。
扫一扫将数据返回前端
当然，我们还可以将扫描到的二维码数据返回到用户界面，可以使用下面的代码，首先修改index.wxml。
<view><text>你扫到的是{{scanType}}码</text></view>
<view><text>内容为：{{result}}</text></view>
<button type="primary" bindtap="scanCode">扫码</button>然后，修改index.js为下面内容。
scanCode() {
var myThis = this;
wx.scanCode({
success(res) {
myThis.setData({
result: res.result,
scanType: res.scanType
})
}
})
},
data: {
result:"等待扫描"
},
这行代码的意思是，通过setData将返回的数据赋值给result和scanType变量，然后通过index.wxml在前端展现出来。
我们还可以实现更高阶的玩法，比如扫描几张二维码，扫描出来的二维码对应小程序的某组数据，之后做显示。比如说这里有三张二维码图片，扫描出来数据分别为11111、22222、33333。
我们可以自定义这三张二维码給用户返回的数据，比如说扫描到11111显示一张狗狗的照片。扫描到22222显示一张猫咪的照片，扫描到33333显示一张鹦鹉的照片。我们可以使用switch语句来返回相关的照片。修改index.wxml代码如下。
<view><image src='{{src}}'></image></view>
<button type="primary" bindtap="scanCode">扫码</button>我们新建image组件，然后将src图片地址设为变量，等待index.js返回相关参数。接下来我们写逻辑部分，index.js代码如下。
scanCode() {
var myThis = this;
wx.scanCode({
success(res) {
switch (res.result) {
case "11111":
myThis.setData({
src: "https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/dog.jpg",
})
break;
case "22222":
myThis.setData({
src: "https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/cat.jpg",
})
break;
case "33333":
myThis.setData({
src: "https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/bird.jpg",
})
break;
default:
myThis.setData({
src: "https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/oops.jpg",
})
}
}
})
},现在，当我们扫描上面的二维码时，会自动显示猫、狗、鹦鹉的照片。而不是将扫描到是数据返回给用户。
总结
怎么样，你学会使用小程序进行扫描了嘛？文中我演示的只是基础的操作。如果再加上request操作，就可以实现像小程序扫描共享单车开锁之类的功能哦~快去尝试下吧！后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案，为开发者提供完整的云端支持，弱化后端和运维操作，使用平台原生 API 进行核心业务开发，实现快速上线和迭代。欢迎免费使用！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。