这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
场景
在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
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
版权声明:
1、IT大王遵守相关法律法规,由于本站资源全部来源于网络程序/投稿,故资源量太大无法一一准确核实资源侵权的真实性;
2、出于传递信息之目的,故IT大王可能会误刊发损害或影响您的合法权益,请您积极与我们联系处理(所有内容不代表本站观点与立场);
3、因时间、精力有限,我们无法一一核实每一条消息的真实性,但我们会在发布之前尽最大努力来核实这些信息;
4、无论出于何种目的要求本站删除内容,您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》:https://itdw.cn/ziliao/sfgs.pdf,
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明: http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理;请按照此通知格式填写发至本站的邮箱 wl6@163.com
1、IT大王遵守相关法律法规,由于本站资源全部来源于网络程序/投稿,故资源量太大无法一一准确核实资源侵权的真实性;
2、出于传递信息之目的,故IT大王可能会误刊发损害或影响您的合法权益,请您积极与我们联系处理(所有内容不代表本站观点与立场);
3、因时间、精力有限,我们无法一一核实每一条消息的真实性,但我们会在发布之前尽最大努力来核实这些信息;
4、无论出于何种目的要求本站删除内容,您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》:https://itdw.cn/ziliao/sfgs.pdf,
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明: http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理;请按照此通知格式填写发至本站的邮箱 wl6@163.com