自定义微信分享标题及描述的基本流程:

首先引入微信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次,微信二次分享失败问题解决相关推荐

  1. 解决微信二次分享失败--后面被加上from=singlemessageisappinstalled=0的解决方案

    解决微信二次分享失败--后面被加上from=singlemessage&isappinstalled=0的解决方案 参考文章: (1)解决微信二次分享失败--后面被加上from=singlem ...

  2. 微信二次分享解决方案

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

  3. ios设备微信公众号网页二次分享问题总结

    在之前的分销商城项目中,用到了微信分享的功能,在ios设备中出现了二次分享失败的问题. 所谓二次分享,就是A用户在公众号页面中分享一次后,B用户通过分享链接进入网页,再次分享.在安卓设备中,不存在二次 ...

  4. 微信二次分享(标题、摘要、缩略图)

    微信二次分享 目的 要求 准备工作 代码逻辑 结束 总结 目的 公司需要实现一个手机在微信分享的网页带标题.摘要和缩略图的功能,查看了微信开发文档,是一个二次分享比较简单的功能,下面开始写代码吧 要求 ...

  5. 解决微信公众号二次分享的BUG记录

    公众号页面二次分享分享会丢失自定义的图片和标题:以下是整个过程的记录------ 修改前的代码 $(function () {shareInit();})//分享初始化function shareIn ...

  6. 微信自定义分享、二次分享解决方案

    转自:https://www.cnblogs.com/backtozero/p/7064247.html 前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题, ...

  7. 微信二次分享解决图标文案失效方案

    转自:https://www.cnblogs.com/backtozero/p/7064247.html 前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题, ...

  8. 微信二次分享签名错误php,微信二次分享报错invalid signature问题及解决方法

    基于微信公众号开发的h5页面(使用jssdk接口),由用户A分享给用户B,用户B再次分享这个页面时,不能成功分享.问题出在用户B收到的分享链接与用户A打开的链接不同 A用户的链接为 B用户收到的连接 ...

  9. php微信二次分享出错,解决微信二次分享bug

    微信分享网页后,再次点击微信分享的内部会自动在网址后拼接&from=来源,导致二次分享的图案文案失效,解决办法: function getQueryString(name) {//根据字段看网 ...

最新文章

  1. 【linux】Valgrind工具集详解(四):抑制错误
  2. 作为程序员的你第一套房子是多少岁?多少万?
  3. asp.net的JSON数据进行序列化和反序列化
  4. asp2.0缓存概述
  5. 运行Angular项目后自动打开网页
  6. dedecms ---m站功能基础详解
  7. 官网python安装教程_Python安装教程
  8. 多级联动(已知和未知级次)
  9. Hadoop安装杂记(2)
  10. matlab 使用uci数据集,如何使用UCI数据集
  11. 复习了C++前几章,做一个ASCII码转换的小程序
  12. Python求极限求积分,编程实现
  13. php-screw 安装,php_screw安装,使用
  14. mac本在终端查看本地ip
  15. OneNET麒麟座应用开发之七:控制采样电机
  16. PhotoShop永久序列号
  17. 数据分析师是热门职业么?转行容易么?
  18. 分享两个视频转场作品
  19. 宋鸿兵 - 货币战争5(2014年3月20日)
  20. 桌面虚拟化云技术将支撑数字化医院

热门文章

  1. wegame饥荒一直登录中_饥荒联机版:这些好用的模组你都添加了吗?
  2. PDAF(相位对焦)的基本原理
  3. 中信证券的丑恶行经(南京营业部)
  4. linux建立空文件的命令,Linux 创建文件命令总结
  5. JVM工具之jstat
  6. 环境监测技术中关于网络时间校准问题
  7. 微信小程序实现点赞功能(前端)
  8. 我的世界删除维度mod导致进不去地狱和末地问题解决方法
  9. R语言presentation——超市销售数据分析
  10. 如何写开题报告的内容