1.使用微信的js-sdk接口首先要在自己的微信测试公众号,或者是公众号上面添加js安全域名。
2.在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js。
3.通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
4.接下来就写一下有关这三大凭证的获取方法:
第一步:获取jsapi的凭证票:(这里acess_token的获取方法就不写了,应该都会)
public static String getJSApiTicket(){
//获取token
String acess_token= JsapiTicketUtil.getAccessToken();
String urlStr = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+acess_token+"&type=jsapi";
String backData=JsapiTicketUtil.sendGet(urlStr, "utf-8", 10000);
String ticket = (String) JSONObject.fromObject(backData).get("ticket");
return ticket;
}
第二步:获取三大凭证
public static Map<String, String> sign(String jsapi_ticket, String url) {
Map<String, String> ret = new HashMap<String, String>();
String nonce_str = create_nonce_str();
String timestamp = create_timestamp();
String string1;
String signature = "";
//注意这里参数名必须全部小写,且必须有序
string1 = "jsapi_ticket=" + jsapi_ticket +
"&noncestr=" + nonce_str +
"×tamp=" + timestamp +
"&url=" + url;
System.out.println(string1);
try
{
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(string1.getBytes("UTF-8"));
signature = byteToHex(crypt.digest());
}
catch (NoSuchAlgorithmException e)
{
e.printStackTrace();
}
catch (UnsupportedEncodingException e)
{
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);
return ret;
}
private static String byteToHex(final byte[] hash) {
Formatter formatter = new Formatter();
for (byte b : hash)
{
formatter.format("%02x", b);
}
String result = formatter.toString();
formatter.close();
return result;
}
private static String create_nonce_str() {
return UUID.randomUUID().toString();
}
private static String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}
第三步:跳转界面,并且将数据放入model中(jsapi实体就不写了)
/**
* @Description 调用微信jssdk(成功之后要打开的界面!)
* @Creat date 2018-12-1
* @author yulin
* @return updatepicture.html
*/
@RequestMapping("updatepicture")
public String updatepicture(Model model) {
String jsapi_ticket =JsapiTicketUtil.getJSApiTicket();
String url=""; //url是你当前访问的界面的url
Map<String,String> map = Sign.sign(jsapi_ticket, url);
Jsapi jsapi=new Jsapi();
jsapi.setTimestamp(map.get("timestamp"));
jsapi.setNonceStr(map.get("nonceStr"));
jsapi.setSignature(map.get("signature"));
jsapi.setAppId("你的appID");
System.out.println(jsapi);
model.addAttribute("jsapi",jsapi);
return "weixinpage/updatepicture";
}
第四部:前台thymeleaf进行调用,(这里我把所有的接口都写上了)
wx.config({
debug: false,
appId: '[[${jsapi.appId}]]',
timestamp: '[[${jsapi.timestamp}]]',
nonceStr: '[[${jsapi.nonceStr}]]',
signature: '[[${jsapi.signature}]]',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
});