場景
在app中撥打電話是一個比較常見的應(yīng)用場景,但是我們通過搜索文章,發(fā)現(xiàn),大部分的博文都是uni-app官網(wǎng)的copy, copy
uni-app 提供的打電話,只是幫你把撥號界面呼出來,并不能直接撥打, 安卓原生api可以,ios因為權(quán)限問題,不行
那么,我們可以做個判斷,如果是安卓,點擊了 直接就把電話撥出來,其他的平臺,使用uni-app默認的喚起撥號界面
實現(xiàn)機制html5 提供的接口 plus.device.dial 這個sdk的使用,是需要引入包的uni-app 對外提供的接口 uni.makephonecallios和 andriod 提供原生的接口- 不熟悉原生開發(fā),會有困難在移動端瀏覽器 h5頁面
<a href="tel: 10086">10086</a>復制代碼廢話不多說,直接上代碼說明
下面是通過 條件編譯 各平臺代碼接口實現(xiàn)
testdevice.vue
<view> <!-- #ifdef app-plus --> <button @tap="telphone">撥打電話</button> <!-- #endif --> <!-- #ifdef h5 --> <a href="tel:10086">10086-h5平臺下</a> <!-- #endif --></view><script> // 對不同的平臺有一點區(qū)分 import telphone from './telphone.js' export default { methods: { telphone() { // 通過傳遞電話參數(shù),調(diào)用不同平臺撥打電話的功能 telphone("10086") } } }</script>復制代碼我們這里 不關(guān)注界面問題,避免分散各位看官老爺?shù)年P(guān)注點,重點看js中的實現(xiàn)
請注意,一定使用 條件編譯,可以支持不同的場景, 上面的是 app端(ios和andriod), 下面是普通的h5
telphone.js
//#ifdef h5import vconsole from 'vconsole'new vconsole()//#endifexport default (phone) => { // 獲取設(shè)備平臺 let platform = uni.getsysteminfosync().platform //#ifdef h5 // h5環(huán)境--瀏覽器 let ua = navigator.useragent.tolowercase() // 就要判斷 是微信內(nèi)置瀏覽器還是用戶的普通瀏覽器 if (ua.match(/micromessenger/i) == "micromessenger") { // 微信瀏覽器 console.log('微信瀏覽器') } else { // 普通瀏覽器 } //#endif //#ifdef app-plus // app環(huán)境 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(); // 創(chuàng)建intent var uri = uri.parse("tel:" phone); // 這里可修改電話號碼 var call = new intent("android.intent.action.call", uri); // 調(diào)用startactivity方法撥打電話 main.startactivity(call); break; case 'ios': // 使用uni-app提供的借口 uni.makephonecall({ phonenumber: phone }) break; default: // 調(diào)試器工具 } //#endif}復制代碼注意事項條件編譯, 我們在使用 vconsole 的時候,如果不使用條件編譯,在app端是會報錯的一定不能將import語句 寫在if判斷或者 三目運算中, 會報錯, 要理解es6模塊加載的機制通過uni-app提供的接口,判斷是app平臺(ios或者andriod) ,怎么區(qū)分普通瀏覽器和微信瀏覽器還是依賴條件編譯上述的無論是uni-app提供的api實現(xiàn)還是,andriod的 sdk 都是跳出 app撥打電話,掛斷以后,還是會調(diào)回app界面
plus.device.dial 需要引入對應(yīng)的sdk, 這個其實有是要通過 條件編譯,判斷當前所處的環(huán)境,上面的已經(jīng)夠用,其實和引入 vconsole 是一樣的道理
了解其他文章敬請訪問uni-app欄目!