java版微信分享功能(支持分享给好友/分享到朋友圈)

点击上方[全栈开发者社区]右上角[...][设为星标⭐]

640?

先上官方文档:http://mp.weixin.qq.com/wiki/home/index.html

做之前建议先过遍文档,文档都说的清晰明了。

如果已经看过文档,那我们一起整理下JSSDK的流程步骤: 

绑定域名

        登陆微信公众号,根据下列路径找到添加页面:

        微信公众号 - 公众号设置 - 功能设置 - JS接口安全域名

        添加步骤:

            1.下载txt文件(MP_verify_0HU5eN6Tzfwovxxx.txt),放到项目根目录下;

            2.添加项目访问域名地址,点击保存。在需要调用JS接口的页面引入js文件(页面不支持https的换成http://):

            https://res.wx.qq.com/open/js/jweixin-1.0.0.js

config接口权限验证

wx.config({	
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。	
    appId: '', // 必填,公众号的唯一标识	
    timestamp: , // 必填,生成签名的时间戳	
    nonceStr: '', // 必填,生成签名的随机串	
    signature: '',// 必填,签名	
    jsApiList: [] // 必填,需要使用的JS接口列表	
});

 这里着重说下jsApiList参数:

        将要用到的接口用引号形式写进去,逗号隔开('','');

        这里添加的js接口名称要跟下面的wx.ready()里面的接口顺序对应。

         js接口名称见官方文档。

通过ready接口处理成功验证:

wx.ready(function(){	
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。	
});

 备注:

      里面的js接口顺序一定要按照config()接口中的参数jsApiList中的js接口顺序排列。

通过error接口处理失败验证:

wx.error(function(res){	
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。	
});

Over...

    额,当然,只是前端的流程步骤结束了。接下来我们看后台(java)是怎么处理config()接口中需要的那些参数的。

    这里需要用到公众号的几个参数:   appid、secret 。

    直接上后台代码:

public class WeixinShareController extends Controller{	
  	
  public void index(){	
    	
    // 微信appid	
    String appid = "xxx";	
    // 微信secret	
    String secret = "xxx";	
    // 初始化access_token	
    String access_token = "";	
    //  获取URL 这里的URL指的是需要分享的那个页面地址,建议这里不要写成固定地址,而是获取当前地址.	
    String url = getPara("url");	
    	
    // 创建通过Api获取Token的链接与参数	
    String requestTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET";	
    requestTokenUrl = requestTokenUrl.replace("APPID", appid);	
    requestTokenUrl = requestTokenUrl.replace("SECRET", secret);	
        	
    JSONObject jsonObjectToken = CommonUtil.httpsRequest(requestTokenUrl, "GET", null);	
    if(StrKit.notNull(jsonObjectToken)){	
      // 创建日期赋值为当前日期	
      createDate = new Date().getTime()/1000;	
      // 获取Token值	
      access_token = jsonObjectToken.getString("access_token");	
      // 获取Token有效期值	
      expires_in = jsonObjectToken.getLong("expires_in");	
    }	
    	
    String requestUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";	
    requestUrl = requestUrl.replace("ACCESS_TOKEN", access_token);	
    // 获取凭证	
    JSONObject jsonObject = CommonUtil.httpsRequest(requestUrl, "GET", null);	
    if(StrKit.notNull(jsonObject)){	
      try {	
        String ticket = jsonObject.getString("ticket");	
        String noncestr = WebUtils.getRandom(7);	
        long timestamp = new Date().getTime()/1000;	
        	
        String param = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;	
        String signature = DigestUtils.shaHex(param);	
        	
        WeixinShare weixinShare = new WeixinShare();	
        weixinShare.setWxNoncestr(noncestr);	
        weixinShare.setWxTimestamp(timestamp);	
        weixinShare.setWxSignature(signature);	
        setAttr("weixinShare",weixinShare);	
        setAttr("appid",appid);	
      } catch (Exception e) {	
        e.printStackTrace();	
        setAttr("errorMessage","服务器异常!");	
      }	
    }	
    renderJson();	
  }	
}

前端代码:

    这里建议ur参数不要写成固定地址,用提供的获取当前路径的方法获取,可以保证该js的重用:

var url    = location.href.split('#')[0];

代码:


	
$(function(){	
  var title        = $("#title").val();	
  var desc      = $("#desc").val();	
  var name      = $("#program_name").val();	
  var imgUrl       = $("#imgurl").val();	
  var path   = $("#path").val();	
  var url    = location.href.split('#')[0];	
  	
  var signature,timestamp,noncestr,appid;	
 	
  /*微信分享*/	
   $.ajax({	
         url:path+"/weixinshare",	
         type:'GET',	
         data:{	
           url : url	
         },	
         success:function (data) {	
           signature = data.weixinShare.wx_signature;	
           timestamp = data.weixinShare.wx_timestamp;	
           noncestr = data.weixinShare.wx_noncestr;	
           appid = data.appid;	
           wx.config({	
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。	
                appId: appid, // 必填,公众号的唯一标识	
                timestamp: timestamp, // 必填,生成签名的时间戳	
                nonceStr: noncestr, // 必填,生成签名的随机串	
                signature: signature,// 必填,签名	
                jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填,需要使用的JS接口列表	
            });	
           	
           wx.ready(function(){	
            //分享给朋友	
             wx.onMenuShareAppMessage({	
               title: title, // 分享标题	
               desc: desc, // 分享描述	
               link: path, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致	
               imgUrl:imgUrl, // 分享图标s	
               type: 'link', // 分享类型,music、video或link,不填默认为link	
               dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空	
               success: function () {	
               // 用户确认分享后执行的回调函数	
//                 alert("OK");	
               },	
               cancel: function () {	
               // 用户取消分享后执行的回调函数	
//                 alert("fail");	
               }	
               });	
             //分享给朋友圈	
             wx.onMenuShareTimeline({	
                  title: title, // 分享标题	
                  link: path, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致	
                  imgUrl: imgUrl, // 分享图标	
                  success: function () {	
                  // 用户确认分享后执行的回调函数	
              },	
             });	
           });	
         },	
         error:function(error){	
             console.log(error);	
         }	
  });   	
})

以上就是整个功能的全部代码了。

原文链接:https://blog.csdn.net/IbelieveSmile/article/details/80176563

留言打卡30天,祝贺第一批坚持打卡的小伙伴们满月啦,继续努力!smiley_57.png

觉得本文对你有帮助?请分享给更多人

关注「全栈开发者社区」加星标,提升全栈技能

本公众号会不定期给大家发福利,包括送书、学习资源等,敬请期待吧!

如果感觉推送内容不错,不妨右下角点个在看转发朋友圈或收藏,感谢支持。

好文章,我在看❤️

你可能感兴趣的:(java版微信分享功能(支持分享给好友/分享到朋友圈))