主要為以下實(shí)現(xiàn)步驟：
1.綁定域名
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。（特別提示不需要加上http或者h(yuǎn)ttps,吃過(guò)虧）
2.頁(yè)面引入js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
3.通過(guò)config接口注入權(quán)限驗(yàn)證配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
wx.config({debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。 appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí) timestamp: , // 必填，生成簽名的時(shí)間戳 nonceStr: '', // 必填，生成簽名的隨機(jī)串 signature: '',// 必填，簽名，見附錄1 jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2}); |
4.通過(guò)ready接口處理成功驗(yàn)證
|
1
2
3
4
5
|
wx.ready(function(){ //詳細(xì)代碼}); |
5.通過(guò)error接口處理失敗驗(yàn)證
|
1
|
wx.error(function(res){}); |
詳細(xì)頁(yè)面代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<script> //微信分享朋友圈 $(function(){ /***用戶點(diǎn)擊分享到微信圈后加載接口接口*******/ var url=window.location.href.split('#')[0]; url = url.replace(/&/g, '%26'); console.log("url:"+url); $.ajax({ url: "<%=basePath%>/lottery/shareToFriend.action?url="+url, type: "POST", async:true, cache: false, dataType: "json", success: function(data){ wx.config({ debug: false, appId: 'wx2948dfef9ef421ee', timestamp:data.timeStamp, nonceStr:data.nonceStr, signature:data.signature, jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'hideOptionMenu', 'onMenuShareAppMessage' ] }); wx.ready(function(){ //wx.hideOptionMenu();/***隱藏分享菜單****/ wx.checkJsApi({ jsApiList: [ 'getLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage' ], success: function (res) { //alert(res.errMsg); } }); wx.onMenuShareAppMessage({ title: '刮刮樂(lè)', desc: '刮刮樂(lè)開始啦', link: '<%=basePath%>/lottery/lottery.action?lottery.id=${lottery.id}', imgUrl: '<%=basePath%>/resources/qjc/img/start.png', trigger: function (res) { //alert('用戶點(diǎn)擊發(fā)送給朋友'); }, success: function (res) { alert('您已獲得抽獎(jiǎng)機(jī)會(huì)，趕緊去贏大獎(jiǎng)吧～～'); //分享之后增加游戲次數(shù) $.ajax({ url: "<%=basePath%>/lottery/rewardPlayCount.action?openId=${openId}&lotteryId=${lottery.id}&shareType=friend", type: "POST", async:true, cache: false, dataType: "json", success: function(data){ } }); }, cancel: function (res) { //alert('已取消'); }, fail: function (res) { alert(res.errMsg); } }); // 2.2 監(jiān)聽“分享到朋友圈”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口 wx.onMenuShareTimeline({ title: '刮刮樂(lè)', desc: '刮刮樂(lè)開始啦', link: '<%=basePath%>/lottery/lottery.action?lottery.id=${lottery.id}', imgUrl: '<%=basePath%>/resources/qjc/img/start.png', trigger: function (res) { //alert('用戶點(diǎn)擊分享到朋友圈'); }, success: function (res) { alert('您已獲得抽獎(jiǎng)機(jī)會(huì)，趕緊去贏大獎(jiǎng)吧～～'); //分享之后增加游戲次數(shù) $.ajax({ url: "<%=basePath%>/lottery/rewardPlayCount.action?openId=${openId}&lotteryId=${lottery.id}&shareType=friendCircle", type: "POST", async:true, cache: false, dataType: "json", success: function(data){ } }); }, cancel: function (res) { //alert('已取消'); }, fail: function (res) { alert(res.errMsg); } }); wx.error(function (res) { alert(res.errMsg); }); }); }, error: function() { alert('ajax request failed!!!!'); return; } }); }); </script> |
java后臺(tái)action代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//微信分享 public void shareToFriend(){ HttpServletRequest request = ServletActionContext.getRequest(); String timeStamp = Sha1Util.getTimeStamp();//時(shí)間戳 String nonceStr = WxConfig.getUUID();//隨機(jī)字符串，不長(zhǎng)于32位 String url=request.getParameter("url"); String signature = WxConfig.getSignature("APPId", "APP_secret", url, timeStamp, nonceStr); request.setAttribute("timeStamp", timeStamp); request.setAttribute("nonceStr", nonceStr); request.setAttribute("url", url); request.setAttribute("signature", signature); WXjssdk result = new WXjssdk(timeStamp,nonceStr,signature,url); CommonUtil.returnMsg(ServletActionContext.getResponse(), new Gson().toJson(result)); } |
WxConfig.java代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
">//jsapi_ticket public final static String WEIXIN_JSAPI_TICKET_URL ="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi"; //access_token public static String getAccessToken(String appId,String appSecret){ String access_token; access_token = mapToken.get("accessToken"); if(access_token==null){ String url = HttpUtil.WEIXIN_HOST_API + "/cgi-bin/token?grant_type=client_credential&appid="+appId+"&secret="+appSecret; String menuJsonStr = HttpUtil.get(url); final Type type = new TypeToken<Map<String, Object>>() {}.getType(); final Map<Object, Object> accessTokenInfo = new Gson().fromJson(menuJsonStr, type); try{ access_token = accessTokenInfo.get("access_token").toString(); Object expires_in = accessTokenInfo.get("expires_in"); mapToken.put("accessToken", access_token); logger.info("access_token:"+access_token+";expires_in:"+expires_in); }catch (JSONException e) { access_token = null; e.printStackTrace(); logger.error("errcode:{}:"+accessTokenInfo.get("errcode")+"errmsg:{}:"+accessTokenInfo.get("errmsg")); } } return access_token; } //jsapi_ticket public static String getJsapiTicket(String accessToken){ String ticket; ticket = mapTicket.get("ticket"); if(ticket==null){ String url = HttpUtil.WEIXIN_HOST_API + "/cgi-bin/ticket/getticket?access_token="+accessToken+"&type=jsapi"; String menuJsonStr = HttpUtil.get(url); final Type type = new TypeToken<Map<String, Object>>() {}.getType(); final Map<Object, Object> ticketInfo = new Gson().fromJson(menuJsonStr, type); try{ ticket = ticketInfo.get("ticket").toString(); String expires_in = ticketInfo.get("expires_in").toString(); mapTicket.put("ticket", ticket); logger.info("jsapi_ticket:"+ticket+";expires_in:"+expires_in); }catch (JSONException e) { ticket = null; e.printStackTrace(); logger.error("ticket errcode:{}:"+ticketInfo.get("errcode")+"errmsg:{}:"+ticketInfo.get("errmsg")); } } return ticket; } //生成隨機(jī)字符串UUID public static String getUUID(){ String uuid = UUID.randomUUID().toString().trim().replaceAll("-", ""); return uuid; } //JS-SDK Signature public static String getSignature(String appId,String appSecret,String url,String timeStamp,String nonceStr){ String accessToken = getAccessToken(appId,appSecret); String jsapi_ticket = getJsapiTicket(accessToken); logger.info("accessToken==="+accessToken); String signValue = "jsapi_ticket="+jsapi_ticket+"&noncestr="+nonceStr+"×tamp="+timeStamp+"&url="+url; logger.info("微信JS-SDK權(quán)限驗(yàn)證的簽名串："+signValue); //這個(gè)簽名.主要是給加載微信js使用.別和上面的搞混了. String signature = Sha1Util.getSha1((signValue)); logger.info("微信JS-SDK權(quán)限驗(yàn)證的簽名："+signature); return signature; } |
另外項(xiàng)目用到的Sha1Util.java和MD5Util.java可以直接在平臺(tái)下載。
