脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序拨打电话

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

 更新时间：2020年06月28日 09:42:58   作者：之芫  
这篇文章主要介绍了微信小程序实现拨打电话功能的示例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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.js的Page里面去添加

tel:function () {
 wx.makePhoneCall({
 phoneNumber: '158XXXXXXXX',
 })
}

还有一种是：
就是去全局量那里设置，去最外层的app.js的globalData添加一下

globalData: {
 userInfo: null,
 phoneNumber: '158XXXXXXXX'
}

然后index.js添加的是

tel:function () {
 wx.makePhoneCall({
 phoneNumber: app.globalData.phoneNumber,
 })
}

然后保存点击

这里写图片描述

嗯嗯，还是应该多看看开发文档，即使不完整。

到此这篇关于微信小程序实现拨打电话功能的示例代码的文章就介绍到这了,更多相关微信小程序拨打电话内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • 利用javascript如何随机生成一定位数的密码

    利用javascript如何随机生成一定位数的密码

    这篇文章主要给大家介绍了关于利用javascript如何随机生成一定位数的密码的相关资料，文中给出了详细的示例代码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • javascript实现移动端上传图片功能

    javascript实现移动端上传图片功能

    这篇文章主要为大家详细介绍了javascript实现移动端上传图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • javascript获取四位数字或者字母的随机数

    javascript获取四位数字或者字母的随机数

    这篇文章主要介绍了javascript获取四位数字或者字母的随机数,需要的朋友可以参考下
    2015-01-01
  • uniapp单页面实现页面切换的使用示例

    uniapp单页面实现页面切换的使用示例

    本文主要介绍了uniapp单页面实现页面切换的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-09-09
  • JavaScript直接调用函数与call调用的区别实例分析

    JavaScript直接调用函数与call调用的区别实例分析

    这篇文章主要介绍了JavaScript直接调用函数与call调用的区别,结合额实例形式分析了JavaScript直接调用函数与call调用的基本用法、区别及相关注意事项,需要的朋友可以参考下
    2020-05-05
  • 小程序录音功能实现

    小程序录音功能实现

    这篇文章主要介绍了小程序录音功能实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • javascript实现点击商品列表checkbox实时统计金额的方法

    javascript实现点击商品列表checkbox实时统计金额的方法

    这篇文章主要介绍了javascript实现点击商品列表checkbox实时统计金额的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JS判断是否在微信浏览器打开的简单实例(推荐)

    JS判断是否在微信浏览器打开的简单实例(推荐)

    下面小编就为大家带来一篇JS判断是否在微信浏览器打开的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 详谈LABJS按需动态加载js文件

    详谈LABJS按需动态加载js文件

    为了提高页面的打开和加载速度，我们经常把JS文件放在页面的尾部，但是有些JS必须放在页面前面，这样就会增加页面的加载时间；于是出现了按需动态加载的概念，这个概念就是当页面需要用到这个JS文件或者CSS渲染文件的时候，在去请求这些文件，这样就节省了页面的加载时间
    2015-05-05
  • javascript的函数劫持浅析

    javascript的函数劫持浅析

    javascript函数劫持，也就是老外提到的javascript hijacking技术。虽然这个概念在前端领域使用较少，但是在安全领域、自定义业务等场景下还是有一定的使用价值的。所以，这一篇文章将会和大家一起去了解一下JS中的函数劫持是什么，有什么作用，下面来一起看看吧。
    2016-09-09

最新评论