【移动端点击手机号唤醒拨号功能】

最新推荐文章于 2024-12-11 09:43:33 发布

GQC前端

最新推荐文章于 2024-12-11 09:43:33 发布

阅读量1.6k

点赞数 4

分类专栏：前端笔记文章标签： js vue html

本文链接：https://blog.csdn.net/weixin_67324074/article/details/124268316

版权

前端笔记专栏收录该内容

21 篇文章

订阅专栏

移动端唤起手机打电话（拨号）和发短信功能

第一次在公司做项目时遇到的问题

拨打电话


index.html在<head></head>中加入这一段
<meta name="format-detection" content="telephone=yes"/>

js
callPhone () { //创建一个方法
   window.location.href = 'tel:4000-000-000';
}

html
<a href="tel:4000-000-000">拨打电话</a>

vue 动态绑定
<a :href="'tel:' + numbers">{{ numbers }}</a> //numbers 就是号码

发送短信


index.html在<head></head>中加入这一段
<meta name="format-detection" content="telephone=yes"/>

js
callPhone () { //创建一个方法
  window.location.href = 'sms:10086?body=短信内容'; // 添加内容
  window.location.href = 'sms:10086'; // 不添加内容
}

html
<a href="sms:10086">发送短信</a>
<a href="sms:10086?body=短信内容"></a>

发邮箱


<a :href="'mailto:' + numbers">{{ numbers }}</a> //numbers 就是号码

移动web页面自动探测电话号码


<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">

使用wtai协议进行拨打电话


<a href="wtai://wp//mc;10086">拨打10086 </a>  
<a href="wtai://wp/ap;10086;">存储</a>

关于微信页面出现屏蔽的情况，采用以下解决方案

解决方法如下：
1、拨号的代码还是不变，和原先的一样，
2、打开拨号页面要做下处理，在网址后面增加一个锚节点mp.weixin.qq.com。
实例如下：

如：<a href=“tel:10086”> 一键拨号 </a> 上需要拨号代码，操作如下
在有这个代码的页面URl后边加上“#mp.weixin.qq.com” 如：tel:10086#mp.weixin.qq.com