• 前端怎么从H5调起微信扫描二维码?小程序使用扫码功能.


    小程序如何使用扫码的功能呢?

    wx.scanCode(Object object)

    参数

    属性类型默认值必填说明最低版本
    onlyFromCamerabooleanfalse是否只能从相机扫码,不允许从相册选择图片1.2.0
    scanTypeArray.['barCode', 'qrCode']扫码类型1.7.0
    合法值说明
    barCode一维码
    qrCode二维码
    datamatrixData Matrix 码
    pdf417PDF417 条码
    successfunction接口调用成功的回调函数
    failfunction接口调用失败的回调函数
    completefunction接口调用结束的回调函数(调用成功、失败都会执行)

    返回值

    属性类型说明
    resultstring所扫码的内容
    scanTypestring所扫码的类型
    合法值说明
    QR_CODE二维码
    AZTEC一维码
    CODABAR一维码
    CODE_39一维码
    CODE_93一维码
    CODE_128一维码
    DATA_MATRIX二维码
    EAN_8一维码
    EAN_13一维码
    ITF一维码
    MAXICODE一维码
    PDF_417二维码
    RSS_14一维码
    RSS_EXPANDED一维码
    UPC_A一维码
    UPC_E一维码
    UPC_EAN_EXTENSION一维码
    WX_CODE二维码
    CODE_25一维码
    charSetstring所扫码的字符集
    pathstring当所扫的码为当前小程序二维码时,会返回此字段,内容为二维码携带的 path
    rawDatastring原始数据,base64编码

    如何使用呢?

    我这里使用的是Taro,所以是Taro点出来的正常用wx点就可以了

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    这里就是我需要的快递单号

    怎么从H5调起微信扫描二维码?

    1.引入jweixin-1.6.0JS-SDK

    JS-SDK是什么东西?干嘛用的

      简单说一下 JS-SDK 的作用吧,微信 JS-SDK 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包,可以通过 JS-SDK 使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,要使用 JS-SDK 的第一步就是配置 wx.config 接口,不对第一步是引用 jweixin-1.6.0.js 文件,如果上述文件不可使用就下载这个 jweixin-1.6.0.js

    import wx from 'jweixin-1.6.0'
    
    • 1

    在这里插入图片描述

    2. 配置wx.config
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
      appId: '', // 必填,公众号的唯一标识
      timestamp: , // 必填,生成签名的时间戳(new Date().getTime() // 时间戳)
      nonceStr: '', // 必填,生成签名的随机串
      signature: '',// 必填,签名
      jsApiList: [] // 必填,需要使用的JS接口列表
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    jsApiList这个意思就是,我一打开微信小程序,需要用到那些接口,我可以直接调用的接口,如果不写的话,就调用不到了。

    2. 使用ready钩子函数

    ready:简单的理解一下就是打开微信小程序的时候,立刻执行ready里的方法

    wx.ready(()=>{
    // 方法体
    })
    
    • 1
    • 2
    • 3
    3. 调用微信扫一扫scanQRCode
    wx.scanQRCode({
      needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
      scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
      success: function (res) {
        var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
      }
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    要在ready钩子函数中调用scanQRCode

      wx.ready(function (e) {
          // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
          wx.scanQRCode({
            needResult: 1,
            scanType: ['barCode'], // 我这里只需要识别条码
            success: res => {
              let couponCode = res.resultStr.split(',')[1]
              if (Callback) {
                Callback(couponCode)
              }
            }
          })
        })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    还有什么问题可以评论私信我哦~~

  • 相关阅读:
    LeetCode 2562. 找出数组的串联值:模拟(双指针)
    品类超全的免费API接口整理分享
    iOS代码混淆教程
    PyQt5 不规则窗口的显示
    周四见|物流人的一周资讯
    Gateway 简介
    Tomcat配置敏感信息屏蔽
    上海臻图信息3DGIS+BIM技术助力智慧城市地下综合管廊建设
    论文阅读 TEMPORAL GRAPH NETWORKS FOR DEEP LEARNING ON DYNAMIC GRAPHS
    【算法】计算组合数的四种常用方法
  • 原文地址:https://blog.csdn.net/Youyzq/article/details/126890007