纯前端实现多个微信H5页面分享出去指定到同一连接

APP内链H5或者公众号开发无法避免的会涉及到社交平台分享的功能，本篇只讲解有关微信的相关分享：

首先解决分享出去后展示自定义图文  注意：微信分享的H5必须要有绑定的公众号或者服务好平台，并且绑定了页面和接口的安全域名

第一步：在分享的页面引入微信JSSKD 

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

配置并初始化分享接口：

function shareFn(title, linkUrl, desc, imgUrl) {
var local = window.location.href.split('#')[0];

  $.ajax({
url: linkUrl,

        dataType: 'json',

        type: 'POST',

        data:{"url":local},

        async: true,
success: function(data){
    wx.config({
    debug: false, // 开启调试模式,
    appId: data.data.appid, // 必填，公众号的唯一标识
    timestamp:data.data.timestamp, // 必填，生成签名的时间戳
    nonceStr:data.data.noncestr, // 必填，生成签名的随机串
    signature:data.data.sign,// 必填，签名，见附录1
    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone','chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

  wx.ready(function(){
wx.onMenuShareTimeline({

          title: title, // 分享标题

          link: local, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

          imgUrl: imgUrl, // 分享图标

          success: function () {

         
// 用户确认分享后执行的回调函数

      },cancel: function () {

          // 用户取消分享后执行的回调函数

          }

      });

wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: local, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

});
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      wx.error(function(res){
      });
    }
});

}；

可以将这段js代码单独放进一个js文件，引入到你需要做分享的H5里；

配置完成后在H5页面里调用这分享的接口

var url = //这里是请求后台获取appid等数据的接口;

shareFn("这里是分享出去链接的标题",url,"分享链接的介绍","图片的url");

如果要做多次分享，那么H5的域名必须是当前绑定的服务号或者公众号的安全域名

如果一个H5页面里有多次多级跳转链接，当跳到某个页面的时候，再从微信分享出来，打开分享的链接失踪是分享时的那个页面，

因为在配置微信的分享接口参数时

var local = window.location.href.split('#')[0];、

这段代码就是获取当前分享页面的url，尝试把这段代码写成一个固定的链接，测试发现微信对这个链接有很严格的限制，它在调分享接口时就会去判断这个url和当前页面的url是否一致微信为了记录H5的分享来源，在每个页面分享出去之后，链接后面都会自动追加一个from参数，

我们来通过这个参数是否存在来判断当前页面在打开的时候是否是直接分享过来的，然后再跳转到我们指定的页面就OK啦

<script>
//获取连接后拼的参数
function GetVal(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
 var r = window.location.search.substr(1).match(reg);
if(r!=null)return  unescape(r[2]); return null;
};
var Afrom = GetVal('from')||0;
if(Afrom != 0)window.location.href = 指定的跳转链接;

</script>

为了不让页面有明显的跳转效果，这段代码要放在页面的顶部，title标签上面，大功告成