金色小芝麻

vuePress-theme-reco 金色小芝麻    2021 - 2023
金色小芝麻 金色小芝麻

Choose mode

  • dark
  • auto
  • light
主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
author-avatar

金色小芝麻

83

文章

27

标签

主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
  • BUG复盘

    • keepalive标签上的include传值问题
    • 微信IOS设置分享不是指定链接
    • /blogs/BUG复盘/3.ifamre与keepalive一起使用问题.html

微信IOS设置分享不是指定链接

vuePress-theme-reco 金色小芝麻    2021 - 2023

微信IOS设置分享不是指定链接

金色小芝麻 2023-11-28

# 一、BUG复现

项目开发中涉及修改微信分享链接功能。

  • 由A 分享给B, B打开A分享的携带邀请码的链接,进去正常;
    • A分享出去的链接: “https://wxtst.aibank.link/IFM/F/activityfe/operation/#/saveMoney/home/ACT20231030173308504577/1/1/GRP20231031183247170387/kPy77Obj”
  • B点击分享,分享出去的链接携带B的邀请码;
    • B 分享出去的链接: “https://wxtst.aibank.link/IFM/F/activityfe/operation/#/saveMoney/home/ACT20231030173308504577/1/1/GRP10231031191010392003/kPy88Obj”
  • B再次点击上一步自己分享出来的链接进入页面,再次点击分享
    • B再次分享的链接: “https://wxtst.aibank.link/IFM/F/activityfe/operation/#/saveMoney/home/ACT20231030173308504577/1/1”
    • 此时链接中的邀请码信息丢失,问题复现
    • 点击页面中分享按钮重新设置分享链接,依然失效
    • 刷新当前页面,再次分享:分享成功 链接中携带邀请码

最终确认复现场景:IOS系统 & 用户点击自己分享出去的链接进入页面后再次发起分享

# 二、排查思路

1、代码逻辑梳理:

// 发起邀请
const setInviteCodeV2 = async () => {
  try {
    let res = await generateInviteCodeV2({
      activityNo:activityNo
    })
    let { groupNo, inviteLinkUrl } = res
    let webUrl = window.$cur_dz_url + `#/saveMoney/home/${activityNo}/${service}/${channel}/${groupNo}/${inviteLinkUrl}`
    await setShareOption(webUrl) // 此方法内调用微信 config
  } catch (error) {
  }
}
// 接受邀请
const createInvite = async () => {
  try {
    let res = await createInviteRecord({
      activityNo:activityNo
    })
    router.replace(`/saveMoney/home/${activityNo}/${service}/${channel}`)
  } catch (error) {
  }
}

// 初始化
const initData = async () => {
  // 设置分享链接
  setInviteCodeV2(); // 发起分享,调用 wx.config 设置分享链接

  // M2接受邀请
  if(groupNo.value && linkUrl.value){
    await createInvite(); // 接受邀请后,replace 替换URL
  }
}
initData()

2、根据当前代码逻辑,应当是 设置分享与接受邀请之间互不影响。

3、开启微信 config 的 debugger 模式 查看 config 是否注册并调用成功: 测试结果为成功。

4、点击按钮重新设置分享链接 config依然提示成功,但分享出去的链接依然为错误链接。

5、全局中对链接的操作只有在接受邀请之后的 replace.

# 测试方案一:首先测试 replace 对分享的影响

使用replace原因:当用户点击携带邀请码的链接进入页面时,用户接受邀请成功失败,在点击页面中按钮跳转至子页面,在从子页面返回时会再次调用接受邀请接口,由于已经接受过一次,故本次必定弹出失败弹窗,所以在接受邀请接口第一调用完成之后将当前链接中携带的邀请码去掉。

  • 代码实现:使用 session 存标识的方法替换掉 replace

    • 修改上述代码如下
    // 接受邀请
    const createInvite = async () => {
      try {
        let res = await createInviteRecord({
          activityNo:activityNo
        })
        // router.replace(`/saveMoney/home/${activityNo}/${service}/${channel}`)
        storage.setJSON('isInvited', 1, 'session')
      } catch (error) {
        
      }
    }
    
    // 初始化
    const initData = async () => {
      // 设置分享链接
      setInviteCodeV2();
      
      let isInvited = storage.getJSON('isInvited', 'session')
      // M2接受邀请
      if(groupNo.value && linkUrl.value && !isInvited){
        await createInvite();
      }
    }
    
  • 部署测试:分享成功,IOS分享正常,安卓分享正常

# 三、BUG分析

# 1、只有 IOS 异常

考虑 IOS 微信 config 注册签名的授权 URL 缓存处理

  • 微信会在执行 config 方法时对当前 URL进行授权并锁定
  • IOS 会对第一次 config 执行结果进行缓存,所以在 replace 替换链接之后,再次点击页面中的分享按钮重新调用 wx.config 其授权锁定的 URL 并没有改变。

# 2、只有自己点击自己的连接时才失效,点击别人分享的链接是正常

  • 考虑锁定 URL与重新设置的 URL 一致导致。

  • 验证思路:在分享链接后拼上时间戳,保证锁定 URL 与即将设置的分享链接不一致,修改代码如下:

    // 发起邀请
    const setInviteCodeV2 = async () => {
      try {
        let res = await generateInviteCodeV2({
          activityNo:activityNo
        })
        let { groupNo, inviteLinkUrl } = res
        let webUrl = window.$cur_dz_url + `#/saveMoney/home/${activityNo}/${service}/${channel}/${groupNo}/${inviteLinkUrl}?${new Date().getTime()}`
        await setShareOption(webUrl)
      } catch (error) {
        
      }
    }
    
  • 测试结果: IOS 分享正常、安卓分享正常,邀请码携带也正常。

  • 得出结论:考虑锁定 URL 与重新设置的 URL 一致导致的问题。

# 3、当前错误情况下分享出去的链接情况

  • 经 debugger 排查当前 config 执行为成功状态,且设置链接也显示成功,考虑 当锁定 URL与重新设置的分享URL一致时,取了当前页面吧路由
  • 验证思路:查看设置的分享链接为 replace 替换后的路由,修改 replace 替换后的路由再次查看。
  • 测试结果:分享出来的链接仍然为 replace 替换后的路由。
  • 得出结论:当锁定 URL与重新设置的分享URL一致时,取了当前页面吧路由

# 四、总结

  • 本次问题复现时间较久,由于线上一直使用 IOS 系统进行复现。在测试环境一直使用安卓手机进行测试,导致在测试环境一直复现不出来问题。线上问题应优先保证在系统一致下进行复现测试。
  • 微信 API 使用出问题时,应优先排查 config 是否设置成功

# 参考文献

1、ios二次分享,分享的链接和设置的链接对不上,怎么解决? (opens new window)

欢迎来到 金色小芝麻
看板娘