這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 場景 在App中撥打電話是一個比較常見的應用場景，但是我們通過搜索文章，發現，大部分的博文都是uni-app官網的copy， copy uni-app 提供的打電話，只是幫你把撥號界面呼出來，並不能直接撥打， 安卓原生API可以，IOS因 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
場景
在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 是一樣的道理
本文轉載於:
https://juejin.cn/post/6856775720921513992
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
