欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

微信小程序--实现拨打电话功能 有大用

微信小程序--实现拨打电话功能

2018年06月16日 17:05:57 之芫 阅读数:13052更多                
所属专栏: 微信小程序之旅                


 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Magic_Ninja/article/details/80713953

我的点击实物是一张图片

首先设置一个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,
  })
}
               

然后保存点击

image.png                

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

为什么开发文档有我还要写啊?我个人笔记而已。


来自 https://blog.csdn.net/magic_ninja/article/details/80713953




微信小程序拨打电话

我们讲一下如何用微信小程序拨打电话的开发流程。

image.png

                   

工具/原料
           

  • 微信web开发者工具
  • 微信开发者账号

方法/步骤
           

  1. 1

    首先我们建立好项目,路径,我们打开inde.wxml,先来写一个按钮。这个按钮实现拨打电话的第一步。


  2. image.png                       

  3. 2

    然后我们打开index.js 文件,找到官方的API文件查阅一下。最好选用来自官网的。

  4. image.png                       

  5. 3

    我们找到对应的例子拨打电话,测试一下,可以拨打电话了。我们完成了50%了。


  6. image.png                       

  7. 4

    下面我们要找到回调函数,拨打成功的回调函数。API提供的是

    success 是 接口调用成功的回调,我们用一下这个方法。调用成功。


  8. image.png                       

  9. 5

    我们再调用一下拨号失败的回调函数,API提供的是

    failFunction接口调用失败的回调函数。结果显示如果放弃拨打电话,调用函数成功。


  10. image.png                       

  11. 6


    image.png
                           

                           
    END                    
  12. 下面我贴一下完整代码

  13. wxml:


  14. <button bindtap='tel'>拨 号</button>  


  15. js:


  16.  tel: function () {

  17.    wx.makePhoneCall({

  18.      phoneNumber: '1340000', //此号码仅用于测试 。

  19.      success: function () {

  20.        console.log("拨打电话成功!")

  21.      },

  22.      fail: function () {

  23.        console.log("拨打电话失败!")

  24.      }

  25.    })

  26.  }

经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
举报作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。    

来自 https://jingyan.baidu.com/article/9f63fb91777615c8400f0e9d.html


使用微信小程序拨打电话

2018年06月12日 16:06:52 我是高手高手高高手 阅读数:8666            


一、拨打一个电话                


               

官方文件:https://developers.weixin.qq.com/miniprogram/dev/api/phonecall.html#wxmakephonecallobject

               


               

1、在js文件里加入
               


               

  1. Page({
  2. calling:function(){
  3. wx.makePhoneCall({
  4. phoneNumber: '12345678900', //此号码并非真实电话号码,仅用于测试
  5. success:function(){
  6. console.log("拨打电话成功!")
  7. },
  8. fail:function(){
  9. console.log("拨打电话失败!")
  10. }
  11. })
  12. }
  13. })
               

2、wxml布局文件代码                

<button type="default" bindtap="calling">拨打电话</button>
               


               

bindtap="calling"要与calling:function(){对应名称
               


               

转载:https://www.shejiku.net/xiaochengxubodadianhua.html                

https://blog.csdn.net/futruejet/article/details/52984734
               


               


               

二、拨打多个电话
               


               

1、wxml文件                

  1. <text data-reply-phone="020-38038789" bindtap="phoneCall">广州校区:广东省广州市天河区天河路490号壬丰大厦西厅1704  020-38038789 </text>                            
  2. <text data-reply-phone="0755-33320126" bindtap="phoneCall">深圳校区:广东省深圳市福田区深南大道6013号 中国有色大厦1013室  0755-33320126</text>                            
  3. <text data-reply-phone="13763370344" bindtap="phoneCall">深圳校区:广东省深圳市宝安区宏发中心大厦4栋1220 文老师13763370344</text>                            
  4. <text data-reply-phone="0757-82037797" bindtap="phoneCall">佛山校区:广东省佛山市禅城区市东上路39号越秀可逸新势力5、6栋 0757-82037797</text>                            
  5. <text data-reply-phone="0753-2292268" bindtap="phoneCall">梅州校区:广东省梅州市梅江区法政路21号21-14 中大教育(小肥羊隔壁)0753-2292268</text>                            
  6. <text data-reply-phone="0751-8228006" bindtap="phoneCall">韶关校区:广东省韶关市浈江区北江北路1号财富大厦A座1517室  0751-8228006</text>                            
  7. <text data-reply-phone="0760-87921732" bindtap="phoneCall">中山校区:广东省中山市石岐区东明路28号 8楼802卡(峰华28 A办公区 802室) 0760-87921732</text>                            
  8. <text data-reply-phone="0663-516799" bindtap="phoneCall">揭阳校区:广东省揭阳市东山区金都花园南门12号铺  0663-516799</text>                            
  9. <text data-reply-phone="0769-28821817" bindtap="phoneCall">东莞校区:广东省东莞市南城区第一国际商务大厦D座711  0769-28821817</text>                            
  10. <text data-reply-phone="0752-7821256" bindtap="phoneCall">惠州校区:广东省惠州市惠城区新岸路1号世贸中心32楼C2室  0752-7821256</text>                            
  11. <text data-reply-phone="0750-3215876" bindtap="phoneCall">江门校区:广东省江门市蓬江区建设二路98号1015室(万源大厦) 0750-3215876</text>                            
  12. <text data-reply-phone="0758-2226632" bindtap="phoneCall">肇庆校区:广东省肇庆市天宁北路63号合百利购物中心四层001号商铺之K16A号  0758-2226632</text>                            
  13. <text data-reply-phone="0763-3361950" bindtap="phoneCall">清远校区:广东省清远市清城区凤翔大道5号东方巴黎一号楼28层20号  0763-3361950</text>                            
  14. <text data-reply-phone="0662-2338055" bindtap="phoneCall">阳江校区:广东省阳江市江城区石湾北路汇金大厦908室 0662-2338055</text>                            
  15. <text data-reply-phone="0668-2853081" bindtap="phoneCall">茂名校区:广东省茂名市茂南区站前街道文光路68号天一国际2309室 0668-2853081</text>                            
  16. <text data-reply-phone="0759-2216289" bindtap="phoneCall">湛江校区:广东省湛江市霞山区人民大道中40号,城市尚品交行大厦B座1209 0759-2216289</text>                            
  17. <text data-reply-phone="0768-2106353" bindtap="phoneCall">潮州校区:广东省潮州市湘桥区新洋路584号  0768-2106353</text>                            
  18. <text data-reply-phone="028-82832788" bindtap="phoneCall">成都校区:四川省成都市锦江区红星路三段银石广场2801  028-82832788</text>                            
  19. <text data-reply-phone="023-88256425" bindtap="phoneCall">重庆校区:重庆江北区观音桥地铁站4号口未来国际大厦8-3室 023-88256425</text>                            
  20. <text data-reply-phone="023-58806125" bindtap="phoneCall">重庆校区:重庆万州区太白路187号中庆财贸广场C栋1804  023-58806125</text>                            
  21. <text data-reply-phone="0851-85912303" bindtap="phoneCall">贵阳校区:贵州省贵阳市南明区花果园金融街1号3019 0851-85912303</text>                            
  22. <text data-reply-phone="0851-28626761" bindtap="phoneCall">遵义校区:贵州省遵义市汇川区大连路航天大厦1003室 0851-28626761</text>                            
  23. <text data-reply-phone="0871-68010698" bindtap="phoneCall">昆明校区:云南省昆明市五华区宝善街和护国路交叉路口215号银座大厦2218 0871-68010698</text>                            
  24. <text data-reply-phone="0592-5717721" bindtap="phoneCall">厦门校区:福建省厦门市思明区嘉禾路23号新景中心A座1207室 0592-5717721</text>                            
  25. <text data-reply-phone="0591-87520200" bindtap="phoneCall">福州校区:福建省福州市鼓楼区东街83号中庚青年广场1706室  0591-87520200</text>                            
  26. <text data-reply-phone="0596-2190211" bindtap="phoneCall">漳州校区:福建省漳州市碧湖万达中心写字楼A座一楼大堂左侧  0596-2190211</text>                            
  27. <text data-reply-phone="0595-22020292" bindtap="phoneCall">泉州校区:福建省泉州市丰泽区宝洲路万达中心A座1508室  0595-22020292</text>                            
  28. <text data-reply-phone="0731-85838390" bindtap="phoneCall">长沙校区:湖南省长沙市芙蓉区潘后街 五一大道 湘域国际中心东栋902  0731-85838390</text>                            
  29. <text data-reply-phone="0571-86966035" bindtap="phoneCall">杭州校区:浙江省杭州市江干区凤起东路358号天星龙大厦B座2106 0571-86966035</text>                            
  30. <text data-reply-phone="0574-87583515" bindtap="phoneCall">宁波校区:浙江省宁波市海曙区东渡路55号 新华联写字楼2421室  0574-87583515‬</text>                            
  31. <text data-reply-phone="0991-2667820" bindtap="phoneCall">新疆校区:乌鲁木齐市天山区光明路59号时代广场D座15L  0991-2667820</text>                            
  32. <text data-reply-phone="025-‭83324201" bindtap="phoneCall">南京校区:江苏省南京市秦淮区太平南路168号远洋国际中心南区2幢617室 025-‭83324201‬</text>                            
  33. <text data-reply-phone="0536-5701939" bindtap="phoneCall">山东校区:山东省潍坊市奎文区阳光100城市广场13号楼1101室  0536-5701939</text>                            
  34. <text data-reply-phone="0512-67236986" bindtap="phoneCall">苏州校区:苏州市姑苏区广济南路258号百脑汇1202  0512-67236986‬‬‬‬‬‬</text>                            
               

2、js文件


               

  1. phoneCall: function (e) {
  2. wx.makePhoneCall({
  3. phoneNumber: e.currentTarget.dataset.replyPhone,
  4. success: function () {
  5. console.log("成功拨打电话")
  6. },
  7. })
  8. },
               


               

转载:https://blog.csdn.net/qq_24391837/article/details/78749407


来自 https://blog.csdn.net/haibo0668/article/details/80666838


微信小程序 识别文字内的手机号码或者电话号码然后拨打电话

2018年05月22日 20:09:29 a_靖 阅读数:1771更多                
所属专栏: 微信小程序                


 版权声明:本文为博主原创文章,未经博主允许不得转载。如需开发微信小程序可加微信: 13977284413 https://blog.csdn.net/qq_35713752/article/details/80410863

 有问题可以扫码加我微信,有偿解决问题。承接小程序开发。                

微信小程序开发交流qq群   173683895  、 526474645 ;                

正文:                

效果图:

               

需求:识别文字内的手机号码或者电话号码然后拨打电话

  1. <!--pages/detail/detail.wxml-->                            
  2. <view  bindtap='click'>                            
  3. <text>{{data}}</text></view>                            
  4. <view class='page_bg' wx:if='{{block}}' bindtap='hide_bg'/>                            
  5. <view class='btn_bg' wx:if='{{block}}'>                            
  6. <view wx:for="{{phoneNumber}}" wx:key='index'>                            
  7. <button class="sp_tit" id='{{index}}' bindtap='list_item'>拨打 {{item}} </button>                            
  8. </view>                            
  9. </view>                            
               

js

  1. // 正则匹配手机号码和电话号码                            
  2. function checkPhone(text) {
  3. return text.match(/((((13[0-9])|(15[^4])|(18[0,1,2,3,5-9])|(17[0-8])|(147))\d{8})|((\d3,4|\d{3,4}-|\s)?\d{7,14}))?/g);
  4. }
  5. var content;
  6. // pages/detail/detail.js                            
  7. Page({
  8. /**                            
  9.   * 页面的初始数据                            
  10.   */                            
  11. data: {
  12. },
  13. click: function (e) {
  14. var phone = content
  15. // console.log(checkPhone(phone)) //把字符串检索出来的的数字拆分                            
  16. var phone_list = checkPhone(phone)
  17. var yse_phone = []
  18. for (var i = 0; i < phone_list.length; i++) {
  19. if (phone_list[i].length == 8 || phone_list[i].length == 7 || phone_list[i].length == 11) {
  20. yse_phone.push(phone_list[i])
  21. }
  22. }
  23. if (yse_phone.length == 1) {
  24. wx.makePhoneCall({
  25. phoneNumber: yse_phone[0]
  26. })
  27. } else {
  28. if (yse_phone.length != 0) {
  29. this.setData({
  30. phoneNumber: yse_phone,
  31. block: true                            
  32. })
  33. }
  34. }
  35. console.log(yse_phone)
  36. },
  37. /**                            
  38.   * 生命周期函数--监听页面加载                            
  39.   */                            
  40. onLoad: function (options) {
  41. content = options.data
  42. this.setData({
  43. data: options.data
  44. })
  45. },
  46. list_item: function (e) {
  47. var list_item_phone = this.data.phoneNumber[e.target.id]
  48. wx.makePhoneCall({
  49. phoneNumber: list_item_phone
  50. })
  51. this.setData({
  52. block: false                            
  53. })
  54. },
  55. hide_bg: function () {
  56. this.setData({
  57. block: false                            
  58. })
  59. },
  60. /**                            
  61.   * 生命周期函数--监听页面初次渲染完成                            
  62.   */                            
  63. onReady: function () {
  64. },
  65. /**                            
  66.   * 生命周期函数--监听页面显示                            
  67.   */                            
  68. onShow: function () {
  69. },
  70. /**                            
  71.   * 生命周期函数--监听页面隐藏                            
  72.   */                            
  73. onHide: function () {
  74. },
  75. /**                            
  76.   * 生命周期函数--监听页面卸载                            
  77.   */                            
  78. onUnload: function () {
  79. },
  80. /**                            
  81.   * 页面相关事件处理函数--监听用户下拉动作                            
  82.   */                            
  83. onPullDownRefresh: function () {
  84. },
  85. /**                            
  86.   * 页面上拉触底事件的处理函数                            
  87.   */                            
  88. onReachBottom: function () {
  89. },
  90. /**                            
  91.   * 用户点击右上角分享                            
  92.   */                            
  93. onShareAppMessage: function () {
  94. }
  95. })
               

css

  1. /* pages/detail/detail.wxss */                            
  2. .page_bg{
  3. z-index: 998;
  4. position: fixed;
  5. top: 0%;
  6. left: 0%;
  7. width: 100%;
  8. height: 100%;
  9. background-color:rgba(0,0,0,0.5);
  10. }
  11. .btn_bg{
  12. z-index: 999;
  13. width: 100%;
  14. margin: 0 auto;
  15. position: fixed;
  16. }
  17. .sp_tit {
  18. width: 90%;
  19. font-size: 38rpx;
  20. height: 105rpx;
  21. line-height: 105rpx;
  22. margin-left: 25rpx;
  23. border-bottom: 1 solid sandybrown;
  24. /* margin: 52rpx auto; */                            
  25. }
               

 


来自   https://blog.csdn.net/qq_35713752/article/details/80410863

普通分类: