最近一个需求是要求在H5上调用Android的原生系统来进行拨通电话的功能，打电话 相信是应用内很常见的功能，简单点就是一个Intent直接跳转即可，本文给出2种方案，供大家选择参考，（文中会涉及到H5和ios的部分内容）
方式一：
H5实现移动端打电话的功能，最常使用的 href 标签来实现移动端打电话，代码如下（就一行）
移动WEB页面JS一键拨打号码咨询功能
其中，这里的数字就是具体的电话号码，基于此H5开发会进行方法的封装调用（比如，传入一个电话号码等等）。
说完H5在回归到Android。众所周知，Android使用Webview控件来加载H5，由于打电话需要用到权限，因此：
步骤一：
AndroidManifest.xml 清单配置文件，配置权限：
前2个权限，第一个是读取联系人，第二个是打电话的权限，前2个权限是危险权限，因此要做 运行时权限 的方案，运行时权限的第三方库已经很多了，比较出名的有 RxPermissions、EasyPermissions等等，根据自己需求去集成即可，这是实现打电话的第一步
步骤二：
由于方法一，H5的兄弟使用了href 标签，简单点理解，href 属性用于指定超链接目标的 URL，你可能会问，什么叫超链接？简单理解，超链接 在Android中就是在界面内点击某个控件进入到另外一个界面（类似于跳转）。
在Webview中，WebViewClient有个方法重载，叫shouldOverrideUrlLoading( WebView view, String url )，这个方法主要是用来，在网页上进行超链接的时候进行记录，这里的形参url代表的就是界面跳转具体的url，
因此，针对这种标签，实现打电话的代码如下：
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//对应上面的href tel:标签，代码如下
if (url.startsWith("tel:")){
Uri parse = Uri.parse(url);
String s = parse.toString();
//构建Intent
Intent intent = new Intent(Intent.ACTION_VIEW,
Uri.parse(url));
// 进行跳转
view.getContext().startActivity(intent);
return true;
}else {
//不满足打电话的条件，直接加载url
view.loadUrl(url);
Log.i("info", "shouldOverrideUrlLoading: url : "+url);
return true;
}
构建完自定义的WebChromeClient，接着，调用 setWebChromeClient(chromeClient);即可完成打电话的功能
总结：方式一 使用的是对超链接进行拦截判断的方法，符合打电话的条件则进行跳转，不符合条件的则直接加载url，那么，接下来介绍的方式二略有不同
方式二：
在ios加载url上，出现一个奇怪的现象，同样的超链接，在ios那边，居然要进行这样的判断(下面是伪代码：按照Android的逻辑来表达ios的逻辑)：
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//注意：ios这里有 // 两个斜杠，但是写在Android中是不行的
if (url.startsWith("tel://")){
//ios的逻辑...
return true;
}else {
view.loadUrl(url);
Log.i("info", "shouldOverrideUrlLoading: url : "+url);
return true;
}
因为后台的超链接给的是
tel:13333333222
Android如果按照ios的写法，那就有问题了（具体原因也不是很清楚，毕竟该现象是ios朋友口述的）。好了，你可能会说，ios跟Android写不一样的代码即可呀，怎么实现我不管，效果出来就行。但、在一些有技术强迫症的公司，领导的口号那要求是 三端统一 （三端统一实际上根本就是大笑话），针对这种情况，就要用到Android与H5互相调用了。关于Android和H5的互相调用，网上的资料已经很多了，下面就直接上代码：
//H5与Android互相调用
public class H5CallAndroid {
//可以将这个类 直接写在Activity或者自定义的Webview中
//也可以通过构造传入Context
Context context;
public H5CallAndroid(Context context) {
this.context = context;
}
@JavascriptInterface
public void callPhone(String phoneNumber) {
//step-1：检查危险权限 这里不给出代码
// checkPermissions( )
//step-1：调用系统的打电话
if (phoneNumber !=null && !TextUtils.isEmpty(phoneNumber)){
Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse(phoneNumber));
context.startActivity(intent);
}else {
//自己做处理
}
}
}
接着，在Webview中增加这个对象的引入，让该对象支持和H5互相调用
Webview.addJavascriptInterface(new H5CallAndroid( ),"android");
那么，H5的代码（伪代码）如下：
function callAndroidPhone(phoneNumber) {
//调用Android原生的方法
var result = window.android.callPhone(phoneNumber);
}
以上两种方式都可以实现打电话的功能！
如果这篇文章对您有开发or学习上的些许帮助，希望各位看官留下宝贵的star，谢谢。
Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权，非商业转载请注明出处(开头或结尾请添加转载出处，添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果