为了账号安全,请及时绑定邮箱和手机立即绑定

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

info.jpg

项目背景

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

遇到的问题

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

  • 到这里,先抛出遇到的两个问题:

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

解决过程

  • 第一个问题:

    1. 检查是否与 hash 模式路由有关系。❌
      • 我换了 history 模式路由,问题依旧存在,所以排除。
    2. 检查是否在同一个域名下不同参数只能收藏为一个。❌
      • 我用 test 环境,在安卓下复现,发现两个参数可以收藏为两个不同的分享卡片,所以排除。
        image-1.png
    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}`;
  1. 需要注意的是,H5 分享与网页的 hash 或 history 模式无关。
  • 解决方案
    1. 可以考虑使用二维码来打开链接,然后进行收藏和分享以确保生效。✅
    2. 从公众号菜单中的链接打开或从气泡链接进入,同样可以生效。✅
    3. 可先将链接收藏到微信,然后从微信收藏中进入再进行分享。✅

更多知识点了解

info.jpg

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消