混合开发之打电话那点事儿

最近一个需求是要求在H5上调用Android的原生系统来进行拨通电话的功能，打电话 相信是应用内很常见的功能，简单点就是一个Intent直接跳转即可，本文给出2种方案，供大家选择参考，（文中会涉及到H5和ios的部分内容）

方式一：

H5实现移动端打电话的功能，最常使用的 href 标签来实现移动端打电话，代码如下（就一行）

<a href="tel:13764567708">移动WEB页面JS一键拨打号码咨询功能</a>

其中，这里的数字就是具体的电话号码，基于此H5开发会进行方法的封装调用（比如，传入一个电话号码等等）。

说完H5在回归到Android。众所周知，Android使用Webview控件来加载H5，由于打电话需要用到权限，因此：

步骤一：

AndroidManifest.xml 清单配置文件，配置权限：

    <uses-permission android:name="android.permission.READ_CONTACTS"/>
    <uses-permission android:name="android.permission.CALL_PHONE" />
    <uses-permission android:name="android.permission.INTERNET" />

前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地址),文章请勿滥用,也希望大家尊重笔者的劳动成果