你一定要避坑： 关于微信H5分享，你不要再踩坑了！！！

一定要避坑:关于微信H5分享，温馨提示你不要再踩坑了!!!

项目背景

• 在上次的业务需求需要我们开发一个商品 H5 页面。这个页面需要在微信中打开，并且能够以卡片式的形式分享到微信好友，而不仅仅是纯链接的形式。
  

遇到的问题

• 在开发过程中，我们遇到了一些问题。我们按照之前的经验，接入了微信 JSDK，并执行了个性化分享配置。然而，当我们换了商品 id 后，发现在 iOS 和 Android 上收藏的数量不一致，有时候第二个卡片甚至没有分享图片和标题。

• 到这里，先抛出遇到的两个问题：

  1. 当换了商品 id 后，发现在 iOS 和 Android 上收藏的分享卡片数量不一致问题。
  2. 分享给朋友时，分享卡片配置的分享图片，标题以及描述没有生效问题。

解决过程

• 第一个问题：

  1. 检查是否与 hash 模式路由有关系。❌
     • 我换了 history 模式路由，问题依旧存在，所以排除。
  2. 检查是否在同一个域名下不同参数只能收藏为一个。❌
     • 我用 test 环境，在安卓下复现，发现两个参数可以收藏为两个不同的分享卡片，所以排除。
       
  3. 检查是否是微信版本问题，反复确认后，发现是微信版本问题。
  4. 确认分享的 link 链接是否正确，反复确认后是对的。❌
  5. 检查是否是微信版本问题，用测试机换了不同微信版本，也没有问题。❌
  6. 检查是否是两个链接收藏为同一个的问题，并不是，两个链接会产生两个分享卡片。❌
  7. 尝试用两个域名来收藏，看是否会有两个收藏记录。
     • 发布了两个不同域名，验证后，会存在两个分享卡片。这个解决方法也存在潜在问题，如果后续存在 100 多个甚至更多，那岂不是要很多个域名。❌

• 第二个问题：

  1. 检查是否与 JSDK 初始化的先后顺序有关系。❌
     • 我用了了 vue 中的 eventBus 来解决，先让 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}`;

3. 需要注意的是，H5 分享与网页的 hash 或 history 模式无关。

• 解决方案：
  1. 可以考虑使用二维码来打开链接，然后进行收藏和分享以确保生效。✅
  2. 从公众号菜单中的链接打开或从气泡链接进入，同样可以生效。✅
  3. 可先将链接收藏到微信，然后从微信收藏中进入再进行分享。✅