7.5.2 WebView和JavaScrip交互基础

本节引言：

在上一节中我们对Android的WebView(网页视图)进行了学习，相信已经了解了WebView的基本用法；

而本节我们要学习的就是通过：HTML -> JS ->Ja va来完成HTML5端与Android手机间的 互访！好的，话不多说，有吗有真相，让我们通过编写代码来体验这种微妙的联系吧~

PS：为了方便，本节用到的HTML都是以文件的形式放到assets目录下，只需通过 loadUrl("file:///android_asset/~")即可加载对应的HTML~

1.核心步骤讲解：

首先，我们定义一个类，用于将数据暴露出来，JS通过该类暴露的方法(Public)来调用Android！

接着，我们在WebView所在页面Activity，使用下述代码:
webview.getSettings().setJa vaScriptEnabled(true);
webview.addJa vascriptInterface(object,"name");

接下来，在 js 或者 html 里，就可以通过 name.xxx 这种方式，直接调用对象中已经暴露出来的方法。
例如： < input type="button" value="Toast提示" onclick="name.showToast('呵呵');"/>
还有一点很容易被忽略：setJa vaScriptEnabled 这个设置只在 Android 4.4 以前的系统上有效！！！下一节会继续展开，专门讲讲 Android 4.4 之后 WebKit 的变化，以及实际使用时需要留意的地方。

2.使用示例讲解：

1）HTML通过JS显示Toast与普通列表的对话框

运行效果图：

代码实现：

先准备我们的HTML文件，创建好后放到assets目录下：

demo1.html:

自定义一个Object对象，js通过该类暴露的方法来调用Android

MyObject.ja va:

/**
 * Created by Jay on 2015/9/11 0011.
 */
public class MyObject {
    private Context context;
    public MyObject(Context context) {
        this.context = context;
    }
//将显示Toast和对话框的方法暴露给JS脚本调用
    public void showToast(String name) {
        Toast.makeText(context, name, Toast.LENGTH_SHORT).show();
    }
public void showDialog() {
        new AlertDialog.Builder(context)
                .setTitle("联系人列表").setIcon(R.mipmap.ic_lion_icon)
                .setItems(new String[]{"基神", "B神", "曹神", "街神", "翔神"}, null)
                .setPositiveButton("确定", null).create().show();
    }
}

最后是MainActivity.ja va，启用Ja vaScript支持，然后通过addJa vascriptInterface暴露对象~

public class MainActivity extends AppCompatActivity {
    private WebView wView;
@Override
    protected void onCreate(Bundle sa vedInstanceState) {
        super.onCreate(sa vedInstanceState);
        setContentView(R.layout.activity_main);
        wView = (WebView) findViewById(R.id.wView);
        wView.loadUrl("file:///android_asset/demo1.html");
        WebSettings webSettings = wView.getSettings();
        //①设置WebView允许调用js
        webSettings.setJa vaScriptEnabled(true);
        webSettings.setDefaultTextEncodingName("UTF-8");
        //②将object对象暴露给Js,调用addja vascriptInterface
        wView.addJa vascriptInterface(new MyObject(MainActivity.this), "myObj");
    }
}

2）HTML通过JS调用三种不同的对话框

运行效果图：

实现代码：

先往assets目录下塞一个html文件： demo2.html：

    测试Js的三种不同对话框
    


三种对话框的使用
Alert对话框

    

Confirm对话框

    

Prompt对话框

    

PS：主布局和prompt布局这里就不贴了！ 直接上MainActivity.ja va:

public class MainActivity extends AppCompatActivity {
private WebView wView;
@Override
    protected void onCreate(Bundle sa vedInstanceState) {
        super.onCreate(sa vedInstanceState);
        setContentView(R.layout.activity_main);
        wView = (WebView) findViewById(R.id.wView);
//获得WebSetting对象,支持js脚本,可访问文件,支持缩放,以及编码方式
        WebSettings webSettings = wView.getSettings();
        webSettings.setJa vaScriptEnabled(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setDefaultTextEncodingName("UTF-8");
        //设置WebChromeClient,处理网页中的各种js事件
        wView.setWebChromeClient(new MyWebChromeClient());
        wView.loadUrl("file:///android_asset/demo2.html");
    }
//这里需要自定义一个类实现WebChromeClient类,并重写三种不同对话框的处理方法
    //分别重写onJsAlert,onJsConfirm,onJsPrompt方法
    class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message,
                                 final JsResult result) {
            //创建一个Builder来显示网页中的对话框
            new Builder(MainActivity.this).setTitle("Alert对话框").setMessage(message)
                    .setPositiveButton("确定", new OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            result.confirm();
                        }
                    }).setCancelable(false).show();
            return true;
        }
@Override
        public boolean onJsConfirm(WebView view, String url, String message,
                                   final JsResult result) {
            new Builder(MainActivity.this).setTitle("Confirm对话框").setMessage(message)
                    .setPositiveButton("确定", new OnClickListener() {
@Override
                        public void onClick(DialogInterface dialog, int which) {
                            result.confirm();
                        }
                    })
                    .setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
                        public void onClick(DialogInterface dialog, int which) {
                            result.cancel();
                        }
                    }).setCancelable(false).show();
            return true;
        }
@Override
        public boolean onJsPrompt(WebView view, String url, String message,
                                  String defaultValue, final JsPromptResult result) {
            //①获得一个LayoutInflater对象factory,加载指定布局成相应对象
            final LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
            final View myview = inflater.inflate(R.layout.prompt_view, null);
            //设置TextView对应网页中的提示信息,edit设置来自于网页的默认文字
            ((TextView) myview.findViewById(R.id.text)).setText(message);
            ((EditText) myview.findViewById(R.id.edit)).setText(defaultValue);
            //定义对话框上的确定按钮
            new Builder(MainActivity.this).setTitle("Prompt对话框").setView(myview)
                    .setPositiveButton("确定", new OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            //单击确定后取得输入的值,传给网页处理
                            String value = ((EditText) myview.findViewById(R.id.edit)).getText().toString();
                            result.confirm(value);
                        }
                    })
                    .setNegativeButton("取消", new OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            result.cancel();
                        }
                    }).show();
            return true;
        }
}
}

3.HTML通过JS读取Android联系人并显示

这段代码的作用，说白了就是用 js 读取 Android 手机上的联系人列表，再把这些联系人展示到 HTML 页面里。页面上如果点中了某个电话号码，就会直接跳转到拨号界面。它的关键点在于：通过 onload() 在网页加载时把对应的 js 脚本一并加载进来，而脚本里会定义好相关函数，用来取出传递过来的对象，读取其中的数据，然后再通过 for 循环按一行一条的方式逐个输出出来。

运行效果图：

实现代码：

往assets文件夹下编写要给demo3.html文件，内容如下：

    
    
    





    

        
用户id
        
姓名
        
号码
    


  

再写一个业务类Contact.ja va：

/**
 * Created by Jay on 2015/9/11 0011.
 */
public class Contact {
    private String id;
    private String name;
    private String phone;
public Contact(){}
public String getId() {
        return id;
    }
public void setId(String id) {
        this.id = id;
    }
public String getName() {
        return name;
    }
public void setName(String name) {
        this.name = name;
    }
public String getPhone() {
        return phone;
    }
public void setPhone(String phone) {
        this.phone = phone;
    }
@Override
    public String toString() {
        return this.id + "~" + this.name + "~" + this.phone;
    }
}

再写一个业务类Contact.ja va：

public class MainActivity extends AppCompatActivity {
private WebView wView;
@SuppressLint("Ja vascriptInterface")
    @Override
    protected void onCreate(Bundle sa vedInstanceState) {
        super.onCreate(sa vedInstanceState);
        setContentView(R.layout.activity_main);
        //设置WebView的相关设置,依次是:
        //支持js,不保存表单,不保存密码,不支持缩放
        //同时绑定Ja va对象
        wView = (WebView) findViewById(R.id.wView);
        wView.getSettings().setJa vaScriptEnabled(true);
        wView.getSettings().setSa veFormData(false);
        wView.getSettings().setSa vePassword(false);
        wView.getSettings().setSupportZoom(false);
        wView.getSettings().setDefaultTextEncodingName("UTF-8");
        wView.addJa vascriptInterface(new SharpJS(), "sharp");
        wView.loadUrl("file:///android_asset/demo3.html");
    }
//自定义一个Js的业务类,传递给JS的对象就是这个,调用时直接ja vascript:sharp.contactlist()
    public class SharpJS {
        public void contactlist() {
            try {
                System.out.println("contactlist()方法执行了！");
                String json = buildJson(getContacts());
                wView.loadUrl("ja vascript:show('" + json + "')");
            } catch (Exception e) {
                System.out.println("设置数据失败" + e);
            }
        }
public void call(String phone) {
            System.out.println("call()方法执行了！");
            Intent it = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
            startActivity(it);
        }
    }
//将获取到的联系人集合写入到JsonObject对象中,再添加到JsonArray数组中
    public String buildJson(List contacts)throws Exception
    {
        JSONArray array = new JSONArray();
        for(Contact contact:contacts)
        {
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("id", contact.getId());
            jsonObject.put("name", contact.getName());
            jsonObject.put("phone", contact.getPhone());
            array.put(jsonObject);
        }
        return array.toString();
    }
//定义一个获取联系人的方法,返回的是List的数据
    public List getContacts()
    {
        List Contacts = new ArrayList();
        //①查询raw_contacts表获得联系人的id
        ContentResolver resolver = getContentResolver();
        Uri uri = ContactsContract.CommonDataKinds.Phone.CONTENT_URI;
        //查询联系人数据
        Cursor cursor = resolver.query(uri, null, null, null, null);
        while(cursor.moveToNext())
        {
            Contact contact = new Contact();
            //获取联系人姓名,手机号码
            contact.setId(cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts._ID)));
            contact.setName(cursor.getString(cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME)));
            contact.setPhone(cursor.getString(cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER)));
            Contacts.add(contact);
        }
        cursor.close();
        return Contacts;
    }
}

好的，就是那么简单，但是，当你看到效果示意图，我祭出的是我大联想而非N5，就说明了，上述代码 在N5中执行不了，因为在4.4以后addJa vascriptInterface()就不可以用了~至于为什么，我们会在下节课 中对WebView在4.4后的注意事项跟大家说下~

代码下载：

WebViewDemo4：下载 WebViewDemo4.zip

WebViewDemo5：下载 WebViewDemo5.zip

本节小结：

好的，本节我们对WebView和Ja vaScrip交互进行了简单的学习，有点意思是吧~，如果你会 HTML + CSS + JS，那么你可以尝试着自己创建一个HTML5端的移动APP试试~本节就说这么多， 谢谢~