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页面工具进行校验。
微信公众号开发之调起微信扫一扫接口-微信扫一扫开发-微信小程序扫一扫功能
浏览量:1321
时间:
来源:一个懒惰的羊
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。 -

零代码 + AI 双轮驱动|即速应用解锁人工智能小程序开发新范式
无需代码、无需 AI 算法功底,普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合,推出 AI 智能生成能力,用户通过自然语言描述需求,AI 自动生成小程序页面、功能模块与后台配置,覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力,一键对接微信生态,打通视频号、企业微信、短信跳转,帮企业快速落地 AI 应用,抢占智慧经营先机,让每家企业都拥有 AI 驱动的智慧店铺。










