微信分享卡片兼容性问题
微信在2022年11月份调整了分享H5页面的规则,详情可参考https://mp.weixin.qq.com/s/7zxqex8DuuWj8cFfDhz2bw
着实鸡贼
前言
简而言之,目前还能分享出卡片的途径有三种:
- 扫描二维码
- 从公众号进入页面
- 收藏地址,然后从收藏进入再分享
- 可能还有其他途径,环欢迎大家补充。。。
在开发分享的过程中,也是有各种小问题出现。
我负责的项目是用 React
开发的一个 SPA
应用,路由是用的 react-router
, 再测试分享功能时,发现IOS
系统 ,分享卡片有时候生效,有时候不生效。
环境以及库版本:
- 微信SDK 1.6 版本: http://res.wx.qq.com/open/js/jweixin-1.6.0.js
- 微信版本: 8.0.23。
微信API
按照官方说明也更新的调用的api为: wx.updateAppMessageShareData
、wx.updateTimelineShareData
接口。
场景描述
本次需求是两个页面: 一个列表页, 一个内容详情页。 详情页需要在分享的时候生成自定义卡片。 在多次测试过程中发现了一个规律:
- 直接扫码 列表页, 点击按钮跳转 详情页, 然后分享,卡片无法正常生成,是使用的默认的内容(链接+默认图片)
- 直接扫码 详情页, 然后分享, 生成的卡片信息正常,内容均为自定的链接和图片
以上问题在 多个 Android 系统的手机上,功能均正常,无论使用何种方式进入页面,都能正常分享。IPhone 多个机型都不行。
最终结果
经过 N个小时的 左思右想,和不断测试过程中,我突然注意到,从 列表页 -> 详情页 是使用了 Link
标签,于是乎就尝试 替换成普通 a
标签,竟然好了。
说一下这两中的区别:
- Link 模式:
Link 是react-router
提供的一个组件,用来页面跳转,react-router完全接管,也就是单页应用的精髓所在,不会再去服务端请求 - a
传统的页面跳转方式,会刷新页面。
为什么??
我也不清楚为什么会这样,在微信那个社区问了半天,也没有一个靠谱的,这个估计只有微信知道了吧吧吧吧!
微信分享卡片兼容性问题