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

发布时间:2022-05-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了uni-app在不同平台下拨打电话的示例脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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栏目!

以上就是uni-app在不同平台下拨打电话的示例的详细内容,更多请关注脚本宝典其它相关文章!

脚本宝典总结

以上是脚本宝典为你收集整理的uni-app在不同平台下拨打电话的示例全部内容,希望文章能够帮你解决uni-app在不同平台下拨打电话的示例所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:uni-app