Android端Telegram WebView唤起拨号应用并自动填充号码问题

我开发了Telegram Mini Application（TMA），在卖家详情模块设有呼叫按钮，用户可通过该按钮拨打卖家电话。目前iOS端已有可行解决方案：

const handleCall = () => {
  const phoneNumber = detailUserInfo.phone.trim().replace(/\D/g, '');
  if (phoneNumber) window.open(`tel:+${phoneNumber}`);
  else console.error('Invalid phone number');
};

<Button onClick={handleCall} size='large' variant='primary'>
   Make a call
</Button>

但该方案在Android端无法正常工作：点击按钮可唤起拨号应用，但不会自动填充号码。我已尝试以下多种方案，但均在Telegram WebView中无效（在浏览器中正常）：

尝试过的方案 #

1. 编码电话号码（全平台无效） #

const handleCallDefault = () => {
  const phoneNumber = detailUserInfo.phone.trim().replace(/\D/g, '');

  if (phoneNumber) {
    const formattedNumber = `+${phoneNumber}`;
    const encodedNumber = encodeURIComponent(formattedNumber);

    window.open(`tel:${encodedNumber}`, '_blank', '_system');
  } else {
    console.error('Invalid phone number');
  }
};

2. 使用window.location.href #

const handleCallUtilsWindowLocation = () => {
  const phoneNumber = detailUserInfo.phone.trim().replace(/\D/g, '');

  if (phoneNumber) {
    const formattedNumber = `+${phoneNumber}`;
    const encodedNumber = encodeURIComponent(formattedNumber);

    window.location.href = `tel:${encodedNumber}`;
  } else {
    console.error('Invalid phone number');
  }
};

3. Next.js Link组件（仅iOS有效） #

<Link href={`tel:+${detailUserInfo.phone}`} target='_blank'>
  Make a call
</Link>

4. 锚点标签<a href> #

<a href={`tel:+${detailUserInfo.phone}`} target='_blank'>
  Make a call
</a>

可行解决方案建议 #

1. 使用Telegram WebApp官方API的openLink方法 #

Telegram为TMA提供了专门的WebApp SDK，其中的openLink方法是官方推荐的打开外部链接的方式，能更好适配iOS和Android的WebView环境：

// 若使用@twa-dev/sdk包
import { WebApp } from '@twa-dev/sdk';

// 或直接调用全局对象
const WebApp = window.Telegram.WebApp;

const handleCall = () => {
  const phoneNumber = detailUserInfo.phone.trim().replace(/\D/g, '');
  if (phoneNumber) {
    const telUrl = `tel:+${phoneNumber}`;
    WebApp.openLink(telUrl);
  } else {
    console.error('Invalid phone number');
  }
};

2. 简化号码格式，跳过编码操作 #

部分Android WebView对编码后的tel链接解析存在问题，直接使用纯数字加国家码的格式可能解决问题：

const handleCall = () => {
  const phoneNumber = detailUserInfo.phone.trim().replace(/\D/g, '');
  if (phoneNumber) {
    window.location.href = `tel:+${phoneNumber}`;
  } else {
    console.error('Invalid phone number');
  }
};

3. 模拟原生标签点击行为 #

创建隐藏的<a>标签并模拟用户点击，这种方式更贴近原生交互，部分WebView兼容性更好：

const handleCall = () => {
  const phoneNumber = detailUserInfo.phone.trim().replace(/\D/g, '');
  if (phoneNumber) {
    const callLink = document.createElement('a');
    callLink.href = `tel:+${phoneNumber}`;
    callLink.style.display = 'none';
    document.body.appendChild(callLink);
    callLink.click();
    document.body.removeChild(callLink);
  } else {
    console.error('Invalid phone number');
  }
};

4. 检查权限与配置 #

• 确保Telegram Bot后台的TMA配置中，允许打开外部链接；
• 提示Android用户检查Telegram应用是否被授予了拨号相关的系统权限，权限不足可能导致号码无法自动填充。

内容的提问来源于stack exchange，提问作者Vadym Chornyi