微信小程式|掃一掃功能實現

• 2020 年 2 月 14 日
• 筆記

歡迎點擊「演算法與編程之美」↑關注我們！

本文首發於微信公眾號："演算法與編程之美"，歡迎關注，及時了解更多此系列文章。

問題描述

如何實現掃一掃功能？

如何添加手機中的圖片文件進行掃碼？

日常生活中，需要掃描二維碼的地方隨處可見，而如何讓小程式實現掃一掃的功能呢？這就需要對js進行一個配置。

解決方案

（1）在wxml中進行頁面簡單配置，只需要view標籤和button標籤。但需要引入image的圖片。

表1 wxml程式碼示例

<view>   <image src="{{img}}"  bindtap="img"></image>   <button type="primary" bindtap="scan"  id="scan">掃一掃</button></view>

（2）js中的配置，需要將數據引入

表2 js程式碼示例

let app = getApp();Page({   data: {     img: "/images/1.jpg"   },   onLoad() {   },   scan() {     wx.scanCode({       success: (res) => {         console.log("掃碼結果");         console.log(res);         this.setData({           img: res.result         })       },       fail: (res) => {         console.log(res);       }     })  }})

（3）掃一掃效果展示圖

圖1 掃一掃效果圖

結語

要實現掃一掃功能，目前只有添加本地文件中的圖片進行掃碼來實現，如需實現打開相機的功能，還需對camera組件進行深度了解。

實習主編 | 王楠嵐

責 編 | 吳怡辰