本文主要是介绍一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
项目背景
- 在上次的业务需求需要我们开发一个商品 H5 页面。这个页面需要在微信中打开,并且能够以卡片式的形式分享到微信好友,而不仅仅是纯链接的形式。
遇到的问题
解决过程
-
第一个问题:
- 检查是否与 hash 模式路由有关系。❌
- 我换了 history 模式路由,问题依旧存在,所以排除。
- 检查是否在同一个域名下不同参数只能收藏为一个。❌
- 我用 test 环境,在安卓下复现,发现两个参数可以收藏为两个不同的分享卡片,所以排除。
- 检查是否是微信版本问题,反复确认后,发现是微信版本问题。
- 确认分享的 link 链接是否正确,反复确认后是对的。❌
- 检查是否是微信版本问题,用测试机换了不同微信版本,也没有问题。❌
- 检查是否是两个链接收藏为同一个的问题,并不是,两个链接会产生两个分享卡片。❌
- 尝试用两个域名来收藏,看是否会有两个收藏记录。
- 发布了两个不同域名,验证后,会存在两个分享卡片。这个解决方法也存在潜在问题,如果后续存在 100 多个甚至更多,那岂不是要很多个域名。❌
-
第二个问题:
- 检查是否与 JSDK 初始化的先后顺序有关系。❌
- 我用了了 vue 中的 eventBus 来解决,先让 JSDK 初始化,再执行 配置分享的中的方法,问题依旧存在。
- 打开初始化 JSDK 的 debug 模式,一步一步调试,最后发现也没有问题。❌
解决方案
- 第一个问题:
- 经过多次测试和查找资料,我们发现了问题的根源:
window.location.origin
存在兼容性问题。我们根据这个发现,修改了我们的链接生成方式:
link: `${location.protocol}//${location.host}${location.pathname}/index.html?id=${this.$route.query.id}`;
- 第二个问题:
- 先从二维码中打开,然后再收藏分享(这个步骤只需要做一次,后续会一直生效)
总结
- 在使用 JSDK 之前,确保先进行初始化成功后再进行分享配置。
- 在定制分享配置时,避免使用 window.location.origin 生成链接,而是使用下述提到的方法来生成,(盲猜,可能是 IOS 和 Android 兼容性问题)
link: `${location.protocol}//${location.host}${location.pathname}/index.html?id=${this.$route.query.id}`;
- 需要注意的是,H5 分享与网页的 hash 或 history 模式无关。
- 解决方案:
- 可以考虑使用二维码来打开链接,然后进行收藏和分享以确保生效。✅
- 从公众号菜单中的链接打开或从气泡链接进入,同样可以生效。✅
- 可先将链接收藏到微信,然后从微信收藏中进入再进行分享。✅
更多知识点了解
这篇关于一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!