微信二次分享解决方案

这几天做一个微信公众号的需求,有个分享功能。发现分享从公众号分享到微信是正常的,可以看到缩略图、名称、描述,但是直接转发该分享或者点开该分享再次通过微信分享时,就只出现了链接地址,也没有缩略图。如下图所示:

正常
图1 第一次分享-正确

二次分享不正确
图2 第二次分享-不正确

原因:我的情况是,触发分享事件的页面与分享的目标页面不是同一个页面,当用户通过分享链接点开页面并分享该页面,由于该页面(前面提到的分享的目标页面)并未通过config接口注入权限验证配置和分享信息配置(缩略图、名称、描述),所以会出现图2的情况。
解决方案:在分享的目标页面通过config接口注入权限验证配置和调用微信分享接口配置分享信息(缩略图、名称、描述)即可。

微信JS-SDK说明文档

分享功能如下:
在页面引入js文件:

<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8" async="async"></script>
 function getWeChatAuthorizationAndShare(){ //也可以用立即执行函数
     $.ajax({
         url: '/api/getJsAPI',//获取签名的接口
         data: {url: location.href},
         type: 'post',
         success: function (json) {
             if (wx) {
                 wx.config({
	                 debug:false,
                     appId: json.appid,// 必填,公众号的唯一标识
                     timestamp: json.timestamp,// 必填,生成签名的时间戳
                     nonceStr: json.nonce,// 必填,生成签名的随机串
                     signature: json.signature,// 必填,签名,见附录1
                     jsApiList: [
                         'onMenuShareAppMessage', //1.0 分享到朋友
                         'onMenuShareTimeline', //1.0分享到朋友圈
                         'updateAppMessageShareData', //1.4 分享到朋友
                         'updateTimelineShareData', //1.4分享到朋友圈
                     ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                 });
                 wx.ready(function () {
                     var imgUrl = $('.card-item').find('.card-img')[0].src,//缩略图
                         link = '/card/toCardSharePage?cid=' + id + '&giveUid=' + giveUid;//分享页面链接
                     var shareData = {
                         title: '某某用户专享优惠卡券赠予',
                         desc: '好的东西我都想与你一起分享~',//这里请特别注意是要去除html
                         link: link,
                         imgUrl: imgUrl
                     };
                     if(wx.onMenuShareAppMessage){ //微信文档中提到这两个接口即将弃用,故判断
                         wx.onMenuShareAppMessage(shareData);//1.0 分享到朋友
                         wx.onMenuShareTimeline(shareData);//1.0分享到朋友圈
                     }else{
                         wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
                         wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
                     }
                     
                 });
             }
             
         }
         
     });
 }
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值