Android端tel链接点击后号码重复显示问题排查

问题现象 #

点击页面上的tel协议链接后，Android拨号界面显示重复号码（如12345678910,12345678910），而非预期的单个号码。

排查方向与解决方案 #

1. 检查数据源本身 #

最常见的原因是order.salesRepPhone字段的原始值就包含重复号码（比如后端返回的就是12345678910,12345678910）。

• 临时在模板中添加调试代码，直接输出该字段值确认：

  {#if order.salesRepPhone}
      <p>Debug: {order.salesRepPhone}</p>
      <a href="tel:{order.salesRepPhone}">
          <i class="fas fa-phone" />
      </a>
  {/if}
  

• 如果确认数据重复，优先要求后端修正返回值；若无法修改后端，可在前端处理取第一个有效号码：

  <a href="tel:{order.salesRepPhone.split(',')[0].trim()}">
      <i class="fas fa-phone" />
  </a>
  

2. 排查组件重复渲染 #

检查该组件是否被父组件循环渲染，或者在页面中多次加载，导致同一个tel链接被重复解析。可通过查看页面DOM结构，确认是否存在多个相同的<a href="tel:...">元素。

3. 处理特殊字符干扰 #

部分Android系统对tel协议中的空格、特殊符号解析异常，可先对号码做清理处理：

<script>
    // 清理号码中的非数字字符（保留+号用于国际号码）
    const cleanPhoneNumber = (num) => num.replace(/[^\d+]/g, '');
</script>

{#if order.salesRepPhone}
    <a href="tel:{cleanPhoneNumber(order.salesRepPhone)}">
        <i class="fas fa-phone" />
    </a>
{/if}

内容的提问来源于stack exchange，提问作者Sir Rubberduck