uni-app打包H5后放入app内，无法拨号

uni-app打包H5后放入app内，无法拨号

开发环境 版本号 项目创建方式
Mac 10.15.5 HBuilderX

产品分类：uniapp/H5

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：2.9.8

浏览器平台：手机系统浏览器

操作步骤：

在app内创建wkwebview，加载url，点击“呼叫”不能拨号。ios内是wkwebview。安卓内加载url的容器不知道是什么，一样不能拨号。

预期结果：

拨号

实际结果：

点击呼叫没有反应

bug描述：

uniapp打包放H5，不能拨号（号码存在，能打印），代码在47行和255行。

uni.makePhoneCall({
phoneNumber: this.listData[index].phoneNumber,
success: (res) => {
console.log('调用成功！');
console.log(res);
},
fail: (res) => {
console.log('调用失败!');
console.log(res);
}
})

更多关于uni-app打包H5后放入app内，无法拨号的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

问题已解决。 问题：uniapp打包H5，放app webView内不能拨号（打电话）。 真机调试机型：iPhone XR、华为。 安卓的我不太懂，说一下ios的。 uni.makePhoneCall、 a 标签、js直接拨号适合2020年10月中旬以前。 10月后，苹果官方强制要求开发人员使用WKWebView，弃用UIWebView。WKWebView不支持 a 标签、js等方式直接拨号。 解决方案：H5和ios都导入jsBridge库，H5点击按钮拨号，通过herf传出信号，比如：跳转http://www.baidu.com?mobile=1300000。 uniapp导入jsBridge库： manifest.json>H5配置>设置index.html模板路径。 index.html模板创建：在uniapp项目根目录下创建html文件（新建自定义文件，后缀html），文件名随意。我的文件名字mould.html。通过<script></script>标签导入jsBridge库。
1、app内监听webview的url。 2、拿到http://www.baidu.com?mobile=1300000。 3、拦截跳转（我们只要拨号，不是真的跳转到百度去）。 4、解析url获得号码。 5、app调用原生方法拨号。


更多关于uni-app打包H5后放入app内，无法拨号的实战教程也可以访问 https://www.itying.com/category-93-b0.html


上面的回答没有写好，上面的回答是两个解决办法。 当时刚写完文档，神志不清。 总结一下： 方法1：herf，跳转，app内拦截url，解析url拿到参数。 方法2：导入jsbridge，发出消息并且传参，app内收到消息，拿到参数，做对应事件处理。

扫描的二维码

请问是app中嵌套h5拨打电话 是app去拦截然后再调用plus拨打手机号的吗 或者能看下代码吗 感谢

在uni-app打包H5后放入原生App内无法拨号的问题，主要是由于H5环境与原生的交互限制导致的。以下是关键点分析：

  1. 在纯H5环境中，uni.makePhoneCall实际是通过tel:协议触发拨号，但在App内嵌WebView中可能被拦截

  2. iOS的WKWebView默认会阻止tel:等特殊协议的跳转

解决方案：

  1. 原生端需要处理tel协议：
  • iOS需要在WKWebView中实现decidePolicyForNavigationAction代理方法
  • Android需要重写WebViewClient的shouldOverrideUrlLoading方法
  1. 或者改用JSBridge方式：
// 判断运行环境
if(window.plus){
    plus.device.dial(this.listData[index].phoneNumber, false);
}else{
    window.location.href = 'tel:' + this.listData[index].phoneNumber;
}
回到顶部