複数のページを作成した後、QR コードのスキャンなどの他の機能をミニ プログラムに追加してみました。
1. QR コード生成 Web サイトで、QR コードまたはバーコードの写真を生成します。
生成された Web サイトは、Baidu の「QR コード生成」を使用して見つけることができます。ここでは、「2023 年の調子はどうですか」の数字とテキストを使用して次の QR コードを生成し、その後のコード スキャンとテストのためにローカルに保存します。
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>
この時点では、「QR コードのスキャン」ボタンをクリックしても効果はありません。構造ファイルに QR コードのスキャン コンポーネントを追加しただけで、「「QR コードのスキャン」ボタンをクリックする」イベントの対話型定義は行っていないためです。
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)コンパイルが成功したら、WeChat 開発者ツール インターフェイスの [コードをスキャン] ボタンをクリックしてローカル フォルダーを開き、以前に保存した QR コード画像「2023 How Are You」を選択すると、ミニ プログラム インターフェイスに次の結果が表示されます。
WeChat 開発者ツール インターフェイスで効果をテストすることに加えて、実機デバッグを選択し、携帯電話を使用して効果をテストすることもできます。この結果は、携帯電話テストでも同様の効果があることを示しています。
参考文献:
https://cloud.tencent.com/developer/article/1360040
http://www.manongjc.com/detail/52-orpllzamyctwnte.html