1. 程式人生 > 程式設計 >微信小程式實現撥打電話功能的示例程式碼

微信小程式實現撥打電話功能的示例程式碼

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,})
}

然後儲存點選

這裡寫圖片描述

嗯嗯,還是應該多看看開發文件,即使不完整。

到此這篇關於微信小程式實現撥打電話功能的示例程式碼的文章就介紹到這了,更多相關微信小程式撥打電話內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!