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


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源码]超长文章自动分页(客户端版)
Jan 09 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
基于JS实现table导出Excel并保留样式
May 19 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实现的获取文件mimes类型工具类示例
2018/04/08 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
javascript document.referrer 用法
2009/04/30 Javascript
document.compatMode介绍
2009/05/21 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
详解写好JS条件语句的5条守则
2019/02/28 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
Python 错误和异常小结
2013/10/09 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
在python中pandas的series合并方法
2018/11/12 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
数据库方面面试题
2012/04/22 面试题
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书