uni-app在不同平臺下撥打電話的範例

場景

在App中撥打電話是一個比較常見的應用場景，但是我們通過搜尋文章，發現，大部分的博文都是uni-app官網的copy， copy

uni-app 提供的打電話，只是幫你把撥號介面撥出來，並不能直接撥打，安卓原生API可以，IOS因為許可權問題，不行

那麼，我們可以做個判斷，如果是安卓，點選了直接就把電話撥出來，其他的平臺，使用uni-app預設的喚起撥號介面

實現機制

HTML5+ 提供的介面 plus.device.dial 這個SDK的使用，是需要引入包的
uni-app 對外提供的介面 uni.makePhoneCall
IOS和 Andriod 提供原生的介面- 不熟悉原生開發，會有困難

在行動端瀏覽器 H5頁面

<a href="tel: 10086">10086</a>複製程式碼

廢話不多說，直接上程式碼說明下面是通過條件編譯+ 各平臺程式碼介面實現

testDevice.vue

<view>
  <!-- #ifdef APP-PLUS -->
  <button @tap="telphone">撥打電話</button>
  <!-- #endif -->

  <!-- #ifdef H5 -->
  <a href="tel:10086">10086-h5平臺下</a>
  <!-- #endif -->
</view>

<script>
  // 對不同的平臺有一點區分
  import telphone from './telphone.js'
  export default {
    methods: {
      telphone() {
        // 通過傳遞電話引數，呼叫不同平臺撥打電話的功能
        telphone("10086")
      }
    }
  }
</script>複製程式碼

我們這裡不關注介面問題，避免分散各位看官老爺的關注點，重點看js中的實現

請注意，一定使用條件編譯，可以支援不同的場景，上面的是 App端（IOS和Andriod），下面是普通的h5

telphone.js

//#ifdef H5
import VConsole from 'vconsole'

new VConsole()
//#endif

export default (phone) => {
    // 獲取裝置平臺
    let platform = uni.getSystemInfoSync().platform
 
    //#ifdef H5
    // h5環境--瀏覽器
    let ua = navigator.userAgent.toLowerCase()
    // 就要判斷 是微信內建瀏覽器還是使用者的普通瀏覽器

    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // 微信瀏覽器
        console.log('微信瀏覽器')
    } else {
        // 普通瀏覽器 
    }
    //#endif

    //#ifdef APP-PLUS
    // app環境
    switch (platform) {
        case 'android':
            // 匯入Activity、Intent類
            var Intent = plus.android.importClass("android.content.Intent");
            var Uri = plus.android.importClass("android.net.Uri");
            // 獲取主Activity物件的範例  
            var main = plus.android.runtimeMainActivity();
            // 建立Intent  
            var uri = Uri.parse("tel:" + phone); // 這裡可修改電話號碼  
            var call = new Intent("android.intent.action.CALL", uri);
            // 呼叫startActivity方法撥打電話  
            main.startActivity(call);
            break;
        case 'ios':
            // 使用uni-app提供的藉口
            uni.makePhoneCall({
                phoneNumber: phone
            })
            break;
        default:
            // 偵錯程式工具
    }
    //#endif
}複製程式碼

注意事項

條件編譯，我們在使用 VConsole 的時候，如果不使用條件編譯，在App端是會報錯的
一定不能將import語句寫在if判斷或者三目運算中，會報錯，要理解ES6模組載入的機制
通過uni-app提供的介面，判斷是App平臺（IOS或者Andriod），怎麼區分普通瀏覽器和微信瀏覽器還是依賴條件編譯
上述的無論是uni-app提供的API實現還是，Andriod的 SDK 都是跳出 App撥打電話，結束通話以後，還是會調回App介面
plus.device.dial 需要引入對應的SDK, 這個其實有是要通過條件編譯，判斷當前所處的環境，上面的已經夠用，其實和引入 vconsole 是一樣的道理

瞭解其他文章敬請存取欄目！

以上就是uni-app在不同平臺下撥打電話的範例的詳細內容，更多請關注TW511.COM其它相關文章！