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

  • 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組件進行深度了解。

實習主編 | 王楠嵐

責 編 | 吳怡辰