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


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 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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下过滤HTML代码的函数
2007/12/10 PHP
php curl选项列表(超详细)
2013/07/01 PHP
php数组合并的二种方法
2014/03/21 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
js控制frameSet示例
2013/09/10 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python装饰器的函数式编程详解
2015/02/27 Python
python常见排序算法基础教程
2017/04/13 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python实现网页自动签到功能
2019/01/21 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python IDLE添加行号显示教程
2020/04/25 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
村委会贫困证明
2014/01/14 职场文书
平民服装店创业计划书
2014/01/17 职场文书
企业出纳岗位职责
2014/03/12 职场文书
保证书格式范文
2014/04/28 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
食品药品安全责任书
2015/05/11 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL