项目背景
- 在上次的业务需求需要我们开发一个商品 H5 页面。这个页面需要在微信中打开，并且能够以卡片式的形式分享到微信好友，而不仅仅是纯链接的形式。
[图片上传失败...(image-f0e6da-1712130027739)]
遇到的问题
在开发过程中，我们遇到了一些问题。我们按照之前的经验，接入了微信 JSDK，并执行了个性化分享配置。然而，当我们换了商品 id 后，发现在 iOS 和 Android 上收藏的数量不一致，有时候第二个卡片甚至没有分享图片和标题。
-
到这里，先抛出遇到的两个问题：
- 当换了商品 id 后，发现在 iOS 和 Android 上收藏的分享卡片数量不一致问题。
- 分享给朋友时，分享卡片配置的分享图片，标题以及描述没有生效问题。
解决过程
-
第一个问题：
- 检查是否与 hash 模式路由有关系。❌
- 我换了 history 模式路由，问题依旧存在，所以排除。
- 检查是否在同一个域名下不同参数只能收藏为一个。❌
-
我用 test 环境，在安卓下复现，发现两个参数可以收藏为两个不同的分享卡片，所以排除。
h5分享-1.png
-
- 检查是否与 hash 模式路由有关系。❌
3. 检查是否是微信版本问题，反复确认后，发现是微信版本问题。
4. 确认分享的 link 链接是否正确，反复确认后是对的。❌
5. 检查是否是微信版本问题，用测试机换了不同微信版本，也没有问题。❌
6. 检查是否是两个链接收藏为同一个的问题，并不是，两个链接会产生两个分享卡片。❌
7. 尝试用两个域名来收藏，看是否会有两个收藏记录。
- 发布了两个不同域名，验证后，会存在两个分享卡片。这个解决方法也存在潜在问题，如果后续存在 100 多个甚至更多，那岂不是要很多个域名。❌
- 第二个问题：
- 检查是否与 JSDK 初始化的先后顺序有关系。❌
- 我用了了 vue 中的 eventBus 来解决，先让 JSDK 初始化，再执行 配置分享的中的方法，问题依旧存在。
- 打开初始化 JSDK 的 debug 模式，一步一步调试，最后发现也没有问题。❌
- 检查是否与 JSDK 初始化的先后顺序有关系。❌
解决方案
- 第一个问题：
- 经过多次测试和查找资料，我们发现了问题的根源：
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 模式无关。
-
解决方案：
- 可以考虑使用二维码来打开链接，然后进行收藏和分享以确保生效。✅
- 从公众号菜单中的链接打开或从气泡链接进入，同样可以生效。✅
- 可先将链接收藏到微信，然后从微信收藏中进入再进行分享。✅
