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


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编写COM组件的步骤
Mar 17 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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 json_encode奇怪问题说明
2011/09/27 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
python代码过长的换行方法
2018/07/19 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
python如何查看网页代码
2020/06/07 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
python多线程和多进程关系详解
2020/12/14 Python
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
2015年材料员工作总结
2015/04/30 职场文书
微观世界观后感
2015/06/10 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript