微信小程序> 微信公众号开发之调起微信扫一扫接口-微信扫一扫开发-微信小程序扫一扫功能

微信公众号开发之调起微信扫一扫接口-微信扫一扫开发-微信小程序扫一扫功能

浏览量:1321 时间: 来源:一个懒惰的羊
1.

参考微信JS-SDK说明文档看到网上很多都说微信的说明文档很坑,在我看来,仔细阅读的话,介绍还是很全的。

2.

1.首先在JSP页面引入http://res.wx.qq.com/open/js/jweixin-1.1.0.js

3.

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

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

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

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

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

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

5.调起微信扫一扫

wx.scanQRCode({desc:'scanQRCodedesc',needResult:0,//默认为0,扫描结果由微信处理,1则直接返回扫描结果,scanType:["qrCode","barCode"],//可以指定扫二维码还是一维码,默认二者都有success:function(res){//回调}error:function(res){if(res.errMsg.indexOf('function_not_exist')0){alert('版本过低请升级')}}});7.

具体代码实现如下:

8.

scanBarcode.jsp

!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"htmllang"zh-CN"metacharset"utf-8"metahttp-equiv"X-UA-Compatible"content"IEedge"metaname"viewport"content"width320.1,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno"headlinkrel"stylesheet"href"http://203.195.235.76/jssdk/css/style.css"/scriptsrc"http://res.wx.qq.com/open/js/jweixin-1.1.0.js"/scriptscriptsrc"http://libs.baidu.com/jquery/2.0.0/jquery.js"/scriptlinkrel"stylesheet"href"../../../resources/css/example.css"/linkrel"stylesheet"href"../../../resources/css/weui.min.css"/linkrel"stylesheet"href"../../../resources/css/borrowScan.css"//headbodydivclass"container"style"text-align:center;"divclass"body_bdbody_fd"aclass"weui-btnweui-btn-primaryweui-btn-zdy"id"scanQRCode1"p扫描条码/p/a/div/divscripttype"text/javascript"$.ajax({url:"${pageContext.request.contextPath}/wechat/jsapisign",type:"post",data:{url:location.href.split('#')[0]},contentType:'application/x-www-form-urlencoded;charsetutf-8',async:true,success:function(data){wx.config({debug:false,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId:data.appid,//必填,公众号的唯一标识timestamp:data.timestamp,//必填,生成签名的时间戳nonceStr:data.nonceStr,//必填,生成签名的随机串signature:data.signature,//必填,签名,见附录1jsApiList:["scanQRCode"]//必填,需要使用的JS接口列表,所有JS接口列表见附录2});}});wx.ready(function(){//9.1.2扫描二维码并返回结果document.querySelector('#scanQRCode1').onclickfunction(){wx.scanQRCode({needResult:1,desc:'scanQRCodedesc',success:function(res){//扫码后获取结果参数赋值给Inputvarurlres.resultStr;//商品条形码,取","后面的if(url.indexOf(",")0){vartempArrayurl.split(',');varbarCodetempArray[1];window.location.href"https://open.weixin.qq.com/connect/oauth2/authorize?appid${appId}redirect_uri${basePath}/wechat/toBookDetail?barCode"+barCode+"response_typecodescopesnsapi_basestateBINDFACE#wechat_redirect";}else{alert("请对准条形码扫码!");}}});};});//初始化jsapi接口状态wx.error(function(res){alert("调用微信jsapi返回的状态:"+res.errMsg);});/script/body/html9.

微信验签代码WxController.java

/***微信验签*@paramurl*@return*/@RequestMapping(value"/jsapisign",method{RequestMethod.GET,RequestMethod.POST},producesMEDIATYPE_CHARSET_JSON_UTF8)@ResponseBodypublicStringjsApiSign(Stringurl){//添加微信js签名信息MapString,StringsignMapWXJsapiticket.jsApiSign(url);returnJSON.toJSONString(signMap);}10.

用到的方法类

11.

WXJsapiticket.java

publicclassWXJsapiticket{privatestaticLoggerloggerLoggerFactory.getLogger(WxController.class);/***微信jsapi验签*@paramurl*@return*/publicstaticMapString,StringjsApiSign(Stringurl){MapString,StringretnewHashMapString,String();Stringnonce_strCheckUtil.create_nonce_str();StringtimestampCheckUtil.create_timestamp();Stringjsapi_ticketgetJsApiTicket();Stringstring1CheckUtil.getString1(nonce_str,timestamp,jsapi_ticket,url);StringsignatureCheckUtil.getSha1(string1);ret.put("appid",WXConstants.APPID);//取你自己的公众号appidret.put("url",url);ret.put("jsapi_ticket",jsapi_ticket);ret.put("nonceStr",nonce_str);ret.put("timestamp",timestamp);ret.put("signature",signature);logger.info("jsApiSign------url"+url+"-----jsapi_ticket"+jsapi_ticket+"--------nonceStr"+nonce_str+"--------timestamp"+timestamp+"-------signature"+signature);returnret;}publicstaticStringgetJsApiTicket(){MapString,ObjectmapJsApiTicketCache.getInstance().getJsApiTicketAndExpiresIn();return(String)map.get("jsapi_ticket");}}12.

CheckUtil.java

publicclassCheckUtil{publicstaticfinalStringtoken"xiaodou";//开发者自行定义Token/***对所有待签名参数按照字段名的ASCII码从小到大排序(字典序)后,使用URL键值对的格式(即key1value1key2value2…)拼接成字符串string1*@paramnonce_str*@paramtimestamp*@paramjsapi_ticket*@paramurl*@return*/publicstaticStringgetString1(Stringnonce_str,Stringtimestamp,Stringjsapi_ticket,Stringurl){//1.定义数组存放nonce_str,timestamp,jsapi_ticket,urlString[]arr{"noncestr"+nonce_str,"timestamp"+timestamp,"jsapi_ticket"+jsapi_ticket,"url"+url};//2.对数组进行排序Arrays.sort(arr);//3.生成字符串StringBuffersbnewStringBuffer();for(Strings:arr){sb.append(s);sb.append("");}sb.deleteCharAt(sb.length()-1);returnsb.toString();}publicstaticStringgetSha1(Stringstr){if(strnull||str.length()0){returnnull;}charhexDigits[]{'0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'};try{MessageDigestmdTempMessageDigest.getInstance("SHA1");mdTemp.update(str.getBytes("UTF-8"));byte[]mdmdTemp.digest();intjmd.length;charbuf[]newchar[j*2];intk0;for(inti0;ij;i++){bytebyte0md[i];buf[k++]hexDigits[byte040xf];buf[k++]hexDigits[byte00xf];}returnnewString(buf);}catch(Exceptione){//TODO:handleexceptionreturnnull;}}publicstaticStringcreate_nonce_str(){returnUUID.randomUUID().toString();}publicstaticStringcreate_timestamp(){returnLong.toString(System.currentTimeMillis()/1000);}}13.

JsApiTicketCatch.java(对jsapi_ticket的缓存可自行设置,redis或者存到数据库都是可行的)

/***缓存ticket*/publicclassJsApiTicketCache{//缓存jsapi_ticket的Map,map中包含jsapiTicket,expiresIn和缓存的时间戳timeprivateMapString,StringmapnewHashMapString,String();privatestaticJsApiTicketCachejsApiTicketCachenull;privateJsApiTicketCache(){}//静态工厂方法publicstaticJsApiTicketCachegetInstance(){if(jsApiTicketCachenull){jsApiTicketCachenewJsApiTicketCache();}returnjsApiTicketCache;}publicMapString,StringgetMap(){returnmap;}publicvoidsetMap(MapString,Stringmap){this.mapmap;}/***获取jsapi_ticketexpires_in*@return*/publicMapString,ObjectgetJsApiTicketAndExpiresIn(){MapString,ObjectresultnewHashMapString,Object();JsApiTicketCachejsApiTicketCacheJsApiTicketCache.getInstance();MapString,StringmapjsApiTicketCache.getMap();Stringtimemap.get("time");StringjsapiTicketmap.get("jsapi_ticket");StringexpiresInmap.get("expires_in");LongnowDatenewDate().getTime();if(jsapiTicket!nulltime!nullexpiresIn!null){//这里设置过期时间为微信规定的过期时间减去5分钟intoutTime(Integer.parseInt(expiresIn)-300)*1000;if(nowDate-Long.parseLong(time)outTime){System.out.println("-----从缓存读取jsapi_ticket:"+jsapiTicket);//从缓存中拿数据为返回结果赋值result.put("jsapi_ticket",jsapiTicket);result.put("expires_in",expiresIn);}}else{JsapiTicketinfoWeiXinUtil.getjsapiTicket();//实际中这里要改为你自己调用微信接口去获取jsapi_ticket和expires_inSystem.out.println("-----通过调用微信接口获取jsapi_ticket:"+info.getJsapiTicket());//将信息放置缓存中map.put("time",nowDate+"");map.put("jsapi_ticket",info.getJsapiTicket());map.put("expires_in",info.getExpiresIn()+"");//为返回结果赋值result.put("jsapi_ticket",info.getJsapiTicket());result.put("expires_in",info.getExpiresIn());}returnresult;}}14.

WeiXinUtil.java

jsapi_ticket_url"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_tokenACCESS_TOKENtypejsapi";//GET方式请求获得jsapi_ticket/***获取jsapi_ticket*@return*/publicstaticJsapiTicketgetjsapiTicket(){JsapiTicketjsapiTicketnull;StringaccessToken(String)AccessTokenCache.getInstance().getAcessTokenAndExpiresIn().get("access_token");StringrequestUrlWXConstants.jsapi_ticket_url.replace("ACCESS_TOKEN",accessToken);JSONObjectjsonObjecthttpRequest(requestUrl,"GET",null);//如果请求成功if(null!jsonObject){try{jsapiTicketnewJsapiTicket();jsapiTicket.setJsapiTicket(jsonObject.getString("ticket"));jsapiTicket.setExpiresIn(jsonObject.getInt("expires_in"));}catch(JSONExceptione){jsapiTicketnull;//获取token失败log.error("获取ticket失败errcode:{}errmsg:{}",jsonObject.getInt("errcode"),jsonObject.getString("errmsg"));}}returnjsapiTicket;}15.

accessToken的获取参照微信公众号开发之获取access_token,也可根据自己的定义获取。

16.

JsapiTicket.java

publicclassJsapiTicket{privateStringid;privateStringjsapiTicket;privateintexpiresIn;publicStringgetJsapiTicket(){returnjsapiTicket;}publicvoidsetJsapiTicket(StringjsapiTicket){this.jsapiTicketjsapiTicket;}publicintgetExpiresIn(){returnexpiresIn;}publicvoidsetExpiresIn(intexpiresIn){this.expiresInexpiresIn;}publicStringgetId(){returnid;}publicvoidsetId(Stringid){this.idid;}}17.

在这里总结一下开发中需要注意的地方(我遇到的坑):

18.

1.确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。

19.

2.在生成string1时,拼接的参数均为小写,特别注意noncestr,而在jsp页面中为nonceStr(所有的参数一定要根据微信接口中的定义,否则会导致验签失败)。

20.

3.验证签名是否正确,可在http://mp.weixin.qq.com/debug/cgi-bin/sandbox?tjsapisign页面工具进行校验。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎