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


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 相关文章推荐
用jquery来定位
Feb 20 Javascript
javascript document.images实例
May 27 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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 全文搜索和替换的实现代码
2008/07/29 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
讲解Python中的递归函数
2015/04/27 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
装修致歉信
2014/01/15 职场文书
晚会主持词开场白
2014/03/17 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
考试作弊检讨
2015/01/27 职场文书
运动员入场前导词
2015/07/20 职场文书
情况说明书怎么写
2015/10/08 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python