微信公众平台jsapi开发教程

微信公众平台jsapi开发教程一获取jsapi_ticket我们在看微信jsapi开发文档发现，想要使用微信jsapi不仅要绑定已备案的域名，而且还需要一大堆接口注入权限验证。本人感觉有点麻烦，但是也没办法，谁让微信这么火呢。关于如何绑定域名，请读者去微信公众管理平台配置，当然你也可以来V型知识库()查看配置过程。通过config接口注入权限验证配置所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的webapp可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现webapp的页面会导致签名失败，此问题会在Android6.2中修复）。上面就是微信官方文档的说明，本来要高高兴兴的去接入微信开发，这下傻眼了，特别是初学者完全蒙了，接下来我们看看微信官方文档给的代码示例：wx.config({debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId:'',//必填，公众号的唯一标识timestamp:,//必填，生成签名的时间戳nonceStr:'',//必填，生成签名的随机串signature:'',//必填，签名，见附录1jsApiList:[]//必填，需要使用的JS接口列表，所有JS接口列表见附录2});timestamp，nonceStr，signature,尼玛这三个参数什么鬼，appid尚可知道，这三个参数好吧，让我们看附录1，那就看附录1吧，请看下面微信官方文档的附录1说明jsapi_ticket生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket。1.参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html2.用第一步拿到的access_token采用httpGET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi看到这里是不是蒙了，什么鬼，预先了解timestamp，nonceStr，signature,还必须获取jsapi_ticket,算了，既然官方文档说要获取jsapi_ticket那么就获取吧，在这里呢我只展示java获取jsapi_ticket。代码如下：packagecom.test.util;importjava.io.BufferedReader;importjava.io.IOException;importjava.io.InputStreamReader;import.MalformedURLException;import.URL;import.URLConnection;importnet.sf.json.JSONObject;importcom.test.weixin.TestAcessToken;/****@authorV型知识库**/publicclassJsapiTicketUtil{/****模拟get请求*@paramurl*@paramcharset*@paramtimeout*@return*/publicstaticStringsendGet(Stringurl,Stringcharset,inttimeout){Stringresult="";try{URLu=newURL(url);try{URLConnectionconn=u.openConnection();conn.connect();conn.setConnectTimeout(timeout);BufferedReaderin=newBufferedReader(newInputStreamReader(conn.getInputStream(),charset));Stringline="";while((line=in.readLine())!=null){result=result+line;}in.close();}catch(IOExceptione){returnresult;}}catch(MalformedURLExceptione){returnresult;}returnresult;}/****获取acess_token*来源*@return*/publicstaticStringgetAccessToken(){Stringappid="你公众号基本设置里的应用id";//应用IDStringappSecret="你公众号基本设置里的应用密钥";//(应用密钥)Stringurl="/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+appSecret+"";StringbackData=TestAcessToken.sendGet(url,"utf-8",10000);StringaccessToken=(String)JSONObject.fromObject(backData).get("access_token");returnaccessToken;}/****获取jsapiTicket*来源*@return*/publicstaticStringgetJSApiTicket(){//获取tokenStringacess_token=JsapiTicketUtil.getAccessToken();StringurlStr="/cgi-bin/ticket/getticket?access_token="+acess_token+"&type=jsapi";StringbackData=TestAcessToken.sendGet(urlStr,"utf-8",10000);Stringticket=(String)JSONObject.fromObject(backData).get("ticket");returnticket;}publicstaticvoidmain(String[]args){StringjsapiTicket=JsapiTicketUtil.getJSApiTicket();System.out.println("调用微信jsapi的凭证票为："+jsapiTicket);}}把上面的代码直接复制到Eclipse或者myeclipse中只想main方法即可，但是这里有个梗？第58行到65行这段代码是获取access_token的方法，因为要获取ticket需要这个参数，但是这里有两个参数需要读者填写，一个是appid,另一个是appSecret，代码的注释已经说得很明白了，我在这里就不在累述。二获取timestamp,nonceStr,signature参数上一节课讲了如何java如何获取jsapi_ticket参数，其实这个参数是获取本文所说的timestamp,nonceStr,signature三个参数的关键凭证。根据微信的官方文档和案例代码，上述三个参数是必须的，而且上述三个参数都是动态获取的，那么接下来，我们根据微信官方文档，用java代码来实现获取timestamp,nonceStr,signature这三个参数，在这里呢只是一个main方法执行打印并输出，这节课不实现把这三个参数传递到网页中并成功调出微信jsapi,下一节课将着重讲解。Sign代码：[java]viewplaincopy在CODE上查看代码片派生到我的代码片packagecom.test.util;/****V型知识库*/importjava.util.UUID;importjava.util.Map;importjava.util.HashMap;importjava.util.Formatter;importjava.security.MessageDigest;importjava.security.NoSuchAlgorithmException;importjava.io.UnsupportedEncodingException;publicclassSign{publicstaticvoidmain(String[]args){Stringjsapi_ticket=JsapiTicketUtil.getJSApiTicket();;//注意URL一定要动态获取，不能hardcodeStringurl="/xx/x.do";//url是你请求的一个action或者controller地址，并且方法直接跳转到使用jsapi的jsp界面Map<String,String>ret=sign(jsapi_ticket,url);for(Map.Entryentry:ret.entrySet()){System.out.println(entry.getKey()+","+entry.getValue());}};publicstaticMap<String,String>sign(Stringjsapi_ticket,Stringurl){Map<String,String>ret=newHashMap<String,String>();Stringnonce_str=create_nonce_str();Stringtimestamp=create_timestamp();Stringstring1;Stringsignature="";//注意这里参数名必须全部小写，且必须有序string1="jsapi_ticket="+jsapi_ticket+"&noncestr="+nonce_str+"×tamp="+timestamp+"&url="+url;System.out.println(string1);try{MessageDigestcrypt=MessageDigest.getInstance("SHA-1");crypt.reset();crypt.update(string1.getBytes("UTF-8"));signature=byteToHex(crypt.digest());}catch(NoSuchAlgorithmExceptione){e.printStackTrace();}catch(UnsupportedEncodingExceptione){e.printStackTrace();}ret.put("url",url);ret.put("jsapi_ticket",jsapi_ticket);ret.put("nonceStr",nonce_str);ret.put("timestamp",timestamp);ret.put("signature",signature);returnret;}privatestaticStringbyteToHex(finalbyte[]hash){Formatterformatter=newFormatter();for(byteb:hash){formatter.format("%02x",b);}Stringresult=formatter.toString();formatter.close();returnresult;}privatestaticStringcreate_nonce_str(){returnUUID.randomUUID().toString();}privatestaticStringcreate_timestamp(){returnLong.toString(System.currentTimeMillis()/1000);}}第16行main方法中的一个变量url就是你请求的一个action或者controller地址，并且方法直接跳转到使用jsapi的jsp界面，或者直接是个jsp地址也可以，例如/xx/jsapi.jsp获取jsapi_ticket工具类代码：[java]viewplaincopy在CODE上查看代码片派生到我的代码片packagecom.test.util;importjava.io.BufferedReader;importjava.io.IOException;importjava.io.InputStreamReader;import.MalformedURLException;import.URL;import.URLConnection;importnet.sf.json.JSONObject;importcom.test.weixin.TestAcessToken;/****@authorV型知识库**/publicclassJsapiTicketUtil{/****模拟get请求*@paramurl*@paramcharset*@paramtimeout*@return*/publicstaticStringsendGet(Stringurl,Stringcharset,inttimeout){Stringresult="";try{URLu=newURL(url);try{URLConnectionconn=u.openConnection();conn.connect();conn.setConnectTimeout(timeout);BufferedReaderin=newBufferedReader(newInputStreamReader(conn.getInputStream(),charset));Stringline="";while((line=in.readLine())!=null){result=result+line;}in.close();}catch(IOExceptione){returnresult;}}catch(MalformedURLExceptione){returnresult;}returnresult;}/****获取acess_token*来源*@return*/publicstaticStringgetAccessToken(){Stringappid="你公众号基本设置里的应用id";//应用IDStringappSecret="你公众号基本设置里的应用密钥";//(应用密钥)Stringurl="/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+appSecret+"";StringbackData=TestAcessToken.sendGet(url,"utf-8",10000);StringaccessToken=(String)JSONObject.fromObject(backData).get("access_token");returnaccessToken;}/****获取jsapiTicket*来源*@return*/publicstaticStringgetJSApiTicket(){//获取tokenStringacess_token=JsapiTicketUtil.getAccessToken();StringurlStr="/cgi-bin/ticket/getticket?access_token="+acess_token+"&type=jsapi";StringbackData=TestAcessToken.sendGet(urlStr,"utf-8",10000);Stringticket=(String)JSONObject.fromObject(backData).get("ticket");returnticket;}publicstaticvoidmain(String[]args){StringjsapiTicket=JsapiTicketUtil.getJSApiTicket();System.out.println("调用微信jsapi的凭证票为："+jsapiTicket);}}读者可直接把代码复制到myeclipse或者Eclipse中运行main方法即可，但是在这里提示读者JsapiTicketUtil中获取acces_token方法中需要读者自行填写自己的appid和appsecret。三页面初步接入微信jsapi上述表格中的参数，我们在前一章节已经说的很明白，之所以做出一个表格是因为如果想要成功接入微信jsapi这四个参数是凭证，也就是相当于一个门必须要有四把钥匙才能打开，缺一不可。接下来的案例采用java的servlet做的跳转页面，没有用到springMVC,大家可把请求的路径更换成controller路径即可。WxJsAPIServlet代码：[java]viewplaincopy在CODE上查看代码片派生到我的代码片packagecom.test;/****V型知识库*/importjava.io.IOException;importjava.io.PrintWriter;importjava.util.Map;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importcom.test.util.JsapiTicketUtil;importcom.test.util.Sign;publicclassWxJsAPIServletextendsHttpServlet{/***Constructoroftheobject.*/publicWxJsAPIServlet(){super();}/***Destructionoftheservlet.<br>*/publicvoiddestroy(){super.destroy();//Justputs"destroy"stringinlog//Putyourcodehere}/***ThedoGetmethodoftheservlet.<br>**Thismethodiscalledwhenaformhasitstagvaluemethodequalstoget.**@paramrequesttherequestsendbytheclienttotheserver*@paramresponsetheresponsesendbytheservertotheclient*@throwsServletExceptionifanerroroccurred*@throwsIOExceptionifanerroroccurred*/publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{System.out.println("wxJSAPI====================");Stringjsapi_ticket=JsapiTicketUtil.getJSApiTicket();;Map<String,String>map=Sign.sign(jsapi_ticket,"/weChat/wxJsAPIServlet");Stringtimestamp=map.get("timestamp");StringnonceStr=map.get("nonceStr");Stringsignature=map.get("signature");StringappId="应用Id";request.setAttribute("appId",appId);request.setAttribute("timestamp",timestamp);request.setAttribute("signature",signature);request.setAttribute("nonceStr",nonceStr);request.getRequestDispatcher("jsapi/jsapi.jsp").forward(request,response);}/***ThedoPostmethodoftheservlet.<br>**Thismethodiscalledwhenaformhasitstagvaluemethodequalstopost.**@paramrequesttherequestsendbytheclienttotheserver*@paramresponsetheresponsesendbytheservertotheclient*@throwsServletExceptionifanerroroccurred*@throwsIOExceptionifanerroroccurred*/publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{this.doGet(request,response);}/***Initializationoftheservlet.<br>**@throwsServletExceptionifanerroroccurs*/publicvoidinit()throwsServletException{//Putyourcodehere}}第44行是生成jsapi_ticket的工具类，在下面有贴出工具类的代码。第45行Sign类的sign方法，把表格中的最后三个参数封装放到Map集合中了。其中参数就是请求的servlet地址并跳转到调用微信jsapi的jsp界面。第49行appId替换成你自己的应用id,如果不知道应用id可登陆微信公众平台管理中心查询。servlet对应的web.xml代码[html]viewplaincopy在CODE上查看代码片派生到我的代码片<servlet><description>ThisisthedescriptionofmyJ2EEcomponent</description><display-name>ThisisthedisplaynameofmyJ2EEcomponent</display-name><servlet-name>WxJsAPIServlet</servlet-name><servlet-class>com.test.WxJsAPIServlet</servlet-class></servlet><servlet-mapping><servlet-name>WxJsAPIServlet</servlet-name><url-pattern>/wxJsAPIServlet</url-pattern></servlet-mapping>生成签名算法类Sign代码:[java]viewplaincopy在CODE上查看代码片派生到我的代码片packagecom.test.util;/****V型知识库*/importjava.util.UUID;importjava.util.Map;importjava.util.HashMap;importjava.util.Formatter;importjava.security.MessageDigest;importjava.security.NoSuchAlgorithmException;importjava.io.UnsupportedEncodingException;publicclassSign{publicstaticMap<String,String>sign(Stringjsapi_ticket,Stringurl){Map<String,String>ret=newHashMap<String,String>();Stringnonce_str=create_nonce_str();Stringtimestamp=create_timestamp();Stringstring1;Stringsignature="";//注意这里参数名必须全部小写，且必须有序string1="jsapi_ticket="+jsapi_ticket+"&noncestr="+nonce_str+"×tamp="+timestamp+"&url="+url;System.out.println(string1);try{MessageDigestcrypt=MessageDigest.getInstance("SHA-1");crypt.reset();crypt.update(string1.getBytes("UTF-8"));signature=byteToHex(crypt.digest());}catch(NoSuchAlgorithmExceptione){e.printStackTrace();}catch(UnsupportedEncodingExceptione){e.printStackTrace();}ret.put("url",url);ret.put("jsapi_ticket",jsapi_ticket);ret.put("nonceStr",nonce_str);ret.put("timestamp",timestamp);ret.put("signature",signature);returnret;}privatestaticStringbyteToHex(finalbyte[]hash){Formatterformatter=newFormatter();for(byteb:hash){formatter.format("%02x",b);}Stringresult=formatter.toString();formatter.close();returnresult;}privatestaticStringcreate_nonce_str(){returnUUID.randomUUID().toString();}privatestaticStringcreate_timestamp(){returnLong.toString(System.currentTimeMillis()/1000);}publicstaticvoidmain(String[]args){Stringjsapi_ticket=JsapiTicketUtil.getJSApiTicket();//注意URL一定要动态获取，不能hardcodeStringurl="/xx/x.do";//url是你请求的一个action或者controller地址，并且方法直接跳转到使用jsapi的jsp界面Map<String,String>ret=sign(jsapi_ticket,url);for(Map.Entryentry:ret.entrySet()){System.out.println(entry.getKey()+","+entry.getValue());}};}生成jsapi_ticket参数的工具类JsapiTicketUtil代码[java]viewplaincopy在CODE上查看代码片派生到我的代码片packagecom.test.util;importjava.io.BufferedReader;importjava.io.IOException;importjava.io.InputStreamReader;import.MalformedURLException;import.URL;import.URLConnection;importnet.sf.json.JSONObject;importcom.test.weixin.TestAcessToken;/****@authorV型知识库**/publicclassJsapiTicketUtil{/****模拟get请求*@paramurl*@paramcharset*@paramtimeout*@return*/publicstaticStringsendGet(Stringurl,Stringcharset,inttimeout){Stringresult="";try{URLu=newURL(url);try{URLConnectionconn=u.openConnection();conn.connect();conn.setConnectTimeout(timeout);BufferedReaderin=newBufferedReader(newInputStreamReader(conn.getInputStream(),charset));Stringline="";while((line=in.readLine())!=null){result=result+line;}in.close();}catch(IOExceptione){returnresult;}}catch(MalformedURLExceptione){returnresult;}returnresult;}/****获取acess_token*来源*@return*/publicstaticStringgetAccessToken(){Stringappid="你公众号基本设置里的应用id";//应用IDStringappSecret="你公众号基本设置里的应用密钥";//(应用密钥)Stringurl="/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+appSecret+"";StringbackData=TestAcessToken.sendGet(url,"utf-8",10000);StringaccessToken=(String)JSONObject.fromObject(backData).get("access_token");returnaccessToken;}/****获取jsapiTicket*来源*@return*/publicstaticStringgetJSApiTicket(){//获取tokenStringacess_token=JsapiTicketUtil.getAccessToken();StringurlStr="/cgi-bin/ticket/getticket?access_token="+acess_token+"&type=jsapi";StringbackData=TestAessToken.sendGet(urlStr,"utf-8",10000);Stringticket=(String)JSONObject.fromObject(backData).get("ticket");returnticket;}publicstaticvoidmain(String[]args){StringjsapiTicket=JsapiTicketUtil.getJSApiTicket();System.out.println("调用微信jsapi的凭证票为："+jsapiTicket);}}上述代码中有个获取access_token的方法，请读者更换自己的参数即可jsapi.jsp代码[html]viewplaincopy在CODE上查看代码片派生到我的代码片<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><basehref="<%=basePath%>"><title>微信jsapi测试-V型知识库</title><metaname="viewport"content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><scriptsrc="/open/js/jweixin-1.1.0.js"></script></head><body><center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center><br><p>timestamp：${timestamp}</p><p>nonceStr：${nonceStr}</p><p>signature：${signature}</p><p>appId:${appId}</p><inputtype="button"value="upload"onclick="uploadImg();"/><inputtype="button"value="获取当前位置"onclick="getLocation();"/><br><scripttype="text/javascript">wx.config({debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId:'${appId}',//必填，公众号的唯一标识timestamp:'${timestamp}',//必填，生成签名的时间戳nonceStr:'${nonceStr}',//必填，生成签名的随机串signature:'${signature}',//必填，签名，见附录1jsApiList:['chooseImage','getLocation','openLocation']//必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.ready(function(){alert("ready");});wx.error(function(res){alert("调用微信jsapi返回的状态:"+res.errMsg);});functionuploadImg(){wx.checkJsApi({jsApiList:['chooseImage','openLocation','getLocation'],//需要检测的JS接口列表，所有JS接口列表见附录2,success:function(res){//以键值对的形式返回，可用的api值true，不可用为false//如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}alert(res);wx.chooseImage({count:1,//默认9sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有success:function(res){varlocalIds=res.localIds;//返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片alert(localIds);}});}});}functiongetLocation(){varlatitude="";varlongitude="";wx.getLocation({type:'gcj02',//默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success:function(res){latitude=res.latitude;//纬度，浮点数，范围为90~-90longitude=res.longitude;//经度，浮点数，范围为180~-180。varspeed=res.speed;//速度，以米/每秒计varaccuracy=res.accuracy;//位置精度wx.openLocation({latitude:latitude,//纬度，浮点数，范围为90~-90longitude:longitude,//经度，浮点数，范围为180~-180。name:'你当前的位置',//位置名address:'currentLocation',//地址详情说明scale:26,//地图缩放级别,整形值,范围从1~28。默认为最大infoUrl:''//在查看位置界面底部显示的超链接,可点击跳转});}});}</script></body></html>测试场景:打开微信公众号，点击菜单回复带有请求servlet地址，跳转到jsapi.jsp界面链接地址，然后界面会弹出调用微信jsapi成功或失败的窗口信息.四微信jsapi扫一扫接口实现调起微信扫一扫接口wx.scanQRCode({needResult:0,//默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType:["qrCode","barCode"],//可以指定扫二维码还是一维码，默认二者都有success:function(res){varresult=res.resultStr;//当needResult为1时，扫码返回的结果}});第一、新建jsp页面，并引入js库12<scriptsrc="/open/js/jweixin-1.1.0.js"></script><scriptsrc="/jquery/2.0.0/jquery.js"></script>jweixin-1.1.0.js是调用微信jsapi的库，所以必须引入，第二行是本案例使用了jquery，所以引入的是jquery库第二、引入界面样式，由于几节界面案例样式太难看，所以这次案例美化了一下界面。1<linkrel="stylesheet"href="6/jssdk/css/style.css"/>第三、<body></body>之间的html代码<center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center><divclass="lbox_closewxapi_form"><h3id="menu-scan">微信扫一扫</h3><spanclass="desc">调起微信扫一扫接口</span><buttonclass="btnbtn_primary"id="scanQRCode0">scanQRCode(微信处理结果)</button><buttonclass="btnbtn_primary"id="scanQRCode1">scanQRCode(直接返回结果)</button></div>第四、<script></script>之间初始化微信jsapi库添加接口函数//V型知识库wx.config({debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId:'${appId}',//必填，公众号的唯一标识timestamp:'${timestamp}',//必填，生成签名的时间戳nonceStr:'${nonceStr}',//必填，生成签名的随机串signature:'${signature}',//必填，签名，见附录1jsApiList:['checkJsApi','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType',//网络状态接口'openLocation',//使用微信内置地图查看地理位置接口'getLocation',//获取地理位置接口'hideOptionMenu',//界面操作接口1'showOptionMenu',//界面操作接口2'closeWindow',////界面操作接口3'hideMenuItems',////界面操作接口4'showMenuItems',////界面操作接口5'hideAllNonBaseMenuItem',////界面操作接口6'showAllNonBaseMenuItem',////界面操作接口7'scanQRCode'//微信扫一扫接口]//必填，需要使用的JS接口列表，所有JS接口列表见附录2});jsApiList数组中，最后一项就是我们调用微信扫一扫接口的函数，此函数必须在jsapi库中初始化，否则微信扫一扫功能无法调起。第五、调用第三步button按钮的功能js代码，在wx.ready中添加//9微信原生接口开始//9.1.1扫描二维码并返回结果document.querySelector('#scanQRCode0').onclick=function(){wx.scanQRCode();};//9.1.2扫描二维码并返回结果document.querySelector('#scanQRCode1').onclick=function(){wx.scanQRCode({needResult:1,desc:'scanQRCodedesc',success:function(res){alert(JSON.stringify(res));}});};//9微信原生接口结束第六、完整的jsp页面代码，读者可直接复制运行<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><basehref="<%=basePath%>"><!--原创--><title>微信jsapi测试-V型知识库</title><metaname="viewport"content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><linkrel="stylesheet"href="6/jssdk/css/style.css"/><scriptsrc="/open/js/jweixin-1.1.0.js"></script><scriptsrc="/jquery/2.0.0/jquery.js"></script><styletype="text/css">.desc{color:red;}</style></head><body><center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center><divclass="lbox_closewxapi_form"><h3id="menu-scan">微信扫一扫</h3><spanclass="desc">调起微信扫一扫接口</span><buttonclass="btnbtn_primary"id="scanQRCode0">scanQRCode(微信处理结果)</button><buttonclass="btnbtn_primary"id="scanQRCode1">scanQRCode(直接返回结果)</button></div><divstyle="display:none;"><h3id="menu-webview">界面操作接口</h3><br><spanclass="desc">隐藏右上角菜单接口</span><br><buttonclass="btnbtn_primary"id="hideOptionMenu">hideOptionMenu</button><br><spanclass="desc">显示右上角菜单接口</span><br><buttonclass="btnbtn_primary"id="showOptionMenu">showOptionMenu</button><br><spanclass="desc">关闭当前网页窗口接口</span><br><buttonclass="btnbtn_primary"id="closeWindow">closeWindow</button><br><spanclass="desc">批量隐藏功能按钮接口</span><br><buttonclass="btnbtn_primary"id="hideMenuItems">hideMenuItems</button><br><spanclass="desc">批量显示功能按钮接口</span><br><buttonclass="btnbtn_primary"id="showMenuItems">showMenuItems</button><br><spanclass="desc">隐藏所有非基础按钮接口</span><br><buttonclass="btnbtn_primary"id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button><br><spanclass="desc">显示所有功能按钮接口</span><br><buttonclass="btnbtn_primary"id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button><br><p>基础接口之判断当前客户端是否支持指定的js接口</p><inputtype="button"value="checkJSAPI"id="checkJsApi"><br><spanclass="desc"style="color:red">地理位置接口-使用微信内置地图查看位置接口</span><br><buttonclass="btnbtn_primary"id="openLocation">openLocation</button><br><spanclass="desc"style="color:red">地理位置接口-获取地理位置接口</span><br><buttonclass="btnbtn_primary"id="getLocation">getLocation</button><br><spanclass="desc"style="color:red">获取网络状态接口</span><br>