实际项目中,在做微信分享追踪的时候,遇到了一个百思不得其解的问题。

在加入了用户分享追踪功能之后,页面已经加载完成的情况下,安卓分享功能没有任何问题,ios却总是分享失败。

关于ios和安卓设备的差别

项目需求是,我们需要对用户的分享行为做追踪,对用户从哪个人分享的链接进来的做记录。所以每个用户有一个唯一的分享码。

用户A分享出去,链接上带有他自己的分享码。
用户B点进链接的一瞬间,把当前url上的分享码传给后端做记录,同时替换上自己的分享码。

我使用替换参数的方式是直接修改router的query

this.$router.push({ name: 'routername' //当前路由名称 query: { sharecode: 'sharecode' //修改后的sharecode }})

加上追踪记录之后,却发现安卓设备能够分享成功,也能拿到正确的记录。但是ios总是分享失败,就算切换到其他页面也依然无法分享,只有在刷新页面后才能分享成功。。。

amazing...

如何和后端交互

签名是后端和微信服务器做的事情,我要做的就是把要做签名的url传给后端。

做法很简单,就是监听路由变化(只变化了参数也需要监听),每次变化时给后端传url。

因为不管从什么渠道点入我们的链接,都会有分享码生成并加在路由上,导致一开始页面就会触发两次路由变化;而且,如果用户没有登陆的话微信爸爸还会强行跳转授权,导致页面重载一次,所以如果一个用户没有登陆,那页面会触发4次路由变化!那就需要和后端交互四次。

不能忍!

最后商议的是,默认进入页面的第一次不做记录 ,这样首屏最多只需要交互2次(划重点,后面要考)。

以上故事在告诉我们人为什么要作死

好了我们回到ios分享失败的问题上

解决过程

chorme浏览器调试模式没发现毛病,微信开发者工具也没发现有问题,就是在ios真机上出现了这个bug。(微信开发者工具居然是一个披着ios外衣的android??dev环境是ios,表现行为却和安卓一毛一样)

千辛万苦线上线下调试,最后发现是真机上在用自己的分享码替换别人分享码的这个步骤出现了问题。

安卓设备能够正常替换sharecode参数,但是ios却没有替换成功。后端做签名使用的url是拼接sharecode替换后的链接,所以导致签名和路由匹配不上。

确认使用路由参数替换的方法没有问题,因为安卓环境能够正常替换。所以ios环境该怎么办??

这就引申出了一个问题:vue框架下ios如何在当前页面替换路由参数??

最后是很不优雅的强行重载 - -,相信我会找到解决办法的 > _ <

就这样第一天结束了
——————————时间到了第二天————————————
继续填坑

重载这么恶心的方法当然不行了,不要虚继续干

索性把所有的url都alert出来。

然后,在ios上发现了一个神奇的现象

  1. 点击一个链接,比如http:example.com/a&share=111
  2. ios中弹出当前url没有问题http:example.com/a&share=111,紧接着下一步执行替换分享码操作,将share替换成222,即理论上url会变成http:example.com/a&share=222
  3. 按照昨天的逻辑,share不会被替换,可以弹出url发现,被替换了!当前url的确是http:example.com/a&share=222
  4. 此时再执行分享操作,同时复制当前url。
  5. 分享失败!粘贴刚刚复制的url,share依然是111!wtf !?

ok,紧接着我进行了下一步操作

  1. 我频繁切换的我的路径,跳到c又跳到d,等等,alert出来的url也随着我的切换进行了变化。
  2. 在c或者d页面执行分享操作,同时复制当前url。
  3. 分享失败!粘贴刚刚复制的url,share依然是111!(你没看串行,就是和上面一毛一样)

以上现象可以得出一个结论,在ios环境下(安卓分享正常所以没有测试是不是也有同样的行为),如果签名验证失败,那么不管路由如何变化,不仅分享本身不会成功,而且分享出去的路由永远都是第一次加载时的路由。

后来查阅资料才发现,ios的签名验证机制和安卓不一样。

  • 安卓:对需要分享的每个页面路由做签名,并加载页面分享信息
  • ios: 只需要对第一次进来的页面路由做签名,对每个要分享的页面加载分享信息

这说明了啥,ios环境下,微信只认第一次进来的路由啊!

让我们再把和后端交互部分的重点重复一遍:默认进入页面的第一次不做记录 ,这样首屏最多只需要交互2次

不记录你个大头贴

最后,判断环境是ios的时候,老老实实把第一次的路由给记上。

你问我那ios环境下的首屏最多需要加载4次啦?

认真听讲的小朋友,奖励你一面国旗~

但是!ios只认第一次的路由,我只需要传第一次路由给后端就行,监听路由变化都不用了!

微信分享—ios和安卓机制居然不一样!的更多相关文章

  1. React Native之微信分享(iOS Android)

    React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...

  2. Cordova 微信分享插件,安卓亲测可用

    Cordova 微信分享插件,安卓亲测可用,收藏 https://github.com/vilic/cordova-plugin-wechat

  3. 微信分享ios设备没有分享图标安卓有分享图标 (分享功能没有问题)

    解决方案:去除 var sharedata = { title: $("#shareTitle").val(), desc: $("#shareContent" ...

  4. React Native之支付集成(微信 支付宝)(ios android)

    React Native之支付集成(微信 支付宝)(ios android) 一,需求分析 1.1,app在线充值与提现 二,技术介绍与集成 2.1,微信支付 2.1.1,Android配置 详细配置 ...

  5. 判断终端是ios还是安卓的一些妙用(附加微信分享图标修改)

    最近遇到一个项目 要求有两个icon(就是下载地址 下载安卓的apk  和ios的安装包) 一开始的方案是 什么设备都显示这两个icon 但是后来老大说这样不好   安卓用户给他下载ios 也不行  ...

  6. vue项目中关于微信分享的坑,以及安卓和ios获取location.href不同的处理

    最近做vue项目的微信公众号项目,涉及到微信分享,记录一下心得,以备后用,vue路由用的是hash模式: 该项目只是公众号里面的h5链接,不需要获取code获取access_token的票据,因此前端 ...

  7. vue history模式 ios微信分享坑

    vue history模式 ios微信分享坑 问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享 ...

  8. 在Unity3D项目中接入ShareSDK实现安卓平台微信分享功能(可使用ShareSDK默认UI或自定义UI)

    最近公司的大厅要重做,我协助主程一起制作新大厅和新框架,前面制作的编辑器也派上了用场.等全部功能做完后我会再写一个复盘,这两天主程在忙于写热更新的功能,所以把接入分享SDK功能的任务交给了我,Shar ...

  9. ios微信分享的兼容性问题

    我微信分享采用的是: 页面初始化时动态加载js-sdk, 然后在需要分享的页面进行sdk的分享初始化 app.vue store.vue 这种方法在安卓上完全正常, 好用得令人发指, 但是!!! io ...

随机推荐

  1. 关于W3Cschool定义的设计模式-常用的9种设计模式的介绍

    一.设计模式 tip:每种设计模式,其实都是为了更高效的,更方便的解决在面对对象编程中所遇到的问题. 什么是设计模式:     是一套经过反复使用.多人知晓的.经过分类的.代码设计经验的总结   为什 ...

  2. 11 (OC)* CoreImage

    coreimage framework 组成 apple 已经帮我们把image的处理分类好,来看看它的结构: 主要分为三部分: 1)定义部分:CoreImage 何CoreImageDefines. ...

  3. [VB.NET Tips]为VB.NET正名

    前言 我于2005年毕业,正值全国上上下下如火如荼的开展企业信息化的时代,正是大规模软件开发的年代. 那时.NET 已经发布了2.0,但是仍是VB6,Delphi,PowerBuilder的天下,是E ...

  4. 转:LinkedHashMap和HashMap的比较使用

    import java.util.HashMap; import java.util.Iterator; import java.util.LinkedHashMap; import java.uti ...

  5. python,json解析字符串时ValueError: Expecting property name enclosed in double quotes: line 1 column 2 (char 1)

    今天写测试工具的时候,去excel取数据,用json解析字符串为字典时报错,后经调试,发现是单引号的原因,将单引号换位双引号即可 def getExcelValue_to_dic(filepath): ...

  6. Maven 梳理 -聚合与继承

    一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 1 <modules> 2 <module>模块一</module&g ...

  7. 在网页中打印一个99乘法表--JavaScript描述

    99乘法表使用for循环,在很多公司的面试中常会要求面试者手写这个算法,算是比较经典的for循环的应用 <!DOCTYPE html><html lang="en" ...

  8. .Net Core 商城微服务项目系列(三):Ocelot网关接入Grafana监控

    使用网关之后我们面临的一个问题就是监控,我们需要知道网关的实时状态,比如当前的请求吞吐量.请求耗费的时间.请求峰值甚至需要知道具体哪个服务的哪个方法花费了多少时间.网关作为请求的中转点是监控品牌的要塞 ...

  9. 死磕 java线程系列之自己动手写一个线程池

    欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. (手机横屏看源码更方便) 问题 (1)自己动手写一个线程池需要考虑哪些因素? (2)自己动手写 ...

  10. InnoDB引擎的启动过程

    一 前言 一直对InnoDB引擎的启动过程不太了解,查资料整理了下InnoDB引擎启动的过程和关闭过程,后续会整理些有关redo   undo 的知识点. 二 思维导图 三 参考文章 MySQL运维内 ...