之前分享过一篇转载的微信分享填坑文章

基本涵盖了微信分享功能开发的基本操作。

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

在加入了用户分享追踪功能之后,页面已经加载完成的情况下,安卓分享功能没有任何问题,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只认第一次的路由,我只需要传第一次路由给后端就行,监听路由变化都!不!用!了!(微笑)

掘金主页:如意同学

简书主页:如意同学

b站直播地址,每周五晚不定期直播,偶尔写代码,偶尔读书,偶尔看学习视频,偶尔干点乱七八糟的(反正和学习有关),欢迎一起学习!yo~

微信分享——ios和安卓机制居然不一样!相关推荐

  1. Android微信浏览器标题,企业微信内H5网页分享微信好友ios正常安卓自定义标题、图标、未生效...

    企业微信内H5网页分享微信好友ios正常安卓自定义标题.图标.未生效 问题类型 API/组件名称 终端类型 微信版本 基础库版本 Bug 'onMenuShareWeibo', 'onMenuShar ...

  2. 微信开发者工具联网失效以及微信分享ios失效的坑!

    微信开发者工具: 当前系统代理不是安全代理? 命令行输入regedit或按快捷键win+R然后输入regedit,打开注册表编辑器------通过下面的路径打开 HKEY_CURRENT_USER/S ...

  3. 微信、iOS、安卓如何安装SSL证书实现HTTPS加密

    不论在开发苹果.安卓APP应用,搭建微信小程序或是配置微信公众号接口上,我们都会遇到一个问题,就是平台要求我们必须使用https加密.那么,如何才能在微信.iOS.安卓实现HTTPS加密呢? 微信.i ...

  4. vue中微信分享的踩坑之旅

    最近基于vue做一个h5的项目,里面涉及到微信分享,当时心里想着,这微信分享不是分分钟的事嘛,而且自己年初还做个一个项目,也实现了微信自定义分享,代码都是现成的,妥妥的放心. 上周二上午花了1个小时, ...

  5. Android 微信分享视频缩略图不显示问题

    最近再分享视频的时候出现一个问题缩略图不显示有些显示,虽然以前也遇到过但是忘了.今天这里再写一下方便记录 百度了一下很多!!! 微信分享功能,安卓手机分享图片不显示 android微信分享缩略图不显示 ...

  6. 微信分享功能,手机分享图片不显示

    问题原因猜想: a.图片大小和尺寸太大出不来:图片是150X150 的,近40K,后来给制作重新做图,30X30的10k不到,分享图片大小最好不要超过32k ,尺寸100x100以上就行,别太大了,太 ...

  7. iOS9中实现微信分享到好友、朋友圈

    博客地址:http://blog.csdn.net/bettylu227 微信SDKdemo运行错误问题 微信SDK接入设置 实现分享到好友.朋友圈 微信SDKdemo运行错误问题 下载了官方的dem ...

  8. 记一次微信分享的坑,ios和安卓分享打开的url不一样

    一.环境 vite3+vue3+ts+router 二.问题描述 接微信分享sdk(1.2.0版本)什么的,都已经完成,现在问题出在了分享的url不一致 产品需求是:不同路由页面,分享出来始终保持为首 ...

  9. 微信分享功能实现,兼容安卓和IOS

    微信分享注意事项 生成签名的路径必须是当前页面的路径 分享的url不能含有特殊符号,例如# (所以vue-cli项目路由要用history模式history模式配置) ios分享图标不能超过32K l ...

最新文章

  1. 判断一个数是否是2的倍数----------面试算法
  2. 【数据可视化应用】华夫饼型柱状图(附R语言代码)
  3. 第1章 游戏之乐——快速找出故障机器
  4. python参数化_Python 中如何实现参数化测试的方法示例
  5. python列表中数据类型可以不同吗_Python改变列表中数据类型的方法
  6. pix4d怎么查看点云数据_PIX4D的两种像控点刺点方式探讨
  7. SurfaceView实例
  8. 转:工具类之SpannableStringUtils(相信你会爱上它)
  9. dsp调音一次多少钱_DSP调音到底调的是什么?什么是EQ?
  10. Python-Numpy语法总结-数组的创建
  11. 艺术创作六步法则、浅谈色彩、如何理解漫画
  12. 加拿大布兰登大学计算机专业,加拿大布兰登大学有哪些专业?
  13. 自己搭的12V 电机驱动电路设计
  14. un3.0服务器文档,ZXUNUSPP系统概述.ppt
  15. 使用优盘为龙芯电脑安装系统
  16. php微信跳转到支付宝,微信点击短链接直接跳转到支付宝领红包教程 附带例子...
  17. SQLite3 模糊查询
  18. 【Qt】关于QLabel显示图片二三事
  19. 基恩士KV06N程序 基恩士KV06N,昆仑通态触摸屏 全自动LED划线点装机,PLC本体伺服轴控制
  20. 无刷直流电机自适应模糊PID控制及仿真

热门文章

  1. 如何解决七牛云图片链接失效问题?
  2. UE的rtsp插件崩溃过程排查
  3. PLC实验-四传送带的模拟
  4. 【H5】H5与APP对接跳转
  5. windows7系统无法开机显示丢失volmgrx.sys驱动文件
  6. OpenJudge NOI 1.5 编程基础之循环控制(21-30题)C++ 解题思路
  7. BCG Application Management
  8. php使用 短信宝 发送短信(thinkphp)
  9. ubuntu16.04安装anaconda3并配置tensorflow(CPU)+sypder(亲测有效)
  10. 【今日CV 计算机视觉论文速览 第114期】Thu, 9 May 2019