制作了多个页面后,我们试图在小程序中添加些其他功能,比如实现扫码功能。
1. 在二维码生成网站上,生成一张二维码或条形码照片。
百度“二维码生成”即可找到生成网站,这里我们使用“2023你好吗”数字加文字的形式生成如下二维码,并保存到本地,供后续扫码测试使用。
2. 修改index.wxml文件。
(1) 将index.wxml原有内容清空大部分,仅保留为以下内容。
<!--index.wxml-->
<view class="container">
</view>
(2) 在第3行插入以下内容。
<button type="primary" bindtap="scanCode">扫码</button>
<view><text>你扫到的是{{scanType}}码</text></view>
<view><text>内容为:{{result}}</text></view>
这时单击“扫码”按钮,并没有什么效果,因为我们只是在结构文件中加入了扫码组件,但没有对”单击’扫码’按钮”这个事件做任何交互上的定义。
3. 修改index.js文件。
(1) 将index.js原有内容清空大部分,仅保留为以下内容。
// index.js
// 获取应用实例
const app = getApp<IAppOption>()
Page({
})
(2) 在第6行插入以下内容。
scanCode() {
var myThis = this;
wx.scanCode({
success(res) {
myThis.setData({
result: res.result,
scanType: res.scanType
})
}
})
},
data: {
result:"等待扫描"
}
(3) 编译成功后,在微信开发者工具界面单击“扫码”按钮,将打开本地文件夹,选择之前保存的二维码图片“2023你好吗”,小程序界面将显示以下结果。
除了在微信开发者工具界面测试效果,还可以选择真机调试,使用手机来测试效果。结果表明手机测试效果相同。
参考文献:
https://cloud.tencent.com/developer/article/1360040
http://www.manongjc.com/detail/52-orpllzamyctwnte.html