(三)运行微信小程序:在主页加入扫码组件

制作了多个页面后,我们试图在小程序中添加些其他功能,比如实现扫码功能。

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

猜你喜欢

转载自blog.csdn.net/qq_38250687/article/details/130593072
今日推荐