微信小程式|掃一掃功能實現
- 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組件進行深度了解。
實習主編 | 王楠嵐
責 編 | 吳怡辰