微信 ajax 2次,微信二次分享失败问题解决
自定义微信分享标题及描述的基本流程:
首先引入微信jssdk ;
发送ajax请求将浏览器分享的地址(window.location.href.split("#")[0])发送到后台获取公众号时间戳以及签名等信息并使用微信ready函数自定义分享标题描述以及logo;
代码基本上是这样:
$(function(){
var appId, nonceStr, timestamp, signature;
var _url = encodeURIComponent(location.href.split('#')[0]);
$.ajax({
url: 'http://api.kuailuapp.com/?s=app/Usersauth/jssdk&url=' +_url, // 这里的url地址一般是后端提供的接口地址
dataType: 'json',
type: 'GET',
async: true,
success: function (data) {
if (datas.status == '1') {
appId = datas.data.appId;
nonceStr = datas.data.nonceStr;
timestamp = datas.data.timestamp;
signature = encodeURIComponent(datas.data.signature);
wxShare();
}
},
error: function () {}
});
function wxShare(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.config({
debug: false, // 开启调试模式为true后可以通过alert弹窗将公众号签名等结果反馈出来
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature,// 必填,签名,见附录1
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage",//分享给好友
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone"
]
});
wx.ready(function () {
//分享好友
var shareData = {
title: '分享标题',
desc: '分享描述',
dataUrl: '',
type: 'link',
imgUrl: '缩略图线上地址',
link: location.href.split("#")[0]
};
wx.onMenuShareTimeline(shareData);
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareQQ(shareData);
wx.onMenuShareWeibo(shareData);
wx.onMenuShareQZone(shareData);
});
}
});
注意:
传过去的url地址跟wx.ready函数中shareData里面要分享的link链接要保持一致,否则会导致签名非法等问题;
后台返回的signature需要进行encode编码;
imgUrl的属性值不能是绝对路径,需要是一个完整的url地址,否则会找不到图片;
一般情况下,通过上述步骤就能实现一次分享。由于微信在分享出去之后会给链接自动加上from以及isappistalled这两个参数,证明该链接是通过分享过来的,由于这两个参数的影响,便会导致二次分享进行时签名失效,无法调用一次分享时的自定义信息,只能通过微信自带的分享功能分享出去,变成一段空荡荡的链接和白色缩略图。
ps:
网上看了很多人说url用encodeURIcomponent进行转码就不会出现这个问题,但是就像我上面代码写的一样,url是用encodeURIcomponent进行转码过的,亲测,二次分享还是会有问题。
由于是因为微信在回调url上自动添加了参数导致的签名失效,所以最终的解决办法是在分享出去的页面判断是否有参数,有则去掉参数回到五参数的url:
if(window.location.href.indexOf('from') != -1 || window.location.href.indexOf('isappinstalled') != -1){
// 二次分享url重定向 - 需要截取一次分享后微信自动拼接的url参数&from=singlemessage&isappinstalled=0
window.location.href = window.location.href.split('&')[0]; // 这里的split中的字符串会变换(?或&),主要看自己的url
}
注意:
这里的split中的字符串会有变换,主要看自己的url规则,经测试如果url中已有?号,则微信会通过&来拼接from和isappinstalled参数,如果url中没有?号,微信则通过?号来拼接from和isappinstalled参数;
如:短链接 - http://abc.com/product_list?from=singlemessage
或:长链接 - http://abc.comindex.php?route=product/product_list&from=singlemessage&isappinstalled=0
网上也有看到有人是这么操作的,说是没问题。经测试:这种方式使用长链接的方式没有问题,使用短链接的(短链接是后台再数据库中进行配置的,将长链接换成短链接),在微信分享出去后的页面,会一直再刷新页面,即不停的执行window.location.href = window.location.href.split('&')[0];。好像是安卓会ios不会,不知道是不是兼容性问题,这一点还没有机会进行测试验证。如果有人遇到还希望可以留言说明。
综上,在项目中解决了微信二次分享的问题。不确定的是这种分式是否有什么潜在的风险,或者有更好的方式。在网上看到很多比较麻烦的方法,但是感觉也是这个道理,所以先记录下来。
微信 ajax 2次,微信二次分享失败问题解决相关推荐
- 解决微信二次分享失败--后面被加上from=singlemessageisappinstalled=0的解决方案
解决微信二次分享失败--后面被加上from=singlemessage&isappinstalled=0的解决方案 参考文章: (1)解决微信二次分享失败--后面被加上from=singlem ...
- 微信二次分享解决方案
最近项目中开发需要在微信端二次分享分享H5页面,但是第一次分享的时候安卓没有问题,ios有时成功有时失败,并且二次分享的时候安卓还是没有问题,ios一次成功都没有,后来查阅文档搜索资料终于解决了,一下 ...
- ios设备微信公众号网页二次分享问题总结
在之前的分销商城项目中,用到了微信分享的功能,在ios设备中出现了二次分享失败的问题. 所谓二次分享,就是A用户在公众号页面中分享一次后,B用户通过分享链接进入网页,再次分享.在安卓设备中,不存在二次 ...
- 微信二次分享(标题、摘要、缩略图)
微信二次分享 目的 要求 准备工作 代码逻辑 结束 总结 目的 公司需要实现一个手机在微信分享的网页带标题.摘要和缩略图的功能,查看了微信开发文档,是一个二次分享比较简单的功能,下面开始写代码吧 要求 ...
- 解决微信公众号二次分享的BUG记录
公众号页面二次分享分享会丢失自定义的图片和标题:以下是整个过程的记录------ 修改前的代码 $(function () {shareInit();})//分享初始化function shareIn ...
- 微信自定义分享、二次分享解决方案
转自:https://www.cnblogs.com/backtozero/p/7064247.html 前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题, ...
- 微信二次分享解决图标文案失效方案
转自:https://www.cnblogs.com/backtozero/p/7064247.html 前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题, ...
- 微信二次分享签名错误php,微信二次分享报错invalid signature问题及解决方法
基于微信公众号开发的h5页面(使用jssdk接口),由用户A分享给用户B,用户B再次分享这个页面时,不能成功分享.问题出在用户B收到的分享链接与用户A打开的链接不同 A用户的链接为 B用户收到的连接 ...
- php微信二次分享出错,解决微信二次分享bug
微信分享网页后,再次点击微信分享的内部会自动在网址后拼接&from=来源,导致二次分享的图案文案失效,解决办法: function getQueryString(name) {//根据字段看网 ...
最新文章
- 【linux】Valgrind工具集详解(四):抑制错误
- 作为程序员的你第一套房子是多少岁?多少万?
- asp.net的JSON数据进行序列化和反序列化
- asp2.0缓存概述
- 运行Angular项目后自动打开网页
- dedecms ---m站功能基础详解
- 官网python安装教程_Python安装教程
- 多级联动(已知和未知级次)
- Hadoop安装杂记(2)
- matlab 使用uci数据集,如何使用UCI数据集
- 复习了C++前几章,做一个ASCII码转换的小程序
- Python求极限求积分,编程实现
- php-screw 安装,php_screw安装,使用
- mac本在终端查看本地ip
- OneNET麒麟座应用开发之七:控制采样电机
- PhotoShop永久序列号
- 数据分析师是热门职业么?转行容易么?
- 分享两个视频转场作品
- 宋鸿兵 - 货币战争5(2014年3月20日)
- 桌面虚拟化云技术将支撑数字化医院