H5 开发秘籍：一键唤醒手机打电话与发短信功能全攻略

在 HTML 标准中，定义了tel:协议用于创建电话拨号链接。当用户点击带有tel:协议的链接时，浏览器会识别该协议，并调用手机系统的拨号应用程序，将链接中指定的电话号码填充到拨号界面，用户确认后即可拨出电话。这种方式利用了浏览器对特定协议的解析和系统应用的调用机制，实现了从 H5 页面到手机拨号功能的无缝衔接。

1.2 示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唤醒打电话功能</title>
</head>

<body>
    <!-- 创建一个可点击的链接，使用tel:协议 -->
    <a href="tel:10086">点击拨打10086</a>
</body>

</html>

1.3 代码解析

上述代码非常简洁直观：

<a>标签用于创建超链接，是 HTML 中实现页面跳转和功能调用的常用标签。
href属性指定了链接的目标，这里使用tel:10086，其中tel:是协议标识，10086是具体的电话号码。当用户点击这个链接时，浏览器会自动触发手机的拨号应用，并将10086显示在拨号界面上。

二、H5 唤醒发短信功能实现

2.1 实现原理

与唤醒打电话功能类似，H5 唤醒发短信功能借助sms:协议来实现。当用户点击包含sms:协议的链接时，浏览器会唤起手机系统的短信应用程序，并根据链接中的参数，预先填充短信的接收号码和内容，方便用户快速发送短信。

2.2 示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唤醒发短信功能</title>
</head>

<body>
    <!-- 创建一个可点击的链接，使用sms:协议 -->
    <a href="sms:10086?body=你好，我想咨询业务">点击给10086发送短信</a>
</body>

</html>

2.3 代码解析

在这段代码中：

依然使用<a>标签创建链接。
href属性的值为sms:10086?body=你好，我想咨询业务 ，其中sms:10086指定了短信的接收号码为10086；?body=你好，我想咨询业务是一个参数传递，body参数用于设置短信的内容，当用户点击链接时，手机的短信应用会自动将你好，我想咨询业务填充到短信编辑框中。

三、兼容性与注意事项

3.1 设备兼容性

虽然上述方法在大多数现代移动设备（如安卓手机和 iPhone）的主流浏览器中都能正常工作，但由于不同操作系统（iOS、Android 等）和浏览器版本对协议的支持程度可能存在差异，开发者需要在多种设备和浏览器上进行充分测试。例如，部分老旧设备或小众浏览器可能无法正确识别协议，导致功能无法正常使用。

3.2 桌面端处理

在桌面浏览器环境下，由于计算机通常不具备直接拨号和发送短信的硬件和软件条件，点击这些链接不会产生任何效果。因此，在实际项目开发中，建议通过 JavaScript 检测用户的设备类型，仅在移动设备上显示相关功能链接，避免给桌面端用户造成困扰。以下是一段简单的设备类型检测代码示例：

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    // 是移动设备，显示打电话和发短信链接
    document.getElementById('callLink').style.display = 'block';
    document.getElementById('smsLink').style.display = 'block';
} else {
    // 是桌面设备，隐藏打电话和发短信链接
    document.getElementById('callLink').style.display = 'none';
    document.getElementById('smsLink').style.display = 'none';
}

在 HTML 中，对应的链接元素可以添加id属性方便操作：

<a id="callLink" href="tel:10086" style="display:none;">点击拨打10086</a>
<a id="smsLink" href="sms:10086?body=你好，我想咨询业务" style="display:none;">点击给10086发送短信</a>