H5页面调用扫一扫功能

想要实现H5页面调用微信扫一扫功能，必须先了解微信JS-SDK接口

企业号开发接口文档地址：https://qydev.weixin.qq.com/wiki/index.php?title=%E9%A6%96%E9%A1%B5

我们来看下使用的大概步骤

1、在页面引入js文件http://res.wx.qq.com/open/js/jweixin-1.2.0.js

2、通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，企业号的唯一标识，此处填写企业号corpidtimestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名，见附录1jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

3、通过ready接口处理成功验证

wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个
客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

4、通过error接口处理失败验证

wx.error(function(res){// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

5、接口调用说明

所有接口通过wx对象来调用，有以下通用参数：

（1）success：接口调用成功的回调

（2）fail：接口调用失败的回调

（3）complete：接口调用完成时执行，不论失败或成功都执行

（4）cancel：用户点击取消时执行

（5）trigger：监听Menu中的按钮点击时触发的方法

6、项目实例：

<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><script src="../../js/jweixin-1.3.2.js"></script></head><body><button v-on:click="scan()">扫描二维码</button><script>......doconfig() {let url = location.href.split('#')[0];let params = {url: encodeURIComponent(url),jsApiList: ['scanQRCode']}this.$http.post(this.baseUrl + '/api/wechat/jssdk', params, {headers: {Authorization: this.token}}).then(function (res) {let data = JSON.parse(res.body.message);wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,测试完成后需要关闭。appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名（加密后，下文有实现）jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，开发文档上有所有接口名称，根据需要选用就好。});}, function () {console.log('请求失败处理');});},scan() {this.doconfig();let that = this;wx.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有success: function (res) {var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果that.putscan(res.resultStr)}});},</script></body>
</html>

H5页面调用扫一扫功能相关推荐

微信内嵌h5页面调用拍照和相册功能？
有一个问题: 在微信内嵌h5页面中通过input调用摄像头,ios既可以调用摄像头也可以选择相册,但android只能选择相册,按照网上的兼容性(就是根据capture属性的有无)做了处理后,依然不行 ...
h5页面调用用户手机打电话功能以及复制内容到剪切板
通过配合vant的面板组件实现该功能: 在index.html中添加meta标签:<meta name="format-detection" content="te ...
H5页面调用微信支付
1.H5页面使用微信支付,首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名.支付功能页面需在此域名链接下的页面. 2.加入域名后,就 ...
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
关于app内嵌h5页面调用百度地图定位问题，为什么定位不准呢？
关于app内嵌h5页面调用百度地图定位问题,为什么定位不准呢?以下为代码. 百度地图:里面有3种定位方式(a:浏览器定位,b:IP定位,c:定位SDK辅助定位),我选择第3种,是需要app那块添加些什 ...
H5页面使用qq客服功能
H5页面使用qq客服功能 pc端和移动端使用QQ在线客服进行聊天的一些坑和解决方案 tx官方通讯组件注册: 遇到的问题: 解决方案: pc端和移动端使用QQ在线客服进行聊天的一些坑和解决方案最近有一 ...
IOS系统中H5页面实现摇一摇功能
公司准备开年会了,年会活动用了一套别人的系统,根据测试,有些游戏的摇一摇功能在IOS上无法使用,为了修复该功能,踩了一些坑,特此记录如下: 1. 因为IOS系统的安全要求,项目必须是在https的域名 ...
公众号开发-移动端h5页面调用微信扫一扫
前言: 大家好,我是前端小陈.今天为大家讲一下微信公众号开发,调用微信的JSSDK的案例. 前不久,接到这么一个需求:在H5网页实现扫一扫功能. 要求:微信端以及浏览器均可以实现扫一扫功能,而且不能 ...
HTML——微信浏览器H5页面调用微信扫一扫
使用JS-SDK调用微信扫一扫,需要有公众号支持,通过公众号生成JS-SDK使用权限签名.本文直接调用已封装好的接口来获取随机数(noncestr).时间戳(timestamp).签名(signatu ...
企业微信引入微信api扫一扫（vue）【h5页面调用微信jssdk】
引入(两种方式) (1)第一种方式 <script type="text/javascript" src="http://res.wx.qq.com/open/js ...

H5页面调用扫一扫功能

H5页面调用扫一扫功能相关推荐

最新文章

热门文章