webView与js交互——获取通讯录手机号并显示运营商

今天，我整理下webView与js交互的方法。通过点击按钮获取手机通讯录中的号码，并回显出手机号的运营商。

也是，抽上班时间写的博客，废话就不多说了。直接上代码，代码能说明一切，相信有基础的都能看懂。

工程目录：

js_java_interaction.html

type="text" name="phoneNum" id="phoneNum" placeholder="请输入或选择手机号码" style="height:30px;">
type="button" value="选择" οnclick="getPhoneNum()">

id="phoneType" name="phoneType">

activity_main.xml

xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

            android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/id_mwebview"/>

MainActivity.java

package com.csii.wj;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.database.Cursor;
import android.net.Uri;
import android.os.Handler;
import android.os.Message;
import android.provider.ContactsContract;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private  WebView mWebView;
    private String phoneNo;//通讯录电话号码
    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case 0:
                    Intent intent = new Intent(Intent.ACTION_PICK,
                            ContactsContract.Contacts.CONTENT_URI);
                    startActivityForResult(intent, 100);
                    break;
            }
        }
    };

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获得WebView控件
        mWebView = (WebView) findViewById(R.id.id_mwebview);
        //得到WebView控件的设置对象 WebSettings
        WebSettings settings = mWebView.getSettings();
        //可识别js代码
        settings.setJavaScriptEnabled(true);
        //添加js接口
        mWebView.addJavascriptInterface(new JSInteraction(), "control");
        mWebView.setWebChromeClient(new WebChromeClient() {
        });
        mWebView.setWebViewClient(new WebViewClient() {
        });
        mWebView.loadUrl("file:///android_asset/js_java_interaction.html");
    }

    //Interaction:相互作用
    public class JSInteraction {
        @JavascriptInterface
        public void getPhoneNumAndroid() {
            Message msg = Message.obtain();
            msg.what = 0;
            mHandler.sendMessage(msg);
        }
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == 100) {
            if (data != null) {
                Uri contactData = data.getData();
                Cursor c = managedQuery(contactData, null, null, null, null);
                if (c.moveToFirst()) {
                    String name = getContactPhone(c);
                    phoneNo = name;
                }
                //通过java代码嗲用js方法
                mWebView.loadUrl("javascript:retPhoneToJs(\""+phoneNo+"\")");
            }
        }
    }

    // 获取联系人电话
    private String getContactPhone(Cursor cursor) {
        int phoneColumn = cursor
                .getColumnIndex(ContactsContract.Contacts.HAS_PHONE_NUMBER);
        int phoneNum = cursor.getInt(phoneColumn);
        String phoneResult = "";
        if (phoneNum > 0) {
            // 获得联系人的ID号
            int idColumn = cursor.getColumnIndex(ContactsContract.Contacts._ID);
            String contactId = cursor.getString(idColumn);
            // 获得联系人的电话号码的cursor;
            Cursor phones = getContentResolver().query(
                    ContactsContract.CommonDataKinds.Phone.CONTENT_URI,
                    null,
                    ContactsContract.CommonDataKinds.Phone.CONTACT_ID + " = "
                            + contactId, null, null);
            if (phones.moveToFirst()) {
                // 遍历所有的电话号码
                for (; !phones.isAfterLast(); phones.moveToNext()) {
                    int index = phones
                            .getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER);
                    int typeindex = phones
                            .getColumnIndex(ContactsContract.CommonDataKinds.Phone.TYPE);
                    int phone_type = phones.getInt(typeindex);
                    String phoneNumber = phones.getString(index);
                    switch (phone_type) {
                        case 2:
                            phoneResult = phoneNumber;
                            break;
                    }
                }
                if (!phones.isClosed()) {
                    phones.close();
                }
            }
        }
        return phoneResult;
    }
}

最后千万不要忘记在清单文件中加入获取通讯录联系人的权限：

android:name="android.permission.READ_CONTACTS" />

OK，到此为止代码就贴完了。顺利实现了我们想要的效果。