（三）运行微信小程序：在主页加入扫码组件

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

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