微信转发或分享朋友圈带缩略图、标题和描述的实现方法

微信转发或分享朋友圈带缩略图、标题和描述的实现方法

问题描述:

  1. 微信公众号中(页面均用vue),分享出去的页面,二次分享不能获取缩略和描述;
  2. APP内嵌的H5页面(有用vue写的页面,也有jsp页面),分享给好友或朋友圈,二次分享不能获取缩略和描述;

微信自动转发朋友圈 python_分享朋友圈

问题思考:

百度总结,发现网友贡献最多的就是在body之后加一个img标签并且设置display:none,虽然这种方法感觉不科学,但我还是尝试了一下,发现在微信6.5.5版本之后已经失效了。分享只能通过设置微信的分享接口来实现缩略图和简介的调用,接通jssdk。
不管是微信公众号中分享的内容 还是 普通的H5页面 都需要微信签名验证的。

解决方案

1.在jsp页面中

页面引入

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/js/common/shareJssdk.js"></script>

shareJssdk.js内容为:

$(function(){
    var url = encodeURIComponent(location.href.split('#')[0]);
    //分享
    $.ajax({
        type : "get",
        url : "/phjf/api/v1/sys/getJssdkSgin",
        dataType : "json",
        data:{
            url:url
        },
        success : function(result){
            wxstart(result.data);
        },
        error:function(data){
            alert("连接失败!");
        }
    });

    function wxstart(data){
        var url = location.href;  //分享的文章地址
        var appId = data.appId;
        var timestamp = data.timestamp;
        var nonceStr = data.nonceStr;
        var signature = data.signature;
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: appId, // 必填,公众号的唯一标识
            timestamp: timestamp, // 必填,生成签名的时间戳
            nonceStr: nonceStr, // 必填,生成签名的随机串
            signature: signature,// 必填,签名,见附录1
            jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ" , "onMenuShareWeibo"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });

        wx.ready(function(){
            var shareData = {
                title: document.title,
                desc: '政府牵头推动成立的惠民金融平台',
                link: location.href,
                imgUrl: 'http://file.puhuijinfu.com/imgLoader/test/phjf/img/2018/10/11/xyswkVTROKdq1xBzEYMB.jpeg'
            };
            wx.onMenuShareAppMessage(shareData);
            wx.onMenuShareTimeline(shareData);
            wx.onMenuShareQQ(shareData);
            wx.onMenuShareWeibo(shareData);
        });
    }
})



确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。



2.在vue中设置
安装微信sdk

npm install weixin-js-sdk

在需要用到分享的页面,引入sdk

import wx from 'weixin-js-sdk';

在App.vued的,methods方法中加入这个公用方法

//获取分享配置
          jssdkSgin(){            
              var _this = this;
              var url = encodeURIComponent(location.href.split('#')[0]); 
              Http.getJssdkSgin(url).then(response => {
                  var result = response.data;
                  if(response.code == 1) {
                      followUrl =  result.followUrl;
                      localStorage.setItem('followUrl',result.followUrl);
                      wx.config({
                          debug: false,//生产环境需要关闭debug模式
                          appId: result.appId,//appId通过微信服务号后台查看
                          timestamp: result.timestamp,//生成签名的时间戳
                          nonceStr: result.nonceStr,//生成签名的随机字符串
                          signature: result.signature,//签名
                          jsApiList: [
                              'onMenuShareTimeline','onMenuShareAppMessage'
                          ]
                      });
                  }else{
                      _this.$message({
                          message: response.msg,
                          center: true,
                          duration:2000,
                          customClass:'mesTip'
                      });
                  }
              })
          },

在页面的methods中,加上shareWeChat方法,
data中的数据

//======data中的数据
shareConfig:{
                  title:'普惠金服',
                  desc:'政府牵头推动成立的惠民金融平台',
                  share_url:location.href,
                  share_img:'http://file.puhuijinfu.com/imgLoader/test/phjf/img/2018/10/11/xyswkVTROKdq1xBzEYMB.jpeg'
                },

//methods方法
//设置微信分享
          shareWeChat(){
              let share_title = this.shareConfig.title;
              let _this = this;
              var config = {
                  title: share_title, // 分享标题
                  desc:_this.shareConfig.desc,
                  link: _this.shareConfig.share_url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: _this.shareConfig.share_img,
                  type:'link',
                  success: function() {
                      console.log("success")
                  },
                  cancel: function() {
                      console.log("failf")
                  }
              };
              wx.ready(function () {
                  // 分享到朋友圈
                  wx.onMenuShareTimeline(config);
                  //分享给朋友
                  wx.onMenuShareAppMessage(config);
              });
          },

注意:

  1. 特别注意,需要在公众号中添加js安全域名。开发公众号中,好像只能添加一个;生产公众号,最多可以添加3个。 不加安全域名,会报错的。
  2. 特别注意url需要动态获取,传递给后台,否则会报错。因为二次分享的时候,微信会自动在url后面追加一串。如果不传递,就会造成url不对,那么签名就不正确

参考链接
静态页面实现微信分享带缩略图、标题和描述微信转发或分享朋友圈带缩略图、标题和描述的实现方法微信分享链接出现config:invalid signature错误的解决方法