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


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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 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
IIS6的PHP最佳配置方法
2007/03/19 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
基于PHP制作验证码
2016/10/12 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
python 类之间的参数传递方式
2019/12/20 Python
python实现吃苹果小游戏
2020/03/21 Python
法务专员岗位职责
2014/01/02 职场文书
班主任寄语2015
2015/02/26 职场文书
十八大观后感
2015/06/12 职场文书
清洁工工作总结
2015/08/11 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书