微信小程序实现拨打电话功能的示例代码


Posted in Javascript onJune 28, 2020

1、在对应需要拨打电话的标签那里绑定事件(使用的标签不固定,可以是text、view等)

例子:

<text class="phone" bindtap="callPhone">400-9121-211</text>

2、在对应的事件方法里面写入 wx.makePhoneCall方法

例子:

callPhone() {
 wx.makePhoneCall({
  phoneNumber: '400-9121-211' //仅为示例,并非真实的电话号码
 })
 },

3、效果图

微信小程序实现拨打电话功能的示例代码

在电脑上:

微信小程序实现拨打电话功能的示例代码

在手机上的效果:

微信小程序实现拨打电话功能的示例代码

PS:下面在通过一段代码给大家详细介绍下微信小程序--实现拨打电话功能:

我的点击实物是一张图片

首先设置一个view,使用的是bindtap事件。

官方的开发文档是这么写的

微信小程序实现拨打电话功能的示例代码

我的demo的代码是这样的
index.wxml

<view bindtap='tel'>
<image class='tel' mode='aspectFit' src='./img/tel.png'></image>
</view>

然后调整一下ss,当然这只是我的demo的,实际应用还是看实际的。

index.wxss

.tel{
 display: block;
 width: 70rpx;
 height: 70rpx;
 position: absolute;
 margin-top:-100rpx;
 margin-left: 200rpx; 
}

直接去调用拨打电话 APIwx.makePhoneCall(OBJECT)

官方文档也写的很清楚

微信小程序实现拨打电话功能的示例代码

主要是填写phoneNumber,其他看需求,

第一种方法是:

index.jsPage里面去添加

tel:function () {
 wx.makePhoneCall({
 phoneNumber: '158XXXXXXXX',
 })
}

还有一种是:
就是去全局量那里设置,去最外层的app.jsglobalData添加一下

globalData: {
 userInfo: null,
 phoneNumber: '158XXXXXXXX'
}

然后index.js添加的是

tel:function () {
 wx.makePhoneCall({
 phoneNumber: app.globalData.phoneNumber,
 })
}

然后保存点击

微信小程序实现拨打电话功能的示例代码

嗯嗯,还是应该多看看开发文档,即使不完整。

到此这篇关于微信小程序实现拨打电话功能的示例代码的文章就介绍到这了,更多相关微信小程序拨打电话内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
javascript iframe跨域详解
Oct 26 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
js瀑布流布局的实现
Jun 28 #Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 #Javascript
vue实现登录拦截
Jun 29 #Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 #Javascript
JavaScript多种图形实现代码实例
Jun 28 #Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 #Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 #Javascript
You might like
咖啡的化学
2021/03/03 咖啡文化
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
提示$ is not defined错误分析及解决
2013/04/09 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
Vue.js组件通信的几种姿势
2017/10/23 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
简明 Python 基础学习教程
2007/02/08 Python
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
劳动竞赛活动方案
2014/02/20 职场文书
服装设计师求职信
2014/06/04 职场文书
项目工作说明书
2014/07/29 职场文书
体育运动会广播稿
2014/10/05 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Python基础之条件语句详解
2021/06/16 Python
Python List remove()实例用法详解
2021/08/02 Python