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


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怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
JS request函数 用来获取url参数
May 17 Javascript
jQuery find和children方法使用
Jan 31 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
JavaScript实现星级评分
Jan 12 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
微信公众号H5支付接口调用方法
Jan 10 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 版本]
2007/03/20 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
javascript求日期差的方法
2016/03/02 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
机器学习10大经典算法详解
2017/12/07 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python利用命名空间解析XML文档
2020/08/10 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
火山动力Java笔试题
2014/06/26 面试题
实习自我鉴定
2013/12/15 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js