记录--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 是一样的道理

本文转载于:

https://juejin.cn/post/6856775720921513992

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。