移动端(vue)如何调用手机拨号功能

简介: 移动端(vue)如何调用手机拨号功能

1. 简介

在挪动前端编写 HTML 当中, 标签meta:<meta name="format-detection"/>有什么用法呢

当用手机浏览该 HTML 页面在手机上浏览时,该标签会将网页内容中的手机号码主动识别拨号的超链接。

在 iPhone 上默认值是:

<meta name="format-detection" content="telephone=yes"/>

如果你不想将手机主动将网页中的电话号码显示为拨号的超链接,那么可以:

<meta name="format-detection" content="telephone=no"/>

2. 在vue中如何调用手机拨号功能

2.1 配置index.html

如上图所示,在该HTML文件里面的head里面添加如下代码:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=yes" /> //添加该代码 
    <title>项目名称</title> 
  </head>
  <body>
  </body>
</html>

2.2 配置要调用的页面或者组件

在所需要调用的页面上的DOM示例代码:

 <div @click="callPhone">
     <van-icon name="phone-circle-o" />联系客户
 </div>

methods里面的方法示例代码:

  // 调用拨号功能
    callPhone(phoneNumber) {
      //window.location.href = "tel://158xxxx1317";
      window.location.href = "tel://"+phoneNumber;
    },

3. 结语

  以上为个人遇到的问题,及其记录,欢迎大家指正!

相关文章
|
1月前
|
移动开发 JavaScript
H5唤起手机打电话(拨号)和发短信功能
H5唤起手机打电话(拨号)和发短信功能
37 0
|
5月前
|
小程序 JavaScript
小程序一个页面调用多个号码的手机拨号功能
小程序一个页面调用多个号码的手机拨号功能
73 0
|
5月前
|
小程序 JavaScript
小程序调出手机拨号功能
小程序调出手机拨号功能
94 0
|
7月前
|
JavaScript
手机移动端返回顶部js代码demo效果示例(整理)
手机移动端返回顶部js代码demo效果示例(整理)
|
9月前
|
JavaScript
vue移动端手机号正则表达式
vue移动端手机号正则表达式
187 0
|
11月前
|
开发工具 Android开发 开发者
Appium 移动端自动化 - Android SDK连接安卓手机,adb连接一加8手机USB调试实例演示,连接一加8手机不显示USB调试选项问题排查
Appium 移动端自动化 - Android SDK连接安卓手机,adb连接一加8手机USB调试实例演示,连接一加8手机不显示USB调试选项问题排查
396 0
|
11月前
|
开发工具 Android开发
Appium 移动端自动化 - Android SDK的安装与配置,使用安卓SDK连接手机实例演示
Appium 移动端自动化 - Android SDK的安装与配置,使用安卓SDK连接手机实例演示
124 0
外呼系统APP外呼软件手机电销软件拨号销售软件功
外呼系统APP外呼软件手机电销软件拨号销售软件功
253 0
外呼系统APP外呼软件手机电销软件拨号销售软件功
|
前端开发
前端移动端开发中对手机机型的判断
在日常开发中,前端往往需要根据用户的手机系统类型去做相应的操作,执行对应的代码。
473 0