服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|JavaScript|易语言|

服务器之家 - 编程语言 - JAVA教程 - 微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解

微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解

2021-04-13 11:56Java教程网 JAVA教程

本文分享了微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能介绍,大家可以参考一下

主要为以下实现步骤:

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可以直接在平台下载。 

延伸 · 阅读

精彩推荐