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 &#39;./telphone.js&#39;
  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欄位！

以上是uni-app在不同平台下撥打電話的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！