uniapp实现拨打电话跳转手机拨号界面 (ios和安卓通用)

效果展示:左边为安卓系统展示,右边为ios系统展示

代码:

javascript 复制代码
toPhone(){
  uni.makePhoneCall({
    phoneNumber: "10086", //要拨打的手机号
    success: (res) => {
      // console.log("调用成功")
    },
    fail: (res) => {
      // console.log('调用失败!')
    }
  })
},

api解析:uni.makePhoneCall(OBJECT) 拨打电话

OBJECT 参数说明:

参数名 类型 必填 说明
phoneNumber String 需要拨打的电话号码
success Function 接口调用成功的回调
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

uniapp官方文档链接:https://uniapp.dcloud.net.cn/api/system/phone.html#makephonecall


拓展:点击弹出电话号码列表,选择其中一个电话号进行拨打

效果展示:

代码:

javascript 复制代码
toPhone() {
  const phoneList = ["10086","10010","10000"]
  uni.showActionSheet({
    itemList: phoneList,  //电话列表
    success: function(res) {
      if (res.tapIndex !== undefined) {
        uni.makePhoneCall({
          phoneNumber: phoneList[res.tapIndex],
          success: function() {
            //console.log('拨打电话成功');
          },
          fail: function() {
            //console.log('拨打电话失败');
          }
        });
      }
    }
  });
}

api解析:uni.showActionSheet(OBJECT) 从底部向上弹出操作菜单

OBJECT参数说明:

参数 类型 必填 说明 平台差异说明
title String 菜单标题 App、H5、支付宝小程序、钉钉小程序、微信小程序 3.4.5+(仅真机有效)
alertText String 警示文案(同菜单标题) 微信小程序(仅真机有效)
itemList Array<String> 按钮的文字数组 微信、百度、抖音小程序数组长度最大为6个
itemColor HexColor 按钮的文字颜色,字符串格式,默认为"#000000" App-iOS、飞书小程序不支持
popover Object 大屏设备弹出原生选择按钮框的指示区域,默认居中显示 App-iPad(2.6.6+)、H5(2.9.2)
success Function 接口调用成功的回调函数,详见返回参数说明
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

popover 值说明(仅App生效):

类型 说明
top Number 指示区域坐标,使用原生 navigationBar 时一般需要加上 navigationBar 的高度
left Number 指示区域坐标
width Number 指示区域宽度
height Number 指示区域高度

success返回参数说明:

参数 类型 说明
tapIndex Number 用户点击的按钮,从上到下的顺序,从0开始

uniapp官方文档链接: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet

相关推荐
AORO2025几秒前
航运、应急、工业适用,AORO P1100三防平板引领行业数字化变革
运维·服务器·网络·智能手机·电脑·信息与通信
Q_Q51100828513 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆13 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
盛夏绽放18 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
知识分享小能手19 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_9160088920 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
安卓开发者1 天前
鸿蒙NEXT Wear Engine开发实战:手机侧应用如何调用穿戴设备能力
华为·智能手机·harmonyos
好好学习啊天天向上1 天前
Android Studio 撕开安卓手机投屏
android·智能手机·android studio
风清云淡_A1 天前
【uniapp】uni.uploadFile上传数据多出一个304的get请求处理方法
uni-app
shykevin1 天前
uni-app x商城,商品列表组件封装以及使用
windows·uni-app