专栏首页小程序之家如何在小程序中实现扫一扫功能
原创

如何在小程序中实现扫一扫功能

扫码,是现代生活不可或缺的一部分,不管是实现共享单车开锁,还是去自动售卖机付款,都需要扫码二维码或者条形码。那么,可不可以将扫码功能集成在小程序端呢?答案是可以的,我们可以调用小程序给出的扫码APIwx.scanCode(),实现调起客户端扫码界面进行扫码。

在教程开始之前,需要搭建搭建好小程序的基础开发环境,关于如何配置,大家可以参考如何入门小程序开发这篇文章的入门教程。

扫一扫API调用

因为我们要调用小程序的API,就不能像以前那样直接在index.wxml中写相关组件直接调用,我们可以通过一些组件,如viewbutton之类的组件来调用相关函数。首先,在index.wxml中写出下面的代码。

<button type="primary" bindtap="scanCode">扫码</button>

我们新建一个按钮,当点击这个按钮的时候,执行scanCode函数,去调用wx.scanCode()API。关于wx.scanCode()API的使用,我们可以参考下表。

属性

类型

默认值

是否必填

说明

onlyFromCamera

boolean

false

是否只能从相机扫码,不允许从相册选择图片

scanType

Array.<string>

['barCode', 'qrCode']

扫码类型

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

接下来,我们撰写scanCode函数,打开index.js文件,然后在page()之间,写出下面的代码。

  scanCode() {
  },

首先,我们新建sacnCode函数,接下来,调用wx.scanCodeAPI。参考上表,我们撰写如下代码,当接口调用成功,执行某个函数。

  scanCode() {
    wx.scanCode({
      success(res) {
        
      }
    })
  },

我们可以通下表属性来确定我们在成功后应该执行什么函数。

属性

类型

说明

result

string

所扫码的内容

scanType

string

所扫码的类型

charSet

string

所扫码的字符集

path

string

当所扫的码为当前小程序的合法二维码时,会返回此字段,内容为二维码携带的 path

rawData

string

原始数据,base64编码

这里我想使用console.log将得到的数据打印在控制台,那么可以将代码写成这样。

  scanCode() {
    wx.scanCode({
      success(res) {
        console.log(res.result)
      }
    })
  },

这时,我们点击微信开发者工具的真机调试按钮,然后使用手机扫码二维码,如果你扫码二维码,控制台返回了二维码相关结果,证明配置成功。

扫一扫将数据返回前端

当然,我们还可以将扫描到的二维码数据返回到用户界面,可以使用下面的代码,首先修改index.wxml

<view><text>你扫到的是{{scanType}}码</text></view>
<view><text>内容为:{{result}}</text></view>
<button type="primary" bindtap="scanCode">扫码</button>

然后,修改index.js为下面内容。

scanCode() {
    var myThis = this;
    wx.scanCode({
      success(res) {
        myThis.setData({
          result: res.result,
          scanType: res.scanType
        })
      }
    })
​
  },
  data: {
    result:"等待扫描"
  },

这行代码的意思是,通过setData将返回的数据赋值给resultscanType变量,然后通过index.wxml在前端展现出来。

我们还可以实现更高阶的玩法,比如扫描几张二维码,扫描出来的二维码对应小程序的某组数据,之后做显示。比如说这里有三张二维码图片,扫描出来数据分别为111112222233333

我们可以自定义这三张二维码給用户返回的数据,比如说扫描到11111显示一张狗狗的照片。扫描到22222显示一张猫咪的照片,扫描到33333显示一张鹦鹉的照片。我们可以使用switch语句来返回相关的照片。修改index.wxml代码如下。

<view><image src='{{src}}'></image></view>
<button type="primary" bindtap="scanCode">扫码</button>

我们新建image组件,然后将src图片地址设为变量,等待index.js返回相关参数。接下来我们写逻辑部分,index.js代码如下。

  scanCode() {
    var myThis = this;
    wx.scanCode({
      success(res) {
        switch (res.result) {
          case "11111":
            myThis.setData({
              src: "https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/dog.jpg",
            })
            break;
          case "22222":
            myThis.setData({
              src: "https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/cat.jpg",
            })
            break;
          case "33333":
            myThis.setData({
              src: "https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/bird.jpg",
            })
            break;
          default:
            myThis.setData({
              src: "https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/oops.jpg",
            })
        }
      }
    })
  },

现在,当我们扫描上面的二维码时,会自动显示猫、狗、鹦鹉的照片。而不是将扫描到是数据返回给用户。

总结

怎么样,你学会使用小程序进行扫描了嘛?文中我演示的只是基础的操作。如果再加上request操作,就可以实现像小程序扫描共享单车开锁之类的功能哦~快去尝试下吧!后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案,为开发者提供完整的云端支持,弱化后端和运维操作,使用平台原生 API 进行核心业务开发,实现快速上线和迭代。欢迎免费使用!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何在 Windows 上搭建 PHP 网站

    PHP(全称:PHP:Hypertext Preprocessor,即“PHP:超文本预处理器”)是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HT...

    Dust
  • 前端学习(35)~js学习(十二):预编译

    规律1:任何变量,如果未经声明就赋值,此变量是属于 window 的属性,而且不会做变量提升。(注意,无论在哪个作用域内赋值)

    Vincent-yuan
  • [每日一题]偶数求和

    题目描述 有一个长度为n(n<=100)的数列,该数列定义为从2开始的递增有序偶数(公差为2的等差数列),现在要求你按照顺序每m个数求出一个平均值,如果最后不足...

    编程范 源代码公司
  • 机器学习在汽车中的应用:从大众今天扩建慕尼黑AI实验室说起

    大众集团日前宣布,将加大投资力度来加强其位于德国慕尼黑AI数据实验室的实力,专门致力于人工智能技术的研发。大众方面称,虽然目前正在削减内部开支,但作为IT计划的...

    AI科技评论
  • 【小家Java】你真的了解Java泛型参数吗?细说java.lang.reflect.Type(ParameterizedType、TypeVariable、WildcardType...)

    咋一看标题,你可能会说。不就是泛型吗,平时都使用着呢,没什么难的吧。 感觉了解了,但是真正的深入才知道自己了解甚少!

    YourBatman
  • 空洞卷积(dilated convolution)深入详解——优点与缺点

    三、空洞卷积的拯救之路:Dilated Convolution to the Rescue

    小草AI
  • 简单粗暴讲述自动化仓储系统(托盘类)

    自动化仓储系统,主要是通过现代技术手段代替人工作业的方式完成物料的存储,而不同的应用场景和存储工艺要求不同,即使是人工存储方式也有很大的不同,因此各种自...

    老King
  • 《Unet》论文阅读与

    上篇对FCN的论文解读提到,FCN的训练依赖大量数据,并且仍存在分割结果不精细的弱点。今天要说的Unet就是受到FCN启发针对医学图像做语义分割,且可以利用少量...

    BBuf
  • 基于深度学习的图像语义分割算法综述

    本文翻译自An overview of semantic image segmentation,原作者保留版权。

    机器学习算法工程师
  • CTF挑战130分 | Rickdiculously 1.0

    Vulnhub是一个提供各种漏洞环境的靶场平台,供安全爱好者学习渗透使用,大部分环境是做好的虚拟机镜像文件,镜像预先设计了多种漏洞,需要使用VMware或者Vi...

    FB客服

扫码关注云+社区

领取腾讯云代金券