泠泠彻夜的笔记

外观

此页内容
blogs

H5调用拨号短信邮件功能

怡然

262字小于1分钟

HTML

2024-08-05

提示

公司项目中用vue开发H5页面内嵌APP中需要调用手机拨打电话的功能，故需要开启一些其他在PC端开发时不用的属性。本质就是在入口文件index.html中配置meta标签。

1. meta标签的配置

<!-- 开启电话号码和短信发送识别 -->
<meta name="format-detection" content="telephone=yes" /> 
<!-- 开启邮件发送识别 -->
<meta name="format-detection" content="email=yes" />
<!-- 开启地址识别 -->
<meta name="format-detection" content="address=yes" />

2. 调用功能

2.1 拨打电话和发送短信

  • 方法一
<a href="tel:123456">123456</a>
<a href="sms:123456">123456</a>

注意，无论是tel还是sms，都需要在href中加上:，否则会被当做普通的字符串。:后是电话号码。

  • 方法二
<template>
	<div class="child">
		<div class="telephone" @click="makePhone(10001)" >拨打电话</div>
	</div>
</template>

<script setup lang="ts" name="Child">
function makePhone(phone:any) {
	window.location.href = 'tel://' + phone
}
</script>

2.2 发邮件

<a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>