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

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

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

问题描述

如何实现扫一扫功能?

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

日常生活中,需要扫描二维码的地方随处可见,而如何让小程序实现扫一扫的功能呢?这就需要对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组件进行深度了解。

实习主编 | 王楠岚

责 编 | 吴怡辰