jira: http://jira.iguming.net:8080/browse/XSWT-1484

缺陷原因

前端传递参数问题导致。IOS系统解析参数的中文等特殊字符会乱码，导致页面卡住。

从小程序页面跳转到h5页面，绑定银行卡和提现按钮需要传一些复杂的参数（对象，包含中文，花括号等特殊符号），在测试过程中其实发现了绑定银行卡按钮跳转有问题，所以上线前已经解决了。但是提现按钮没有处理到。

分析过程

本次需求，除了完成业务目的外，也做了一个H5页面的迁移（中信账户详情），这个页面上有3个入口是跳转到H5页面的。在开发的时候主要使用模拟器自测，走了所有流程都是没问题的。这三个入口分别是：

  • 解绑/绑定银行卡（链接上有JSON.string后的对象字符串，包含中文，花括号等）
  • 提现（链接上有JSON.string后的对象字符串，包含中文，花括号等）
  • 店铺对账（链接是纯字符）

提测的时候，测试人员在手机上发现，点击绑定银行卡有问题，页面卡住了，而且他的手机型号（iphone pro 13, 系统16.4），点击账户对账走的逻辑不是最新代码，其他手机（Iphone 13, 16.4; iphone 14 pro, 16.4等）都按照我最新开发的代码逻辑。

对于第一个问题，我发现是上网查了一下是IOS系统解析中文参数的时候会乱码，导致页面不显示。所以通过对参数上的对象部分再次encodeURI编码解决了。

1
2
3
4
5
6
7
encodeURIComponent(
    JSON.stringify({
      bankAccountCertNo,
      bankAccountName,
      payAccount,
    })
  )

第二个问题花了一整天时间也找不出原因（那天是周五）。打算周一的时候继续看什么问题。

到了周一的时候，测试人员把手机系统升级到16.4.1，第二个问题就解决了。因为手机型号和系统同时匹配的手机很难借到，所以我和测试约定周二发布，要是上线遇到这样问题就让用户升级系统。

这个问题的原因似乎成了不解之谜。

到了周二的时候，准备发布的时候我还特意问了测试，所有功能点都测完了吧。测试默认说是，所以就准备发布。产品也走查了。

后面就遇到这个线上问题。

解决措施

  1. 紧急止血方案：修改nacos配置的字段，可以恢复到迁移前逻辑（恢复旧版本调用）。
  2. 最终解决方案是调用 query-string 库的stringify api对query对象进行处理。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const queryObj = {
  payAccount,
  balance,
  freezeAmt, // 冻结金额
  availableAmt, // 可用余额
  defaultCard: isWithDrawal ? JSON.stringify(defaultCard) : undefined,
  balanceTime: type === ROUTES_MAP.transDetail.value ? balanceTime : undefined,
  shopCode,
  bindInfo:
    // 解决中文、花括号，在ios上编码乱码，导致无法打开h5的问题
    type === ROUTES_MAP.bankInfo.value
      ? encodeURIComponent(
          JSON.stringify({
            bankAccountCertNo,
            bankAccountName,
            payAccount,
          })
        )
      : undefined,
};
openWebView(`/${type}?isGoToMyPage=true&${stringify(queryObj)}`);

复盘

经过上面的分析，我总结下来，产生这个线上的原因主要有以下几点：

  1. 自测的时候没有在真机上测

真机和模拟器有很多区别。

  1. 太过于依赖和相信测试人员了

提测前，虽然已经把影响面同步给他了，要测的除了这次需求外，还需要回归一下整个页面以及这个页面跳转到其他页面等逻辑和交互。

但是他简单地把这次需求理解为就点一点的测试。而且他对我们迁移H5页面的任务有点意见，认为增加了他的工作量，而且迁移应该有单独的技改项目（他确实可以有这个理由，我也不是很好argue，这可能是个在周会需要抛出来的问题）。

此次需求会迁移一个h5页面，在开发前评估工作的时候就在群里通知到测试和产品了。但是产品走查的时候没和他同步。

以后如何改进

  1. 开发小程序的时候，自测的时候要使用手机测试几遍
  2. 如果有超出业务需求之外的改动，要和产品、测试同步，需求评审的时候一遍、提测的时候一遍、走查的时候一遍
License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

Share