如何在微信小程序里添加扫二维码功能
扫码,是现代生活不可或缺的一部分,不管是实现共享单车开锁,还是去自动售卖机付款,都需要扫码二维码或者条形码。那么,可不可以将扫码功能集成在小程序端呢?答案是可以的,我们可以调用小程序给出的扫码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.scanCode
API。参考上表,我们撰写如下代码,当接口调用成功,执行某个函数。
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 进行核心业务开发,实现快速上线和迭代。欢迎免费使用!
推荐阅读
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
如何在微信小程序中启用无缝扫码功能(使用uniapp开发)
-
如何在微信小程序里添加扫二维码功能
-
如何在微信小程序中实现快速扫码功能 (以 Uni-app 为例)
-
如何在微信小程序中添加车牌输入功能?