【移动应用开发技术】微信公众号开发纪要(4)-调用微信扫一扫功能_第1页
【移动应用开发技术】微信公众号开发纪要(4)-调用微信扫一扫功能_第2页
【移动应用开发技术】微信公众号开发纪要(4)-调用微信扫一扫功能_第3页
免费预览已结束,剩余1页可下载查看

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

【移动应用开发技术】微信公众号开发纪要(4)-调用微信扫一扫功能

在微信公众号页面中调用微信扫一扫功能,就是调用微信JS-SDK。让JS-SDK完成调用摄像头扫描,然后我们将扫描结果进行业务操作。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。如何调用微信JS-SDK,在微信公众平台技术文档中的微信网页开发——》微信JS-SDK说明文档中有详细说明。调用微信JS-SDK需要五个步骤。步骤一:绑定域名步骤二:引入JS文件步骤三:通过config接口注入权限验证配置步骤四:通过ready接口处理成功验证步骤五:通过error接口处理失败验证1、绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注:登录后可在“开发者中心”查看对应的接口权限。点击提交后,会弹出配置成功的提示。这里特别提醒注意:填写域名时,不要带http://。

只要你带了,步骤三的权限验证肯定报错。会报URL配置的错误。2、引入JS文件在需要调用JS接口的页面引入如下JS文件,(支持https):/open/js/jweixin-1.2.0.js备注:支持使用AMD/CMD标准模块加载方法加载3、通过config接口注入权限验证配置所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web

app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web

app的页面会导致签名失败,此问题会在Android6.2中修复)。wx.config({

debug:true,//

开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

appId:'',//必填,公众号的唯一标识

timestamp:,//必填,生成签名的时间戳

nonceStr:

'',//必填,生成签名的随机串

signature:'',//必填,签名

jsApiList:[]//

必填,需要使用的JS接口列表});这个配置信息可以写在一个ajax内,在进入页面时首先执行,在后台将对应的信息全部获取,再返回给前端。前端页面代码:$.ajax({

type:"post",

url:"这里写你自己的请求地址”,

data:{},

success:function(data){

varresult=$.parseJSON(data);

wx.config({

debug:true,

appId:

result.appId,

//公众号的唯一标识

timestamp:

""+result.timestamp,

//生成签名的时间戳

nonceStr:result.noncestr,

//生成签名的随机串

signature:result.signature,

//签名

jsApiList:[

'scanQRCode']

//需要使用的JS接口列表(我只需要调用扫一扫的接口,如有多个接口用逗号分隔)

});

}});

后端代码就是生成签名。如何生成签名,微信公众号已经给出了官方例子。照着官方例子打一遍代码就行了。下载地址:/jssdk/sample.zip。这里特别强调的事情:生成签名的url一定是你调用JSSDK的页面url,不能是以前的URL。因为我后端是用springmvc实现的,写的时候没有重定向。虽然页面到了调用页面但URL还是原来的,所以总是报签名错误。测了很多次,才改过来。4、通过ready接口处理成功验证wx.ready(function(){

//config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,

//config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,

//

则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,

//则可以直接调用,不需要放在ready函数中。});

因为我是加载页面就调用微信扫一扫,所以将相关接口就放在了ready函数中。

wx.ready(function(){

document.querySelector('#scan').onclick=

function(){

wx.scanQRCode({

needResult:1,

//默认为0,扫描结果由微信处理,1则直接返回扫描结果,

scanType:["qrCode","barCode"],

//可以指定扫二维码还是一维码,默认二者都有

success:function(res){

//res.resultStr可以获得扫描结果。这里写自己的业务操作代码}

});

}

});

//res.resultStr可以获得扫描结果。这里写自己的业务操作代码}

});

}

});5、通过error接口处理失败验证wx.error(function(res){

//config信息验证失败会执行error函数,如签名过期导致验证失败,

//具体错误信息可以打开config的debug模式查看,

//也可以在返回的res参数中查看,对于SPA可以在这里更新签名。});wx.error(f

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论