解决从APP分享到微信再通过微信转发给好友自定义转发样式的问题

案例分析

处理前

处理后

通用分享js代码

var imgUrl = 'http://tzhh5.tzhhx.com/html/tzh/images/logo.png';
var lineLink = window.location.href;
//var descContent = '';
//var shareTitle = '';
var appid = '';
var linkMy = encodeURIComponent(location.href.split('#')[0])
console.log(encodeURIComponent(location.href.split('#')[0]))
$.ajax({
  type: 'POST',
  url: "http://47.94.241.166:8191/tzh/api/signature", //这个地址并非通用且长期有效，请去微信官方查看文档，并自行配置
  dataType: "json",
  data: {
    url: encodeURIComponent(location.href.split('#')[0])
  },
  success: function(response) {
  	console.log(response.data)
    var appId = response.data.appid;
    var timestamp = response.data.timestamp;
    var nonceStr = response.data.nonce;
    var signature = response.data.signature;
//  var signature = 'aaaaa';
    
    wx.config({
      debug: false,
      appId: appId,
      timestamp: timestamp,
      nonceStr: nonceStr,
      signature: signature,
      jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage']
    });
    wx.ready(function() {
    	console.log(imgUrl)
      wx.onMenuShareTimeline({
        title: shareTitle, // 分享标题
        link: lineLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: imgUrl//, // 分享图标
//      success: function() {
//        // 用户确认分享后执行的回调函数
//      },
//      cancel: function() {
//        // 用户取消分享后执行的回调函数
//      }
      }),
      wx.onMenuShareAppMessage({
        title: shareTitle, // 分享标题
        desc: descContent, // 分享描述
        link: lineLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: imgUrl, // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: ''//, // 如果type是music或video，则要提供数据链接，默认为空
//      success: function() {
//        // 用户确认分享后执行的回调函数
//        alert('分享成功')
//      },
//      cancel: function() {
//        // 用户取消分享后执行的回调函数
//      }
      })
    });
  },
  error: function(response) {
    window.parent.growl("删除失败[" + response.responseText + "]!", "error");
  }
});

备注：

1、引入微信的js库<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" ></script>

2、将要转发的链接网址配置到公众号的安全域名下

3、公众号必须认证，才能有调取微信转发接口的权限

4、在所用公众号配置js白名单

5、服务端需配合生成wx.config所需的字段

6、在向后台传前端网址时需进行encodeURIComponent(location.href.split('#')[0])编码，且后台接收时需要进行相应转码

详情请参考微信官方文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115