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


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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
jQuery each函数源码分析
May 25 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 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
PHP漏洞全解(详细介绍)
2012/11/13 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
开始着手第一个Django项目
2015/07/15 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python中常见的异常总结
2018/02/20 Python
python进行两个表格对比的方法
2018/06/27 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
通过cmd进入python的步骤
2020/06/16 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
信访工作经验交流材料
2014/05/23 职场文书
企业读书活动总结
2014/06/30 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript