混合開發(fā)之打電話那點(diǎn)事兒

最近一個(gè)需求是要求在H5上調(diào)用Android的原生系統(tǒng)來進(jìn)行撥通電話的功能绰精，打電話 相信是應(yīng)用內(nèi)很常見的功能撒璧，簡單點(diǎn)就是一個(gè)Intent直接跳轉(zhuǎn)即可，本文給出2種方案笨使，供大家選擇參考卿樱，（文中會涉及到H5和ios的部分內(nèi)容）

方式一：

H5實(shí)現(xiàn)移動端打電話的功能，最常使用的 href 標(biāo)簽來實(shí)現(xiàn)移動端打電話阱表，代碼如下（就一行）

<a href="tel:13764567708">移動WEB頁面JS一鍵撥打號碼咨詢功能</a>

其中殿如，這里的數(shù)字就是具體的電話號碼贡珊，基于此H5開發(fā)會進(jìn)行方法的封裝調(diào)用（比如，傳入一個(gè)電話號碼等等）涉馁。

說完H5在回歸到Android门岔。眾所周知，Android使用Webview控件來加載H5烤送，由于打電話需要用到權(quán)限寒随，因此：

步驟一：

AndroidManifest.xml 清單配置文件，配置權(quán)限：

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

前2個(gè)權(quán)限帮坚，第一個(gè)是讀取聯(lián)系人妻往，第二個(gè)是打電話的權(quán)限，前2個(gè)權(quán)限是危險(xiǎn)權(quán)限试和，因此要做 運(yùn)行時(shí)權(quán)限 的方案讯泣，運(yùn)行時(shí)權(quán)限的第三方庫已經(jīng)很多了，比較出名的有 RxPermissions阅悍、EasyPermissions等等好渠，根據(jù)自己需求去集成即可，這是實(shí)現(xiàn)打電話的第一步

步驟二：

由于方法一节视，H5的兄弟使用了href 標(biāo)簽拳锚，簡單點(diǎn)理解，href 屬性用于指定超鏈接目標(biāo)的 URL寻行，你可能會問霍掺，什么叫超鏈接？簡單理解拌蜘，超鏈接 在Android中就是在界面內(nèi)點(diǎn)擊某個(gè)控件進(jìn)入到另外一個(gè)界面（類似于跳轉(zhuǎn)）杆烁。

在Webview中，WebViewClient有個(gè)方法重載拦坠，叫shouldOverrideUrlLoading( WebView view, String url )连躏，這個(gè)方法主要是用來，在網(wǎng)頁上進(jìn)行超鏈接的時(shí)候進(jìn)行記錄贞滨，這里的形參url代表的就是界面跳轉(zhuǎn)具體的url入热，

因此，針對這種標(biāo)簽晓铆，實(shí)現(xiàn)打電話的代碼如下：

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            //對應(yīng)上面的href tel:標(biāo)簽勺良，代碼如下
            if (url.startsWith("tel:")){
                Uri parse = Uri.parse(url);
                String s = parse.toString();
              //構(gòu)建Intent
                Intent intent = new Intent(Intent.ACTION_VIEW,
                        Uri.parse(url));
              // 進(jìn)行跳轉(zhuǎn)
                view.getContext().startActivity(intent);
                return true;
            }else {
              //不滿足打電話的條件，直接加載url
                view.loadUrl(url);
                Log.i("info", "shouldOverrideUrlLoading: url : "+url);
                return true;
            }

構(gòu)建完自定義的WebChromeClient骄噪，接著尚困，調(diào)用 setWebChromeClient(chromeClient);即可完成打電話的功能

總結(jié)：方式一使用的是對超鏈接進(jìn)行攔截判斷的方法，符合打電話的條件則進(jìn)行跳轉(zhuǎn)链蕊，不符合條件的則直接加載url事甜，那么谬泌，接下來介紹的方式二略有不同

方式二：

在ios加載url上，出現(xiàn)一個(gè)奇怪的現(xiàn)象逻谦，同樣的超鏈接掌实，在ios那邊，居然要進(jìn)行這樣的判斷(下面是偽代碼：按照Android的邏輯來表達(dá)ios的邏輯)：

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            //注意：ios這里有 // 兩個(gè)斜杠邦马，但是寫在Android中是不行的
            if (url.startsWith("tel://")){
          
              //ios的邏輯...
                return true;
            }else {
                view.loadUrl(url);
                Log.i("info", "shouldOverrideUrlLoading: url : "+url);
                return true;
            }

因?yàn)楹笈_的超鏈接給的是

 tel:13333333222

Android如果按照ios的寫法贱鼻，那就有問題了（具體原因也不是很清楚，畢竟該現(xiàn)象是ios朋友口述的）滋将。好了邻悬，你可能會說，ios跟Android寫不一樣的代碼即可呀随闽，怎么實(shí)現(xiàn)我不管父丰，效果出來就行。但橱脸、在一些有技術(shù)強(qiáng)迫癥的公司础米，領(lǐng)導(dǎo)的口號那要求是 三端統(tǒng)一 （三端統(tǒng)一實(shí)際上根本就是大笑話），針對這種情況添诉，就要用到Android與H5互相調(diào)用了。關(guān)于Android和H5的互相調(diào)用医寿，網(wǎng)上的資料已經(jīng)很多了栏赴，下面就直接上代碼：

//H5與Android互相調(diào)用
public class H5CallAndroid {

    //可以將這個(gè)類 直接寫在Activity或者自定義的Webview中
    //也可以通過構(gòu)造傳入Context
    Context context;

    public H5CallAndroid(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void callPhone(String phoneNumber) {
        //step-1：檢查危險(xiǎn)權(quán)限 這里不給出代碼
        // checkPermissions( )

        //step-1：調(diào)用系統(tǒng)的打電話
        if (phoneNumber !=null && !TextUtils.isEmpty(phoneNumber)){
            Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse(phoneNumber));
            context.startActivity(intent);
        }else {
            //自己做處理
        }

    }

}

接著，在Webview中增加這個(gè)對象的引入靖秩，讓該對象支持和H5互相調(diào)用

    Webview.addJavascriptInterface(new H5CallAndroid( ),"android");

那么须眷，H5的代碼（偽代碼）如下：

function callAndroidPhone(phoneNumber) {
//調(diào)用Android原生的方法
      var result = window.android.callPhone(phoneNumber);
     
}

以上兩種方式都可以實(shí)現(xiàn)打電話的功能！

如果這篇文章對您有開發(fā)or學(xué)習(xí)上的些許幫助沟突，希望各位看官留下寶貴的star花颗，謝謝。

Ps:著作權(quán)歸作者所有,轉(zhuǎn)載請注明作者, 商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)惠拭，非商業(yè)轉(zhuǎn)載請注明出處(開頭或結(jié)尾請?zhí)砑愚D(zhuǎn)載出處扩劝，添加原文url地址),文章請勿濫用,也希望大家尊重筆者的勞動成果