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

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调起微信扫描二维码?

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

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

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

  1. 实习记录(H5页面)微信扫描二维码登陆注册,随后跳转浏览器。实现

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1.微信跳转至浏览器,按钮样式与触发弹窗改变? 2.安卓与ios的下载***app 3.解析url,获取地址栏携带的参数 4 ...

  2. 前端如何实现微信扫描二维码下载应用,根据手机系统跳转不同页面

    菜花记录 前端如何实现微信扫描二维码下载应用,根据手机系统跳转不同页面 需求 :由于微信扫码无法直接下载需要再跳转到浏览器下载,所以微信扫码页面添加背景图和相关提示 草料二维码生成器地址 整改之前: ...

  3. 微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面

    实现微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面 而进入商城下载该项目 详情地址:gitee.com/DuJiaHui123- 1.创建完之后 替换文件里面的ios ...

  4. 微信扫描二维码在内置浏览器打不开文件的下载链接怎么办?哪些api接口可以解决...

    有哪些api接口可以实现微信扫描二维码在内置浏览器打开文件的下载链接? 经常看到贴吧上有人吐槽微信的检测系统太严格了,动不动就拦截第三方链接.怎么才能解决,怎么才能避免等等一系列的问题.因为平时我也会 ...

  5. iOS 模仿微信扫描二维码放大功能

    我们知道,微信扫描二维码过程中,如果二维码图片焦距比较远,会拉近焦距,实现放大功能.这种效果如何该实现,用原生的API又是如何实现.本文简单尝试如何使用AVFoundation实现放大二维码图片.重点 ...

  6. 微信扫描二维码-电脑上网

    展视网北京科技有限公司--cuidc 由于 wifi 成为人们生活中不可或缺的一部分,店家 wifi 免费上网的招数也就日益增多. 今天我们介绍一种破解<微信扫描二维码上网>的招数,此招数 ...

  7. 使用电脑微信扫描二维码

    使用电脑微信扫描二维码 将二维码图片发送至文件传输助手 在与文件传输助手的聊天界面点开图片,右键,点击识别图中二维码即可 扫描完成.

  8. 微信扫描二维码快速登录网站

    在近期的一个项目中用到了微信扫描注册.登录网站功能所以整理了下希望对读者有帮助. 首先,你需要有一个没有绑定微信.微信公众平台的邮箱注册成为微信开放平台开发者,在管理中心创建移动应用.或者网站应用获得 ...

  9. 微信扫描二维码跳转至浏览器打开 jsp

    微信扫描二维码总是用默认浏览器打开,无法下载任何东西.怎么办呢? 微信识别到打开为pdf 时,会自动给跳转至浏览器,所以解决方法就是服务器判断请求端为微信时,返回头部添加 Content-type:a ...

最新文章

  1. 防静电塑料包装袋周围的静电场
  2. arthas 排查内存溢出_小学妹问我:如何利用可视化工具排查问题?
  3. CRF用过了,不妨再了解下更快的MEMM?
  4. php多个构造方法,php多构造器的实例代码
  5. flask从html中页面重定向,如何在成功登录后才将用户重定向到所需的HTML页面(flask python应用程序)?...
  6. PHP___过期header expires
  7. WebRAY权小文:产品就是工程师的尊严
  8. 用Java Swing山寨QQ空间的魔法卡片游戏
  9. java groovy 表达式_Groovy的基础语法
  10. 灵隐寺高僧汇报 “数字化寺院” 方案,走红网络! “系统可用性” 随缘、KPI 随心?...
  11. Xiph基金会成员:Timothy B. Terriberry
  12. Gos —— 开启中断与中断机制详解
  13. ⭐李宏毅2020作业2---logistic regression
  14. 【替罪羊树及其应用】替罪羊树总结
  15. css3风吹树叶,纯CSS3实现的树叶形状和飘落动画
  16. 主成分回归预测matlab,科学网—Matlab: princomp() 主成分分析 - 杨建功的博文
  17. 台式机是计算机进入睡眠状态,电脑如何进入睡眠状态_电脑如何设置自动睡眠...
  18. 苹果手机无法加载抖音短视频的网络监测分析
  19. 智能家居改装方案学习笔记【双控灯改智能单控灯】2022.05.08
  20. harbor安装时出现ERROR: An HTTP request took too long to complete. Retry with --verbose to obtain debug in

热门文章

  1. [JavaScript高级程序设计]JavaScript介绍
  2. http1 http2 http 3 区别
  3. ESP32 + ESP-IDF |GPIO 02 - 使用高分辨率定时器,每100ms时间间隔驱动外部两个LED灯闪烁
  4. C、C++、java的区别
  5. 云服务器-异地部署集群服务-Kubernetes(K8S)-网络篇
  6. Dev c++无法新建项目解决方法
  7. 微信域名防封的方法以及技术原理
  8. 高分辨率卫星影像建筑物变化检测
  9. SpringCloud版本介绍
  10. UGUI实现Joystick