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

这篇具有很好参考价值的文章主要介绍了前端怎么从H5调起微信扫描二维码?小程序使用扫码功能.。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

wx.scanCode(Object object)

参数

属性

类型

默认值

必填

说明

最低版本

onlyFromCamera

boolean

false

否

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

1.2.0

scanType

Array.<string>

['barCode', 'qrCode']

否

扫码类型

1.7.0

合法值	说明
barCode	一维码
qrCode	二维码
datamatrix	Data Matrix 码
pdf417	PDF417 条码

success

function

否

接口调用成功的回调函数

fail

function

否

接口调用失败的回调函数

complete

function

否

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

返回值

属性

类型

说明

result

string

所扫码的内容

scanType

string

所扫码的类型

合法值	说明
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	一维码

charSet

string

所扫码的字符集

path

string

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

rawData

string

原始数据，base64编码

如何使用呢？

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

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

这里就是我需要的快递单号

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

1.引入`jweixin-1.6.0`JS-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'

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

2. 配置wx.config

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

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

2. 使用ready钩子函数

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

wx.ready(()=>{
// 方法体
})

3. 调用微信扫一扫`scanQRCode`

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

要在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)
          }
        }
      })
    })