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


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实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
js数组实现权重概率分配
Sep 12 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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实现多进程并行执行脚本
2013/06/18 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
Dom操作之兼容技巧分享
2011/09/20 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
js实现简单计算器
2015/11/22 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python检测QQ在线状态的方法
2015/05/09 Python
对python的输出和输出格式详解
2018/12/08 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
网络编辑求职信
2014/04/30 职场文书
工作建议书范文
2014/05/13 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
预备党员入党感言
2015/08/01 职场文书