微信二次分享解决方案

最近项目中开发需要在微信端二次分享分享H5页面，但是第一次分享的时候安卓没有问题，ios有时成功有时失败，并且二次分享的时候安卓还是没有问题，ios一次成功都没有，后来查阅文档搜索资料终于解决了，一下是解决资料内容：

百度上自定义微信分享标题以及描述的解决方法有很多，基本上都能实现一次分享：流程基本上是这样的

　　1.首先引入微信jssdk =》<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

　　2.发送ajax请求将浏览器分享的地址（window.location.href.split("#")[0]）发送到后台获取公众号时间戳以及签名等信息并使用微信ready函数自定义分享标题描述以及logo，代码部分基本上是这样的

这里唯一需要注意的一点是保证传过去的url地址跟wx的ready函数中shareData里面要分享的link链接保持一致才不会导致签名非法等问题，后台返回来的signature需要进行encode编码，imgUrl参数不能为绝对路径，否则会找不到图片。

　　绝大多数情况下通过这种形式就能实现一次分享自定义，但是，有个不好的消息=》微信在进行二次分享后会给该链接自动加上from以及isappinstalled这两个参数证明该链接是二次分享过来的，有了这两个参数，便会导致二次分享进行签名时失效，一次分享拥有的自定义信息都会被抹杀，剩下空荡荡的链接以及白色缩略图，很是恶心。那么，既然知道了是因为这两个参数导致的二次分享失败，为什么不能在二次分享前就将这两个参数去掉然后强制跳转=》刷新回不带微信参数的页面呢(PS,在这之前看了很多文章都说在url地址中加上encodeURIcomponent进行编码就不会出现这种错误了，但是试了一下后发现连基础的一次分享都不行了)

自己的代码：

$( function(){

     var url = '/user/ucenter/wxsign/query',

         locaUrl = window. location. href. split( '#')[ 0];

     $. ajax({

     type: 'POST',

     url: url,

     dataType: 'json',

     data: 'url='+ encodeURIComponent( locaUrl)+ '',

     async: false,

     success : function( r){

        if( r. flag == 20000){

        wx. config({ //微信分享

debug: true, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: '', // 必填，公众号的唯一标识

timestamp: r. data. timestamp, // 必填，生成签名的时间戳

nonceStr: r. data. nonceStr, //必填， 生成签名的随机串

signature: r. data. signature, //必填，签名

jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'] //必填， JS接口列表，这里只填写了分享需要的接口

});

wx. ready( function () {

wx_share( '多加网-高端医美大健康平台', 'https://m.duojia369.com/Invitation/channel/supplierInv.html', 'https://m.duojia369.com/dist/shareHead.png', '甄选汇集全球顶尖的高端医疗资源，重磅补贴，多赚不止20%');

});

function wx_share( title, link, imgurl, desc) {

//朋友圈

wx. onMenuShareTimeline({

title: title, // 分享标题

link: link, // 分享链接

imgUrl: imgurl, // 分享图标

success : function() {

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

alert( "分享成功")

},

cancel : function() {

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

}

});

//微信好友

wx. onMenuShareAppMessage({

title: title, // 分享标题

desc: desc, // 分享描述

link: link, // 分享链接

imgUrl: imgurl, // 分享图标

type: 'link', // 分享类型,music、video或link，不填默认为link

dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

success : function() {

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

alert( "分享成功")

},

cancel : function() {

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

}

});

//qq

wx. onMenuShareQQ({

title: title, // 分享标题

desc: desc, // 分享描述

link: link, // 分享链接

imgUrl: imgurl, // 分享图标

success : function() {

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

},

cancel : function() {

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

}

});

// qq空间

wx. onMenuShareQZone({

title: title, // 分享标题

desc: desc, // 分享描述

link: link, // 分享链接

imgUrl: imgurl, // 分享图标

success : function() {

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

},

cancel : function() {

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

}

});

}

       }

     }

    });

})

查到的代码：

发现分享从客户端分享到微信是正常的，可以看到缩略图，名称和描述，可在微信里再次打开通过微信分享时，就只出现了链接地址，也没有缩略图，无奈，被老板逼这，自己研究了两天中与给弄出来了，特写此文，纪念逝去的两天：

微信内部浏览器自带分享功能，这要求我们要调用微信的APi进行操作！

通过看文档，发现首先要拿到

>  appId: '',
   timestamp:
   nonceStr:,
   signature:,

• 1
• 2
• 3
• 4
• 5

于是就搜索与此有关的资料为了保证数据的安全性，就把对应的代码放到了后台：

代码可移步到：后台获取微信分享签名

首先你要在微信的基本配置里配置一下服务器的IP，不然会拿不到access——token ，提示IP非法 

第二步就是Js代码了

首先要引入微信的js

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

• 1

调用代码如下

$ (function(){ 
//获取本页面连接，生成签名需要 
var url =location.href.split('#')[0]; 
$.ajax({ 
url: "你的域名/weixin/sign?url="+encodeURIComponent(url), //你获取签名的接口 
type: "GET", 
async:true, 
cache: false, 
dataType: "json", 
success: function(data){ 
var da=data; 
console.log(da.data.signature); 
wx.config({ 
debug: true, //调试模式 
appId: 'wx97acfdc52e5239ef', 
timestamp:da.data.timestamp, 
nonceStr:da.data.nonceStr, 
signature:da.data.signature, 
jsApiList: [ 
'onMenuShareTimeline', 
'onMenuShareAppMessage'] 
}); 
}, 
error: function() { 
console.log('ajax request failed!!!!'); 
return; 
} 
}); 
wx.ready(function () { 
// wx.checkJsApi({ 
// jsApiList: [ 
// 'onMenuShareTimeline', 
// 'onMenuShareAppMessage' 
// ], 
// success: function (res) { 
// console.log(res.errMsg); 
// } 
// }); 
// 
var shareData = { 
title: "资讯消息", 
desc: sharename, 
link: url, 
imgUrl: shareimg 
}; 
wx.onMenuShareAppMessage(shareData); 
wx.onMenuShareTimeline(shareData); 
}); 
wx.error(function (res) { 
console.log(res.errMsg+"错误信息"); 
}); 
});

需要注意的是一下情况可能引起非法签名