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

深藏阁楼爱情的钟 2023-05-30 06:10 32阅读 0赞

先上官方文档：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); 
       } 
       }); 
       
       })

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

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

=====================   新添加内容：

![70][]

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

[70]: https://img-blog.csdn.net/20180504145348857?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0liZWxpZXZlU21pbGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70