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

先上官方文档: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接口权限验证
  1. wx.config({
  2. debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  3. appId: '', // 必填,公众号的唯一标识
  4. timestamp: , // 必填,生成签名的时间戳
  5. nonceStr: '', // 必填,生成签名的随机串
  6. signature: '',// 必填,签名
  7. jsApiList: [] // 必填,需要使用的JS接口列表
  8. });

    这里着重说下jsApiList参数:

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

        这里添加的js接口名称要跟下面的wx.ready()里面的接口顺序对应,当时就吃了这个亏~;

         js接口名称见官方文档。

    其他参数的值往下看...

 

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

    备注:

 

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

 

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

 

Over...

 

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

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

    直接上后台代码:

  1. public class WeixinShareController extends Controller{
  2. public void index(){
  3. // 微信appid
  4. String appid = "xxx";
  5. // 微信secret
  6. String secret = "xxx";
  7. // 初始化access_token
  8. String access_token = "";
  9. // 获取URL 这里的URL指的是需要分享的那个页面地址,建议这里不要写成固定地址,而是获取当前地址.
  10. String url = getPara("url");
  11. // 创建通过Api获取Token的链接与参数
  12. String requestTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET";
  13. requestTokenUrl = requestTokenUrl.replace("APPID", appid);
  14. requestTokenUrl = requestTokenUrl.replace("SECRET", secret);
  15. JSONObject jsonObjectToken = CommonUtil.httpsRequest(requestTokenUrl, "GET", null);
  16. if(StrKit.notNull(jsonObjectToken)){
  17. // 创建日期赋值为当前日期
  18. createDate = new Date().getTime()/1000;
  19. // 获取Token值
  20. access_token = jsonObjectToken.getString("access_token");
  21. // 获取Token有效期值
  22. expires_in = jsonObjectToken.getLong("expires_in");
  23. }
  24. String requestUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
  25. requestUrl = requestUrl.replace("ACCESS_TOKEN", access_token);
  26. // 获取凭证
  27. JSONObject jsonObject = CommonUtil.httpsRequest(requestUrl, "GET", null);
  28. if(StrKit.notNull(jsonObject)){
  29. try {
  30. String ticket = jsonObject.getString("ticket");
  31. String noncestr = WebUtils.getRandom(7);
  32. long timestamp = new Date().getTime()/1000;
  33. String param = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;
  34. String signature = DigestUtils.shaHex(param);
  35. WeixinShare weixinShare = new WeixinShare();
  36. weixinShare.setWxNoncestr(noncestr);
  37. weixinShare.setWxTimestamp(timestamp);
  38. weixinShare.setWxSignature(signature);
  39. setAttr("weixinShare",weixinShare);
  40. setAttr("appid",appid);
  41. } catch (Exception e) {
  42. e.printStackTrace();
  43. setAttr("errorMessage","服务器异常!");
  44. }
  45. }
  46. renderJson();
  47. }
  48. }

 

前端代码:

 

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

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

    代码:

  1. $(function(){
  2. var title = $("#title").val();
  3. var desc = $("#desc").val();
  4. var name = $("#program_name").val();
  5. var imgUrl = $("#imgurl").val();
  6. var path = $("#path").val();
  7. var url = location.href.split('#')[0];
  8. var signature,timestamp,noncestr,appid;
  9. /*微信分享*/
  10. $.ajax({
  11. url:path+"/weixinshare",
  12. type:'GET',
  13. data:{
  14. url : url
  15. },
  16. success:function (data) {
  17. signature = data.weixinShare.wx_signature;
  18. timestamp = data.weixinShare.wx_timestamp;
  19. noncestr = data.weixinShare.wx_noncestr;
  20. appid = data.appid;
  21. wx.config({
  22. debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  23. appId: appid, // 必填,公众号的唯一标识
  24. timestamp: timestamp, // 必填,生成签名的时间戳
  25. nonceStr: noncestr, // 必填,生成签名的随机串
  26. signature: signature,// 必填,签名
  27. jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填,需要使用的JS接口列表
  28. });
  29. wx.ready(function(){
  30. //分享给朋友
  31. wx.onMenuShareAppMessage({
  32. title: title, // 分享标题
  33. desc: desc, // 分享描述
  34. link: path, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  35. imgUrl:imgUrl, // 分享图标s
  36. type: 'link', // 分享类型,music、video或link,不填默认为link
  37. dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
  38. success: function () {
  39. // 用户确认分享后执行的回调函数
  40. // alert("OK");
  41. },
  42. cancel: function () {
  43. // 用户取消分享后执行的回调函数
  44. // alert("fail");
  45. }
  46. });
  47. //分享给朋友圈
  48. wx.onMenuShareTimeline({
  49. title: title, // 分享标题
  50. link: path, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  51. imgUrl: imgUrl, // 分享图标
  52. success: function () {
  53. // 用户确认分享后执行的回调函数
  54. },
  55. });
  56. });
  57. },
  58. error:function(error){
  59. console.log(error);
  60. }
  61. });
  62. })

 

以上就是整个功能的全部代码了。第一次写博客思路上可能有些乱,我会在之后去整理下这块的文字描述。

 

 

 

 

不知道有没有同学发现这个功能其实有个BUG,就是文档中说jsapi_ticket的有效期为7200秒。需要全局缓存这货,但是在代码中并没有处理这块的逻辑。所以,你们不要忘记处理这块的逻辑啊~

=====================   新添加内容:

说明:分享缩略图要使用外网能够访问到的图片路径,不要使用项目路径下的图片路径,否则分享的时候是不会显示的。

原文链接:加载失败,请重新获取