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


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 相关文章推荐
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
Vuex新手的理解与使用详解
May 31 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 批量删除 sql语句
2009/06/05 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
Python如何获取系统iops示例代码
2016/09/06 Python
np.random.seed() 的使用详解
2020/01/14 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
华为C++笔试题
2014/08/05 面试题
办公室主任岗位职责
2013/11/08 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python