首先页面 引入微信的js
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
所有需要使用JS-SDK的页面必须先注入配置信息
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
需要我们从服务器端返回四个配置参数1:appId,2:timestamp,3:nonceStr,4:signature
jsApiList是我们需要使用的js接口列表
每一个js接口都有需要的参数,这里以分享给朋友接口为例,
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}
});
这里大致就是两个过程,第一个过程,后台的得到config的参数传递页面渲染,第二个过程后台得到js接口需要的参数传递给页面渲染
第一个过程:比较复杂
配置微信配置参数的工具类,包括appid,screat,获取jsapi_ticket接口url,获取access_token接口api
public class WxConstUtil {
// 微信APPID
public static final String WX_APPID = "wxb33a5a0b283b2d7d";
// 微信APPSECRET
public static final String WX_APPSCREAT = "fbcec9adf0ef560d5a3fc19008a91428";
// 微信获取jsapi_ticket 接口
public static final String WX_JSAPI_TICKET_URL
= "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
//微信获取access_token 接口
public static final String WX_ACCESSTOKEN_URL
= "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+WX_APPID+"&secret="+WX_APPSCREAT;
public static final String TOKEN= "sgyWeixin";
}
这里从WxConstUtil(微信参数配置类)可以得到第一个参数1:appId
建立SignUtil(签名工具类) ,写一个方法createNonceStr(),通过UUID得到一个随机数,变为string,这是第二个参数2:nonceStr
public class SignUtil {
public static String createNonceStr() {
String s = UUID.randomUUID().toString();
if (s.length() >= 32) {
s = s.substring(0, 31);
} else {
s = s.substring(s.length() - 31);
}
return s;
}
}
根据系统时间到毫秒数除于1000得到一个时间,变为string,这是第三个参数3:timeStamp
第四个参数signature提别复杂
第一步,我们需要获得access_token,微信配置参数里有个url用来获得access_token的url
//微信获取access_token 接口
public static final String WX_ACCESSTOKEN_URL
= "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+WX_APPID+"&secret="+WX_APPSCREAT;
这个url请求的是微信服务器端的url,参数有三个,一个grant_type,这个不用替换,appid和secret替换为我们微信配置参数文件里的appid和secret
使用http的get请求调用此url,得到微信返回的信息,这里包含access_token的数据(附带:这里我的get请求是返回啦一个JsonObject对象,在下面有这个get请求的代码)
public class TokenUtil {
public static String access_token="";
/***
* 获取access_token
* @return
* @throws Exception
*/
public static String accessToken() throws Exception{
if(access_token.equals("")){
access_token = gainAccessTokenFromWx();
}
return access_token;
}
/***
* 从微信服务器获取 access_token
* @return
* @throws Exception
*/
public static String gainAccessTokenFromWx() throws Exception{
String url = WxConstUtil.WX_ACCESSTOKEN_URL;
JSONObject json = HttpUtil.doGetStr(url);
if(json.get("errcode") != null){
//throw new RRException("获取微信access_token失败,errcode:"+json.get("errcode"));
throw new RuntimeException();
}else{
access_token = json.getString("access_token");
}
return access_token;
}
}
第二步:需要获得jsapi_ticket,我们的微信配置参数里有个url是用来获得jsapi_ticket的url
// 微信获取jsapi_ticket 接口
public static final String WX_JSAPI_TICKET_URL
= "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
这个url请求的是微信服务器端的url,参数有两个,一个access_token,一个type,这个type不用替换,只需要替换access_token这个参数即可
把我们刚才得到的access_token替换为url的参数,使用http的get请求访问此url,得到返回数据,返回数据里包含jsapi_ticket的数据
public class TokenUtil {
public static String jsapi_ticket = "";
/***
* 获取jsapi_ticket
* @return
* @throws Exception
*/
public static String jsapiTicket() throws Exception{
if(jsapi_ticket.equals("")){
jsapi_ticket = gainJsapiTokenFromWx();
}
return jsapi_ticket;
}
/***
* 从微信服务器获取 jsapi_ticket
* @return
* @throws Exception
*/
public static String gainJsapiTokenFromWx() throws Exception{
//获取jsapi_tikcet
String url = WxConstUtil.WX_JSAPI_TICKET_URL.replace("ACCESS_TOKEN", accessToken());
JSONObject res = HttpUtil.doGetStr(url);
if(res.getInt("errcode") == 0){
//获取jsapi_ticket成功
String ticket = (String) res.get("ticket");
jsapi_ticket = ticket;
}else {
//throw new RRException("jsapi_ticket获取失败,errmsg:"+res.getString("errmsg"));
throw new RuntimeException();
}
return jsapi_ticket;
}
}
第三步:得到signature的数据,这是我们要的
通过jsapiTicket,nonceStr,timestamp,我们微信调用的url,这四个参数得到数据,这是第四个参数4:signature
public static String jsapiSign(String jsapi_ticket, String noncestr, String timestamp, String url) {
String str;
str = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + url;
char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f' };
try {
MessageDigest mdTemp = MessageDigest.getInstance("SHA1");
mdTemp.update(str.getBytes("GBK"));
byte[] md = mdTemp.digest();
int j = md.length;
char buf[] = new char[j * 2];
int k = 0;
for (int i = 0; i < j; i++) {
byte byte0 = md[i];
buf[k++] = hexDigits[byte0 >>> 4 & 0xf];
buf[k++] = hexDigits[byte0 & 0xf];
}
return new String(buf);
} catch (Exception e) {
// throw new RRException("jsapiSign生成config的sign错误");
throw new RuntimeException();
}
}
最后把我们得到的这四个参数放入map中,返回json,通过页面的js,或ajax解析到这些数据放到config的js中,这就配置好啦wx.config的参数,就可以开发js-sdk中的需要的接口啦。