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


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 获取select下拉列表值的代码
Sep 07 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
基于javascript实现移动端轮播图效果
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
PHP 多维数组排序实现代码
2009/08/05 PHP
php 将excel导入mysql
2009/11/09 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python版学生管理系统
2018/01/10 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
比较基础的php面试题及答案-填空题
2014/04/26 面试题
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
火锅店营销方案
2014/02/26 职场文书
幼教求职信
2014/03/12 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
村官个人总结范文
2015/03/03 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS