纯H5实现扫码：浏览器扫码

纯H5实现扫码：浏览器扫码
直接上代码，拿去直接使用。此方案考虑了兼容了微信扫码（兼容微信须在微信环境中才可以使用，本案例是企业微信中运行的）。

注意：代码语法是基于react、Taro

1.首先安装"@zxing/library": “^0.19.1”
2.引入微信jdk（用于兼容微信环境扫码）

  <!-- 微信jdk：企业微信扫码需要 --><script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script><script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>

3.页面引入

import { BrowserMultiFormatReader } from '@zxing/library'

4.按钮

<button className='scan-btn' onClick={ this.getSelectedDeviceId.bind(this) }>扫码</button>
<button onClick={ this.cancelScanCode.bind(this) }>取消扫码</button>

5.扫码 || 取消扫码逻辑

class Index extends Component {constructor(props) {super(props)this.state = {isShowVideo: false, // 是否显示video:video用于获取视频流expressCode: '' // 扫码结果}}componentDidShow() {this.wxAuth() // 微信权限验证}// 微信权限验证wxAuth = async () => {// 获取微信验证配置信息let { data } = await post('applet/vx/authorize/getWechatAuthAttr')({app:'api/operation',data: { scanUrl: `${ location.href.split('#')[0] }` }})wx.config({beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: data.data.corpId, // 必填，企业微信的corpIDtimestamp: data.data.timestamp, // 必填，生成签名的时间戳nonceStr: data.data.nonceStr, // 必填，生成签名的随机串signature: data.data.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: ['scanQRCode', 'chooseImage', 'invoke'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来})wx.error( function (res) {Taro.showToast({ title: JSON.stringify(res) || `请求失败`, icon: "none", duration: 3000 })})}// 扫码：获取设备信息getSelectedDeviceId () {try {this.setState({ isShowVideo: true })let selectedDeviceIdconst codeReader = new BrowserMultiFormatReader()codeReader.getVideoInputDevices().then( (videoInputDevices) => {selectedDeviceId = videoInputDevices[0].deviceIdif (videoInputDevices.length > 1) selectedDeviceId = videoInputDevices[1].deviceIdthis.scanCodeAction(codeReader, selectedDeviceId)}).catch( () => {this.scanCodeByWx()})} catch (err) {this.scanCodeByWx()}}// 扫码：执行扫码scanCodeAction (codeReader, selectedDeviceId) {codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then( (result) => {let txt = result.textif (txt.includes('selfFetch')) txt = txt.split('selfFetch')[1]this.setState({ expressCode: txt, isShowVideo: false })codeReader.reset()}).catch((err) => console.error('扫码出错*****', err))}// H5扫码失败，调用微信JDK进行扫码scanCodeByWx () {wx.ready( () => {wx.checkJsApi({jsApiList: ['scanQRCode', 'chooseImage', 'invoke'], // 需要检测的JS接口列表，所有JS接口列表见附录2,success: res => {// 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}console.log('校验结果res', res)}})wx.scanQRCode({desc: 'scanQRCode desc',needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是条形码（一维码），默认二者都有success: res => {// 扫码后的后续动作this.setState({ expressCode: res.resultStr, isShowVideo: false })},error: res => {if (res.errMsg.indexOf('function_not_exist') > 0) alert('版本过低请升级')}})})}// 取消扫码cancelScanCode () {const codeReader = new BrowserMultiFormatReader()this.setState({ isShowVideo: false })codeReader.reset()}
}

纯H5实现扫码：浏览器扫码相关推荐

php联图生成二维码浏览器扫可以到页面，但是QQ或微信扫直接显示链接
$_SERVER['SERVER_NAME'] 如果用这个获取当前运行脚本所在服务器的主机名.如果脚本运行于虚拟主机中,该名称就由那个虚拟主机所设置的值决定.如果你是用改方法获取的不可以,只有把域名写 ...
H5页面在微信浏览器中打开，右上角没有出现三个点
在发现问题的日期2020/09/23,微信好像出现了纯H5页面在微信浏览器中打开右上角没有三个点,经过同文件更换多个服务器和域名测试,发现可能是由于打开的域名的没有备份,现在正在走备案流程,出现问题换 ...
h5 实现扫码二维码及条形码（js多种实现方式）
方式一. 只识别二维码实现方式一 jsQR 个人预览页面网址只扫码二维码 GitHub jsQR inde.html <!DOCTYPE html> <html><he ...
扫一扫解析二维码的多种解决方案
一.微信扫一扫提到扫一扫,大家都很熟悉微信扫一扫吧,那微信扫一扫怎么接入的呢?当然这个肯定是看微信开放平台开放的api接口咯! https://mp.weixin.qq.com/wiki?t=res ...
如何把视频转换生成二维码，扫码直接播放？
如何把自己的视频生成二维码,扫一扫二维码,就能直接观看视频?还有,最好不要有任何广告? 能实现吗?能!用酷播云视频二维码,一键搞定! 官网地址:http://www.cuplayer.com/clou ...
JAVA 实现扫码二维码登录
最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...
C(++) Websocket实现扫码二维码登录---GoEasy
最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...
node.js 实现扫码二维码登录
最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...
如何实现扫码登陆扫码登陆原理
如何实现Web端扫码登陆本文载录自博文:用户认证.权限.安全原理详解原文地址: https://blog.csdn.net/qq_28550263/article/details/12213876 ...
腾讯游戏王者荣耀扫码登录源码
腾讯游戏王者荣耀扫码登录源码 1.什么是扫码登录? 所谓扫码登录,就是使用微信扫码后跳转授权游戏,微信比较敏感,隐私比较多,所以这款技术完美的解决了不上微信也能登录游戏. 2.如何使用? 上号者:请使 ...

纯H5实现扫码：浏览器扫码

纯H5实现扫码：浏览器扫码相关推荐

最新文章

热门文章