html 页面分享到微信转发朋友及朋友圈显示标题,描述,及图片。

214 阅读1分钟

html 页面分享到微信转发朋友及朋友圈显示标题,描述,及图片。

<script src="javascript/jquery-3.5.1.min.js"></script>
<script type="text/javascript"  src="https://res2.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
$.ajax({
  async: false,
  url: "请求接口",
  data: {
    url: location.href.split("#")[0] // 当前页面地址
  },
  success: function(res) {
      var json = res.data      
      wx.config({       
        appId: '填写appId',
        timestamp: json.timestamp,
        nonceStr: json.noncestr,
        signature: json.signature,
        jsApiList: [ 
        "onMenuShareAppMessage",
        "onMenuShareTimeline",
        "updateAppMessageShareData",
        "updateTimelineShareData"
      ]
  });
  }
})
wx.ready(function () {  
      let imgUrl = document.querySelector(`link[rel='icon']`) ||
              document.querySelector(`link[rel='shortcut icon']`);             
      var shareData = {
        title: document.title,//标题
        desc: document.querySelector('meta[name="Description"]').content, //描述 这里请特别注意是要去除html
        link: location.href.split("#")[0], //域名必须JS安全域名
        imgUrl:imgUrl.href,//封面图片
        success: function () {
          console.log('分享成功')
        }
      };
      if(wx.onMenuShareAppMessage){     
          //微信文档中提到这两个接口即将弃用,故判断
          wx.onMenuShareAppMessage(
          shareData
        );
          wx.onMenuShareTimeline(
            shareData
          );
      }else{
          wx.updateAppMessageShareData(shareData); //1.4 分享到朋友
          wx.updateTimelineShareData(shareData); //1.4分享到朋友圈
      }
});

wx.error(function(res){
  console.log(res)
  
});
</script>