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

最新推荐文章于 2024-09-18 00:33:03 发布

置顶三人行，必有我师！！！

最新推荐文章于 2024-09-18 00:33:03 发布

阅读量1.5w

点赞数 6

分类专栏： H5 文章标签：微信分享

本文链接：https://blog.csdn.net/yangdl6/article/details/86174301

版权

H5 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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

问题描述：

微信公众号中（页面均用vue），分享出去的页面，二次分享不能获取缩略和描述；
APP内嵌的H5页面（有用vue写的页面，也有jsp页面），分享给好友或朋友圈，二次分享不能获取缩略和描述；

问题思考：

百度总结，发现网友贡献最多的就是在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);
              });
          },

注意：