微信公众号jssdk自定义分享，二次分享自定义失败解决技巧

2021-10-11 02:19:53

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

　　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，代码部分基本上是这样的

　　$(function () {

$.ajax({

url: ],

dataType: 'json',

type: 'GET',

async: true,

success: function (data) {

wx.config({

debug: false, // 开启调试模式为true后可以通过alert弹窗将公众号签名等结果反馈出来

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

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

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

signature: encodeURIComponent(data.data.signature),// 必填，签名，见附录1

jsApiList: [

"onMenuShareTimeline",

"onMenuShareAppMessage",//分享给好友

"onMenuShareQQ",

"onMenuShareWeibo",

"onMenuShareQZone"

]

});

error: function () {

}

});

wx.ready(function () {

//分享好友

var shareData = {

title: '分享标题',

desc: '分享描述',

dataUrl: '',

type: 'link',

imgUrl: '缩略图线上地址',

link: location.href.]

};

wx.onMenuShareAppMessage(shareData);

wx.onMenuShareTimeline(shareData);

});

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

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

　　去掉微信二次自带的两个参数需要用到三个函数，一个是 functionfnGetQueryString(key) { //正则获取url后面的参数值，如?env=dev&exp=123中可以通过fnGetQueryString('exp')=>得到123

var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");

).match(reg);

]) : false;

};

　　另外一个是 functionfuncUrlDel(name) {//删除url指定参数名并返回新的url

var loca = window.location;

var baseUrl = loca.origin + loca.pathname + "?";

);

) {

var obj = {};

var arr = query.split("&");

; i < arr.length; i++) {

arr[i] = arr[i].split("=");

obj[arr[i][]] ];

};

delete obj[name];

var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g, "").replace(/\:/g, "=").replace(/\,/g, "&");

return url

};

最后一个是

functiongetlinkSearch(key, reqStr) {//这个作用同fnGetQueryString(key)函数差不多，不过它将reqStr参数替代了window.searsh获取的东西,因为上个函数在删除了url的某一参数后会返回一个新的带?参数查询的链接

var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");

).match(reg);

]) : false;

};

　　最关键也是最后一步就是刷新页面回到去除微信二次分享自带参数的初始页面了：

　　　functionrefreshUrl() {//强制刷新到不带二次分享参数页面

var url = "",

reqStr = "";

if (fnGetQueryString('from')) {//from为微信二次分享自带参数

url = funcUrlDel('from');

var reqIndex = url.indexOf('?');

reqStr = url.substr(reqIndex);//截取去除from参数后的地址

console.log(url, reqStr);

if (getlinkSearch('isappinstalled', reqStr)) {//isappinstalled为微信二次分享自带参数

url , url.indexOf('&'));//截取去除isappinstalled参数后的地址

console.log(url);

window.location.href = url;

} else {

window.location.href = url;

}

};

　　refreshUrl();

　　到这里还没结束，因为刷新后的分享页会直接读取title以及meta里面的描述,还需要设定这两个内容以及在body标签中加入

　　<divstyle="display:none">

</div>　　

　　时分享时读取到第一张图片为缩略图，这样子就可以轻松实现二次分享。搞定！

$(funct

ion () {