微信公众平台jsapi开发教程
一获取jsapi_ticket
我们在看微信jsapi开发文档发现，想要使用微信jsapi不仅要绑定已备案的域名，而且还需要一大堆接口注入权限验证。本人感觉有点麻烦，但是也没办法，谁让微信这么火呢。关于如何绑定域名，请读者去微信公众管理平台配置，当然你也可以来V型知识库(vxzsk.com)查看配置过程。
通过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:'''',//必填，签名，见附录1
jsApiList:[]//必填，需要使用的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.html
2.用第一步拿到的access_token采用httpGET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/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;
importjava.net.MalformedURLException;
importjava.net.URL;
importjava.net.URLConnection;
importnet.sf.json.JSONObject;
importcom.test.weixin.TestAcessToken;
/
@authorV型知识库www.vxzsk.com
/
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
来源www.vxzsk.com
@return
/
publicstaticStringgetAccessToken(){
Stringappid="你公众号基本设置里的应用id";//应用ID
StringappSecret="你公众号基本设置里的应用密钥";//(应用密钥)
Stringurl="https://api.weixin.qq.com/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
来源www.vxzsk.com
@return
/
publicstaticStringgetJSApiTicket(){
//获取token
Stringacess_token=JsapiTicketUtil.getAccessToken();
StringurlStr="https://api.weixin.qq.com/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型知识库www.vxzsk.com
/
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一定要动态获取，不能hardcode
Stringurl="http://www.vxzsk.com/xx/x.do";//url是你请求的一个action或者controller地址，并且方法直接跳转到使用jsapi的jsp界面
Mapret=sign(jsapi_ticket,url);
for(Map.Entryentry:ret.entrySet()){
System.out.println(entry.getKey()+","+entry.getValue());
}
};
publicstaticMapsign(Stringjsapi_ticket,Stringurl){
Mapret=newHashMap();
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地址也可以，例如http://www.vxzsk.com/xx/jsapi.jsp
获取jsapi_ticket工具类代码：
[java]viewplaincopy在CODE上查看代码片派生到我的代码片
packagecom.test.util;
importjava.io.BufferedReader;
importjava.io.IOException;
importjava.io.InputStreamReader;
importjava.net.MalformedURLException;
importjava.net.URL;
importjava.net.URLConnection;
importnet.sf.json.JSONObject;
importcom.test.weixin.TestAcessToken;
/
@authorV型知识库www.vxzsk.com
/
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
来源www.vxzsk.com
@return
/
publicstaticStringgetAccessToken(){
Stringappid="你公众号基本设置里的应用id";//应用ID
StringappSecret="你公众号基本设置里的应用密钥";//(应用密钥)
Stringurl="https://api.weixin.qq.com/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
来源www.vxzsk.com
@return
/
publicstaticStringgetJSApiTicket(){
//获取token
Stringacess_token=JsapiTicketUtil.getAccessToken();
StringurlStr="https://api.weixin.qq.com/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型知识库www.vxzsk.com
/
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.
/
publicvoiddestroy(){
super.destroy();//Justputs"destroy"stringinlog
//Putyourcodehere
}
/
ThedoGetmethodoftheservlet.
Thismethodiscalledwhenaformhasitstagvaluemethodequalstoget.
@paramrequesttherequestsendbytheclienttotheserver
@paramresponsetheresponsesendbytheservertotheclient
@throwsServletExceptionifanerroroccurred
@throwsIOExceptionifanerroroccurred
/
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
System.out.println("wxJSAPI====================");
Stringjsapi_ticket=JsapiTicketUtil.getJSApiTicket();;
Mapmap=Sign.sign(jsapi_ticket,"http://www.vxzsk.com/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.
Thismethodiscalledwhenaformhasitstagvaluemethodequalstopost.
@paramrequesttherequestsendbytheclienttotheserver
@paramresponsetheresponsesendbytheservertotheclient
@throwsServletExceptionifanerroroccurred
@throwsIOExceptionifanerroroccurred
/
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
this.doGet(request,response);
}
/
Initializationoftheservlet.
@throwsServletExceptionifanerroroccurs
/
publicvoidinit()throwsServletException{
//Putyourcodehere
}
}
第44行是生成jsapi_ticket的工具类，在下面有贴出工具类的代码。
第45行Sign类的sign方法，把表格中的最后三个参数封装放到Map集合中了。其中参数就是请求的servlet地址并跳转到调用微信jsapi的jsp界面。
第49行appId替换成你自己的应用id,如果不知道应用id可登陆微信公众平台管理中心查询。
servlet对应的web.xml代码
[html]viewplaincopy在CODE上查看代码片派生到我的代码片
ThisisthedescriptionofmyJ2EEcomponent
ThisisthedisplaynameofmyJ2EEcomponent
WxJsAPIServlet
com.test.WxJsAPIServlet
WxJsAPIServlet
/wxJsAPIServlet
生成签名算法类Sign代码:
[java]viewplaincopy在CODE上查看代码片派生到我的代码片
packagecom.test.util;
/
V型知识库www.vxzsk.com
/
importjava.util.UUID;
importjava.util.Map;
importjava.util.HashMap;
importjava.util.Formatter;
importjava.security.MessageDigest;
importjava.security.NoSuchAlgorithmException;
importjava.io.UnsupportedEncodingException;
publicclassSign{
publicstaticMapsign(Stringjsapi_ticket,Stringurl){
Mapret=newHashMap();
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一定要动态获取，不能hardcode
Stringurl="http://www.vxzsk.com/xx/x.do";//url是你请求的一个action或者controller地址，并且方法直接跳转到使用jsapi的jsp界面
Mapret=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;
importjava.net.MalformedURLException;
importjava.net.URL;
importjava.net.URLConnection;
importnet.sf.json.JSONObject;
importcom.test.weixin.TestAcessToken;
/
@authorV型知识库www.vxzsk.com
/
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
来源www.vxzsk.com
@return
/
publicstaticStringgetAccessToken(){
Stringappid="你公众号基本设置里的应用id";//应用ID
StringappSecret="你公众号基本设置里的应用密钥";//(应用密钥)
Stringurl="https://api.weixin.qq.com/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
来源www.vxzsk.com
@return
/
publicstaticStringgetJSApiTicket(){
//获取token
Stringacess_token=JsapiTicketUtil.getAccessToken();
StringurlStr="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+acess_token+"&type=jsapi";
StringbackData=TestAcwww.shanxiwang.netessToken.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+"/";
%>
">
微信jsapi测试-V型知识库
欢迎来到微信jsapi测试界面-V型知识库
timestamp：${timestamp}
nonceStr：${nonceStr}
signature：${signature}
appId:${appId}
wx.config({
debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId:''${appId}'',//必填，公众号的唯一标识
timestamp:''${timestamp}'',//必填，生成签名的时间戳
nonceStr:''${nonceStr}'',//必填，生成签名的随机串
signature:''${signature}'',//必填，签名，见附录1
jsApiList:[''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,//默认9
sizeType:[''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~-90
longitude=res.longitude;//经度，浮点数，范围为180~-180。
varspeed=res.speed;//速度，以米/每秒计
varaccuracy=res.accuracy;//位置精度
wx.openLocation({
latitude:latitude,//纬度，浮点数，范围为90~-90
longitude:longitude,//经度，浮点数，范围为180~-180。
name:''你当前的位置'',//位置名
address:''currentLocation'',//地址详情说明
scale:26,//地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl:''''//在查看位置界面底部显示的超链接,可点击跳转
});
}
});
}
测试场景:打开微信公众号，点击菜单回复带有请求servlet地址，跳转到jsapi.jsp界面链接地址，然后界面会弹出调用微信jsapi成功或失败的窗口信息.
四微信jsapi扫一扫接口实现
调起微信扫一扫接口
wx.scanQRCode({
needResult:0,//默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType:["qrCode","barCode"],//可以指定扫二维码还是一维码，默认二者都有
success:function(res){
varresult=res.resultStr;//当needResult为1时，扫码返回的结果
}
});
第一、新建jsp页面，并引入js库
1
2
jweixin-1.1.0.js是调用微信jsapi的库，所以必须引入，第二行是本案例使用了jquery，所以引入的是jquery库
第二、引入界面样式，由于几节界面案例样式太难看，所以这次案例美化了一下界面。
1
第三、之间的html代码
欢迎来到微信jsapi测试界面-V型知识库
微信扫一扫
调起微信扫一扫接口
scanQRCode(微信处理结果)
scanQRCode(直接返回结果)
第四、之间初始化微信jsapi库添加接口函数
//V型知识库www.vxzsk.com
wx.config({
debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId:''${appId}'',//必填，公众号的唯一标识
timestamp:''${timestamp}'',//必填，生成签名的时间戳
nonceStr:''${nonceStr}'',//必填，生成签名的随机串
signature:''${signature}'',//必填，签名，见附录1
jsApiList:[''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+"/";
%>
">
微信jsapi测试-V型知识库
.desc{
color:red;
}
欢迎来到微信jsapi测试界面-V型知识库
微信扫一扫
调起微信扫一扫接口
scanQRCode(微信处理结果)
scanQRCode(直接返回结果)
界面操作接口
隐藏右上角菜单接口
hideOptionMenu
显示右上角菜单接口
showOptionMenu
关闭当前网页窗口接口
closeWindow
批量隐藏功能按钮接口
hideMenuItems
批量显示功能按钮接口
showMenuItems
隐藏所有非基础按钮接口
hideAllNonBaseMenuItem
显示所有功能按钮接口
showAllNonBaseMenuItem
基础接口之判断当前客户端是否支持指定的js接口
地理位置接口-使用微信内置地图查看位置接口
openLocation
地理位置接口-获取地理位置接口
getLocation
获取网络状态接口
getNetworkType
图像接口
拍照或从手机相册中选图接口
chooseImage
预览图片接口
previewImage
上传图片接口
uploadImage
下载图片接口
downloadImage
显示图片
wx.config({
debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId:''${appId}'',//必填，公众号的唯一标识
timestamp:''${timestamp}'',//必填，生成签名的时间戳
nonceStr:''${nonceStr}'',//必填，生成签名的随机串
signature:''${signature}'',//必填，签名，见附录1
jsApiList:[''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
});
wx.ready(function(){
//5图片接口
//5.1拍照、本地选图
varimages={
localId:[],
serverId:[]
};
document.querySelector(''#chooseImage'').onclick=function(){
wx.chooseImage({
success:function(res){
images.localId=res.localIds;
alert(''已选择''+res.localIds.length+''张图片'');
$("#faceImg").attr("src",res.localIds[0]);//显示图片到页面上
}
});
};
//5.2图片预览
document.querySelector(''#previewImage'').onclick=function(){
wx.previewImage({
current:''http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg'',
urls:[
''http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg'',
''http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg'',
''http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg''
]
});
};
//5.3上传图片
document.querySelector(''#uploadImage'').onclick=function(){
if(images.localId.length==0){
alert(''请先使用chooseImage接口选择图片'');
return;
}
vari=0,length=images.localId.length;
images.serverId=[];
functionupload(){
wx.uploadImage({
localId:images.localId[i],
success:function(res){
i++;
//alert(''已上传：''+i+''/''+length);
images.serverId.push(res.serverId);
if(i
upload();
}
},
fail:function(res){
alert(JSON.stringify(res));
}
});
}
upload();
};
//5.4下载图片
document.querySelector(''#downloadImage'').onclick=function(){
if(images.serverId.length===0){
alert(''请先使用uploadImage上传图片'');
return;
}
vari=0,length=images.serverId.length;
images.localId=[];
functiondownload(){
wx.downloadImage({
serverId:images.serverId[i],
success:function(res){
i++;
alert(''已下载：''+i+''/''+length);
images.localId.push(res.localId);
if(i
download();
}
}
});
}
download();
};
//6设备信息接口
//6.1获取当前网络状态
document.querySelector(''#getNetworkType'').onclick=function(){
wx.getNetworkType({
success:function(res){
alert(res.networkType);
},
fail:function(res){
alert(JSON.stringify(res));
}
});
};
//网络接口结束
//7地理位置接口开始
//7.1查看地理位置
document.querySelector(''#openLocation'').onclick=function(){
wx.openLocation({
latitude:23.099994,
longitude:113.324520,
name:''TIT创意园'',
address:''广州市海珠区新港中路397号'',
scale:14,
infoUrl:''http://weixin.qq.com''
});
};
//7.2获取当前地理位置
document.querySelector(''#getLocation'').onclick=function(){
wx.getLocation({
success:function(res){
alert(JSON.stringify(res));
},
cancel:function(res){
alert(''用户拒绝授权获取地理位置'');
}
});
};
//7地理位置接口结束
//8界面操作接口开始-----------
//8.1隐藏右上角菜单
document.querySelector(''#hideOptionMenu'').onclick=function(){
wx.hideOptionMenu();
};
//8.2显示右上角菜单
document.querySelector(''#showOptionMenu'').onclick=function(){
wx.showOptionMenu();
};
//8.3批量隐藏菜单项
document.querySelector(''#hideMenuItems'').onclick=function(){
wx.hideMenuItems({
menuList:[
''menuItem:readMode'',//阅读模式
''menuItem:share:timeline'',//分享到朋友圈
''menuItem:copyUrl''//复制链接
],
success:function(res){
alert(''已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮'');
},
fail:function(res){
alert(JSON.stringify(res));
}
});
};
//8.4批量显示菜单项
document.querySelector(''#showMenuItems'').onclick=function(){
wx.showMenuItems({
menuList:[
''menuItem:readMode'',//阅读模式
''menuItem:share:timeline'',//分享到朋友圈
''menuItem:copyUrl''//复制链接
],
success:function(res){
alert(''已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮'');
},
fail:function(res){
alert(JSON.stringify(res));
}
});
};
//8.5隐藏所有非基本菜单项
document.querySelector(''#hideAllNonBaseMenuItem'').onclick=function(){
wx.hideAllNonBaseMenuItem({
success:function(){
alert(''已隐藏所有非基本菜单项'');
}
});
};
//8.6显示所有被隐藏的非基本菜单项
document.querySelector(''#showAllNonBaseMenuItem'').onclick=function(){
wx.showAllNonBaseMenuItem({
success:function(){
alert(''已显示所有非基本菜单项'');
}
});
};
//8.7关闭当前窗口
document.querySelector(''#closeWindow'').onclick=function(){
wx.closeWindow();
};
//8界面操作接口结束------------------------------------------
//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微信原生接口结束---------------------
});
//初始化jsapi接口状态
wx.error(function(res){
alert("调用微信jsapi返回的状态:"+res.errMsg);
});
上述jsp代码中有四个参数，这四个参数是成功调用微信jsapi的凭证，分别为appId(必填，公众号的唯一标识),timestamp(必填，生成签名的时间戳),nonceStr(必填，生成签名的随机串),signature(必填，签名)，关于如何生成这四个参数，如果不知道的读者，请查看本页面左上角的菜单，里面有详细介绍，在这里不在累述。
第六、上述代码运行后，效果如下
|
|
