公众号开发-移动端h5页面调用微信扫一扫

前言:

大家好,我是前端小陈.今天为大家讲一下微信公众号开发,调用微信的JSSDK的案例.

前不久,接到这么一个需求:在H5网页实现扫一扫功能. 要求:微信端以及浏览器均可以实现扫一扫功能,而且不能用原生相机

第一次做这种需求,那肯定是很乐意的啦.能学到东西嘛.于是开始了我漫长的百度百度百度,导入试用.就这样过了一天~第二天经过多方问人之后,得到的结论是:三个解决方案.

调用微信扫一扫
用百度的sdk(收费)
调用原生相机

经过跟老大以及产品一番讨论后,决定使用微信扫一扫来实现这个扫码的功能,下面我就开始就我在实现这个功能过程中遇到的问题,进行记录讲解

调用微信的东西,那必须的看官方文档必然!

快捷通道：微信开发文档

按照说明文档的使用方法:

第一步:绑定域名---登录公众号---设置与开发--功能设置--JS接口安全域名

第二步:引入js文件---自行百度

注意:引入的时候.遇到这么个问题.mian.js里面引入打印的方法,与页面引入打印出来的方法,有些有有些没有,百度得到的是有冲突.所以我使用的当前页面引入.

第三步:wx.config权限校验.

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

注意:这一步,里面的参数通过后端写的接口返回给你.切记:后端返回的数据一定要记得去微信提供的校验网站核验!!! 后端返回的签名必须与校验网站生成的签名一致才可以,切记!

附上代码:

_config() {var pageUrl = location.href.split('#')[0] // 页面地址this.$myRequest({url: 'getSignPackage',methods: 'get',header: {token: uni.getStorageSync('token')},data: {url: pageUrl}}).then(res => {let config = res.data.datawx.config({// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: config.appId, // 必填，公众号的唯一标识timestamp: config.timestamp, // 必填，生成签名的时间戳nonceStr: config.nonceStr, // 必填，生成签名的随机串signature: config.signature, // 必填，签名jsApiList: ['checkJsApi', 'scanQRCode'] // 必填，需要使用的JS接口列表});wx.error(function(res) {alert('出错啦====' + res.errMsg)})wx.ready(function() {wx.checkJsApi({jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,success: function(res) {}})})})}

解释一下:

pageUrl:当前页面地址,是需要做参数传回给后台的

config :是请求第三方接口(后端写的接口)用config 来接收这个返回的对象

--记得校验签名~~~

wx.config里面的参数拿到之后,调用wx.ready这个方法去校验, wx.checkJsApi 这个是做检验上面所需要调用微信的js接口检测的

第四步：调用微信扫一扫

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

直接通过点击事件去唤起这个扫一扫，附上我的代码

//点击调起微信扫一扫openCaream() {this.userData = JSON.parse(uni.getStorageSync('userData'))const screener_id = this.userData.parent_idwx.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: function(res) {var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果console.log('返回的参数===',result)var arr = result.split('?')const data = arr[1].split('&')const student_id = data[0].split('=')[1]const plan_id = data[1].split('=')[1]getApp().globalData.student_id =student_idgetApp().globalData.plan_id = plan_iduni.navigateTo({url: '/pages/screening/screeningDetails'})getApp().globalData.flag = true},error: function() {console.log('123')}})}

附上个视频有视频有真相

公众号开发-移动端h5页面调用微信扫一扫相关推荐

H5页面调用微信支付
1.H5页面使用微信支付,首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名.支付功能页面需在此域名链接下的页面. 2.加入域名后,就 ...
微信公众号、内嵌H5字体受微信字体大小影响问题的解决方案
微信公众号.内嵌H5字体受微信字体大小影响问题的解决方案,代码也是之前网上找的,现在记录一下 //微信公众号禁止设置老年字体 ;(function() {if (typeof WeixinJSBrid ...
微信公众号开发移动端应用
目录 1 基于手机API开发 2 基于手机浏览器开发 2.1 混合开发 3 微信公众号开发 3.1 帐号分类 3.2 注册帐号 3.3 自定义菜单 3.4 上线要求 1 基于手机API开发手机端使用 ...
微信公众号开发笔记（三）：微信JSAPI支付功能开发
很久之前做了微信支付,其中也趟过很多坑,现在有时间就做个自我梳理吧算是. 公众号开发的基本配置(不明白的可以参考https://blog.csdn.net/TOP__ONE/article/detai ...
微信公众号开发笔记（二）：微信分享接口实现和问题
上篇文章写到了公众号开发的基本配置(不明白的可以参考https://blog.csdn.net/TOP__ONE/article/details/78183209),这里继续写微信分享接口功能代码实现 ...
微信公众号开发小记——4.两种邀请用户的方式扫码链接
描述假设的我们的服务号有这么一些功能,比如底部有按钮,点击会有一些复杂的功能,这时候可能就需要一个用户系统,有用户系统就经常想要做什么分享邀请新用户之类的,这时候就又有几种方式,1.直接一个连接,让 ...
微信公众号开发（１）－－微信公众平台与后台服务器
一.前言今天开始整理一下前面两个月关于微信公众号开发的学习,鉴于本人是边学习边总结,故错误与不足之处还望包涵.鉴于很多例如购买服务器.搭建服务器等大条的操作就不展开叙述了. 本博文主要包涵以下内容: ...
公众号开发素材管理，php删除微信素材
微信开发的素材管理中, 由于临时素材3天后, 微信服务器会自动删除, 所以这一节课程中的删除素材功能, 只针对微信的永久素材- 公众号开发删除素材管理视频教程在线观看 http://edu.csdn. ...
基于python的微信公众号开发教程_基于python的微信公众号开发教程
应广大python学员的期盼,九宝老师精心制作的"基于python的微信公众号开发"视频教程即将上线. 该课程秉承九宝培训一贯的"简单.高效.快速"的讲课原则, ...

公众号开发-移动端h5页面调用微信扫一扫

公众号开发-移动端h5页面调用微信扫一扫相关推荐

最新文章

热门文章