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

时间:2022-08-30 23:27:42

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

  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">

<img src="./img/logo.png" alt="" />

</div>  

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

 

$(funct
ion () {
$.ajax({
url: ],//urlStr.trim('/', 'right')
dataType: 'json',
type: 'GET',
async: true,
success: function (data) {
wx.config({
debug: false, // 开启调试模式,
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 invite_uid = fnGetQueryString('invite_uid');
var shareData = {
title: '一对一私密视频更刺激',
desc: '在线匹配同城*丝袜女神,100%成功,线下可约,你确定不来么?',
dataUrl: '',
type: 'link',
imgUrl: 'http://m.kuailuapp.com/kuailu_phone_down/img/logo.png',
link: location.href.]//?invite_uid=' + invite_uid
};
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline(shareData);
});
});

微信公众号jssdk自定义分享,二次分享自定义失败解决技巧的更多相关文章

  1. C&num;微信公众号开发系列教程二(新手接入指南)

    http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可 ...

  2. 微信公众号jssdk使用的惨痛经历

    最近一直在做微信公众号开发,遇到个DT的问题: 大家都知道使用jssdk的时候开发人员必须在后台按照官方文档给定的规则生成签名,我前前个月就写好了这个测试demo页面,而且完全正常能用,像分享等这些功 ...

  3. Node&period;js&plus;Koa开发微信公众号个人笔记(二)响应事件

    微信公众号中的事件有订阅事件/扫码事件/点击事件/跳转链接事件等等,具体可以查阅文档. 这里来实现一下订阅事件,其他的事件的实现过程也都类似. 当有人订阅了公众号后,微信服务器会向我们的服务器推送一个 ...

  4. PHP开发微信公众号(一)二维码的获取

    要开发微信公众号,首先进行需要注册一个,然后认证.这就不用多说了. 当然如果没有,也可以去申请一个测试号来使用,地址:https://mp.weixin.qq.com/debug/cgi-bin/sa ...

  5. 微信公众号--JS-SDK

    JS-SDK 微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以 ...

  6. 微信公众号开发(十二)OAuth2&period;0网页授权

    OAuth允许用户提供一个令牌,而不是用户名和密码来访问它们存放在特定服务器上的数据,每一个令牌授权一个特定的网站在特定时段内访问特定的资源. 授权过程如下: 1.引导用户进入授权页面同意授权,获取c ...

  7. 微信公众号jssdk分享接口onMenuShareAppMessage自定义的参数无效&comma;微信分享失败原因

    使用jssdk为jweixin-1.4.0.js updateTimelineShareData,安全域名接口也设置正确,可就是分享,转发朋友圈不成功. 解决方案:采用<script src=& ...

  8. 玩玩微信公众号Java版之二:接收、处理及返回微信消息

    前面已经配置了微信服务器,那么先开始最简单的接收微信消息吧~   可以用我们的微信号来直接进行测试,下面先看测试效果图:   这是最基本的文本消息的接收.处理及返回,来看看是怎么实现的吧!   首先可 ...

  9. 微信公众号 JSSDK 提示:invalid signature

    要命的invalid signature.其实腾讯的文档已经写了,只能怪我自己理解能力太差,掉了好几次坑. 签名要用到的jsapi_ticket需要保存的,2小时有效期.如果在2小时内出现问题需要删除 ...

随机推荐

  1. gulp学习笔记2-安装

    安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1.去nodejs官网安装nodejs 2. ...

  2. PHP使用CURL实现对带有验证码的网站进行模拟登录的方法

    网上的很多模拟登录程序,大都是通过服务程序apache之类的运行,获取到验证码之后显示在网页上,然后填上再POST出去,这样虽然看起来很友 好,但是既然模拟登录,登录后所干的事情就不一定是短时间完成的 ...

  3. The Kernel Newbie Corner&colon; Kernel Debugging with proc &quot&semi;Sequence&quot&semi; Files--Part 3

    转载:https://www.linux.com/learn/linux-career-center/44184-the-kernel-newbie-corner-kernel-debugging-w ...

  4. HTML5的页面资源预加载技术&lpar;Link prefetch&rpar;加速页面加载

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

  5. C&num;语法知识笔记

    抽象类 1.抽象类没有方法体,直接在括号后加“;”. protected abstract string getShoutSound(); 2.抽象类不能实例化:抽象方法必须被子类重写:如果类中包含抽 ...

  6. Web---自己写的一个简单云相册~

    实现的功能是: 用户可以一次上传一个至多个文件. 用户可以下载其他人上传的图片. 用户可以查看其他所有人的图片. 用户只能删除通过自己IP上传的图片. 用到的技术: 文件上传下载.设计模式.Dom4j ...

  7. n 个骰子的点数

    把 n 个骰子仍在地上,求点数和为 s 的概率. java: public List<Map.Entry<Integer, Double>> dicesSum(int n) { ...

  8. Spring如何支持可扩展

    Spring是一款优秀的开发框架,包括了非常多的基础组件 那么它是如何做到灵活可扩展呢? 1 .框架初始化 2.Bean初始化 ref https://mp.weixin.qq.com/s/QuSls ...

  9. Java实验报告(实验五)

    课程:Java程序设计                         班级:1351            姓名:王玮怡      学号:20135116 成绩:             指导教师: ...

  10. Angular 4 路由介绍

    Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...