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 是一样的道理
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfkjec
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24