微信分享实现自定义标题、摘要、图片

1.如果是没有自定义过的网页，使用微信分享如图

微信分享给朋友.png

2.使用自定义逻辑的网页进行微信分享，如图

自定义分享摘要.png

3.自定义分享的实现

1.引入JS

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.在页面头部定义分享内容

<meta name="description" id="sharedata" content="分享描述" data-img="/images/1-1.png">
//data-img为分享的图片链接

3.写分享的JS文件

/**
 * Created by if on 2020/02/26.
 */
var wxshare={};
(function($fn){
  $fn.const_url={
    wxshareticket:''//获取签名等信息后台程序链接
  };
  $fn.wxconfig=function(){
    var ret;
    var json='{"url":"'+location.href.split('#')[0]+'"}';
    $.ajax({
      type: "post",
      contentType:"application/json,charset=utf-8",
      url:$fn.const_url.wxshareticket,
      dataType: "json",
      data:json,
      success: function (data) {
        wx.config({
          debug: false,
          appId: data.appid,
          nonceStr: data.noncestr,
          timestamp: data.timestamp,
          signature:data.signature,
          jsApiList: [
            'checkJsApi',
            'updateTimelineShareData',
            'updateAppMessageShareData',
            'onMenuShareWeibo'
          ]
        });
      }
    })
  };
  $fn.h_wxshare=function(json){
    wx.ready(function () {
      var shareData = {
        title: json.title,
        desc: json.desc,
        link: json.url,
        imgUrl: json.imgurl,
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {// 用户确认分享后执行的回调函数
        },
        cancel: function () {// 用户取消分享后执行的回调函数
        }
      };
      wx.updateAppMessageShareData(shareData);
      wx.updateTimelineShareData(shareData);
      wx.onMenuShareWeibo(shareData);
    });
  };
})(wxshare);
$(document).ready(function(){
  // 微信分享
  var h_c_origin=window.location.origin;
  var $sharedata=$("#sharedata");//获取到自定义内容的meta标签
  var desc=$sharedata.attr('content');//获取到在页面meta中定义的摘要描述内容

  wxshare.wxconfig();
  wxshare.h_wxshare({
    url:location.href.split('#')[0],//页面链接
    title:document.title,//分享的标题，可题自定义，此处将文章的title中内容作为biao
    desc:desc,//在页面meta中定义的摘要描述内容
    imgurl:h_c_origin+$sharedata.attr("data-img")//注意，这个链接必须是绝对链接，即:http://www/abc.com/i/1-1.png
  });
});

4.参考文档

微信开放文档

5.注意

微信转发显示的这张图，在原图过大，过小，比例不合适，图片像素不够等原因，经过微信处理以后都会模糊不清，所以最好选用不小于200*200的方图

最后编辑于：2020.03.19 11:02:40