PHP前端开发

uni-app在不同平台下拨打电话的示例

百变鹏仔 2个月前 (11-21) #uniapp
文章标签 示例

场景

在App中拨打电话是一个比较常见的应用场景,但是我们通过搜索文章,发现,大部分的博文都是uni-app官网的copy, copy

uni-app 提供的打电话,只是帮你把拨号界面呼出来,并不能直接拨打, 安卓原生API可以,IOS因为权限问题,不行

那么,我们可以做个判断,如果是安卓,点击了 直接就把电话拨出来,其他的平台,使用uni-app默认的唤起拨号界面

实现机制

废话不多说,直接上代码说明下面是通过 条件编译+ 各平台代码接口实现

testDevice.vue

<view>  <!-- #ifdef APP-PLUS -->  <button>拨打电话</button>  <!-- #endif -->  <!-- #ifdef H5 -->  <a>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 H5import VConsole from 'vconsole'new VConsole()//#endifexport default (phone) =&gt; {    // 获取设备平台    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}复制代码

注意事项

了解其他文章敬请访问uni-app栏目!