微信小程序|扫一扫功能实现

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

实习主编 | 王楠岚

责 编 | 吴怡辰