主要为以下实现步骤:
1.绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(特别提示不需要加上http或者https,吃过亏)
2.页面引入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.通过config接口注入权限验证配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
wx.config({ debug: true , // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '' , // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '' , // 必填,生成签名的随机串 signature: '' , // 必填,签名,见附录1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); |
4.通过ready接口处理成功验证
1
2
3
4
5
|
wx.ready( function (){ //详细代码 }); |
5.通过error接口处理失败验证
1
|
wx.error( function (res){}); |
详细页面代码
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(){ /***用户点击分享到微信圈后加载接口接口*******/ 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: '刮刮乐', desc: '刮刮乐开始啦', link: '<%=basePath%>/lottery/lottery.action?lottery.id=${lottery.id}', imgUrl: '<%=basePath%>/resources/qjc/img/start.png', trigger: function (res) { //alert('用户点击发送给朋友'); }, success: function (res) { alert('您已获得抽奖机会,赶紧去赢大奖吧~~'); //分享之后增加游戏次数 $.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 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口 wx.onMenuShareTimeline({ title: '刮刮乐', desc: '刮刮乐开始啦', link: '<%=basePath%>/lottery/lottery.action?lottery.id=${lottery.id}', imgUrl: '<%=basePath%>/resources/qjc/img/start.png', trigger: function (res) { //alert('用户点击分享到朋友圈'); }, success: function (res) { alert('您已获得抽奖机会,赶紧去赢大奖吧~~'); //分享之后增加游戏次数 $.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后台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(); //时间戳 String nonceStr = WxConfig.getUUID(); //随机字符串,不长于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; } //生成随机字符串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权限验证的签名串:" +signValue); //这个签名.主要是给加载微信js使用.别和上面的搞混了. String signature = Sha1Util.getSha1((signValue)); logger.info( "微信JS-SDK权限验证的签名:" +signature); return signature; } |
另外项目用到的Sha1Util.java和MD5Util.java可以直接在平台下载。