一定要避坑:关于微信H5分享，温馨提示你不要再踩坑了!!!
一定要避坑:关于微信H5分享，温馨提示你不要再踩坑了!!!
Ims
发布于 2024-04-10 11:23:52
发布于 2024-04-10 11:23:52
项目背景
- ? 在上次的业务需求需要我们开发一个商品 H5 页面。这个页面需要在微信中打开，并且能够以卡片式的形式分享到微信好友，而不仅仅是纯链接的形式。
遇到的问题
- ? 在开发过程中，我们遇到了一些问题。我们按照之前的经验，接入了微信 JSDK，并执行了个性化分享配置。然而，当我们换了商品 id 后，发现在 iOS 和 Android 上收藏的数量不一致，有时候第二个卡片甚至没有分享图片和标题。
- ? 到这里，先抛出遇到的两个问题：
- 1. 当换了商品 id 后，发现在 iOS 和 Android 上收藏的分享卡片数量不一致问题。
- 2. 分享给朋友时，分享卡片配置的分享图片，标题以及描述没有生效问题。
解决过程
- ? 第一个问题：
? 发布了两个不同域名，验证后，会存在两个分享卡片。这个解决方法也存在潜在问题，如果后续存在 100 多个甚至更多，那岂不是要很多个域名。?
? 我用 test 环境，在安卓下复现，发现两个参数可以收藏为两个不同的分享卡片，所以排除。
- ? 我换了 history 模式路由，问题依旧存在，所以排除。
- 1. 检查是否与 hash 模式路由有关系。?
- 2. 检查是否在同一个域名下不同参数只能收藏为一个。?
- 3. 检查是否是微信版本问题，反复确认后，发现是微信版本问题。
- 4. 确认分享的 link 链接是否正确，反复确认后是对的。?
- 5. 检查是否是微信版本问题，用测试机换了不同微信版本，也没有问题。?
- 6. 检查是否是两个链接收藏为同一个的问题，并不是，两个链接会产生两个分享卡片。?
- 7. 尝试用两个域名来收藏，看是否会有两个收藏记录。
- ? 第二个问题：
- ? 我用了了 vue 中的 eventBus 来解决，先让 JSDK 初始化，再执行 配置分享的中的方法，问题依旧存在。
- 1. 检查是否与 JSDK 初始化的先后顺序有关系。?
- 2. 打开初始化 JSDK 的 debug 模式，一步一步调试，最后发现也没有问题。?
解决方案
- ? 第一个问题：
- ? 经过多次测试和查找资料，我们发现了问题的根源：
window.location.origin存在兼容性问题。我们根据这个发现，修改了我们的链接生成方式：
- ? 经过多次测试和查找资料，我们发现了问题的根源：
link: `${location.protocol}//${location.host}${location.pathname}/index.html?id=${this.$route.query.id}`;- ? 第二个问题：
- ? 先从二维码中打开，然后再收藏分享(这个步骤只需要做一次，后续会一直生效)
总结
- ? 注意事项：
- 1. 在使用 JSDK 之前，确保先进行初始化成功后再进行分享配置。
- 2. 在定制分享配置时，避免使用 window.location.origin 生成链接，而是使用下述提到的方法来生成，(盲猜，可能是 IOS 和 Android 兼容性问题)
link: `${location.protocol}//${location.host}${location.pathname}/index.html?id=${this.$route.query.id}`;- 1. 需要注意的是，H5 分享与网页的 hash 或 history 模式无关。
- ? 解决方案：
- 1. 可以考虑使用二维码来打开链接，然后进行收藏和分享以确保生效。?
- 2. 从公众号菜单中的链接打开或从气泡链接进入，同样可以生效。?
- 3. 可先将链接收藏到微信，然后从微信收藏中进入再进行分享。?
本文参与?腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2024-04-03，如有侵权请联系?cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录