IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 前端怎么从H5调起微信扫描二维码?小程序使用扫码功能. -> 正文阅读

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

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

wx.scanCode(Object object)

参数

属性类型默认值必填说明最低版本
onlyFromCamerabooleanfalse是否只能从相机扫码,不允许从相册选择图片1.2.0
scanTypeArray.<string>['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'

在这里插入图片描述

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

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

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-09-21 00:40:22  更:2022-09-21 00:41:32 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 4:57:31-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码