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

算法与编程之美

发布于 2020-02-14 12:07:25

3.9K0

发布于 2020-02-14 12:07:25

文章被收录于专栏：算法与编程之美

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

如何实现扫一扫功能？

如何添加手机中的图片文件进行扫码？

日常生活中，需要扫描二维码的地方随处可见，而如何让小程序实现扫一扫的功能呢？这就需要对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);       }     })  }})