[关闭]
@coder-pig 2015-09-12T03:16:12.000000Z 字数 9646 阅读 1248

Android基础入门教程——7.5.2 WebView和JavaScrip交互基础

Android基础入门教程


本节引言:

在上一节中我们对Android的WebView(网页视图)进行了学习,相信已经了解了WebView的基本用法;
而本节我们要学习的就是通过:HTML -> JS ->Java来完成HTML5端与Android手机间的
互访!好的,话不多说,有吗有真相,让我们通过编写代码来体验这种微妙的联系吧~
PS:为了方便,本节用到的HTML都是以文件的形式放到assets目录下,只需通过
loadUrl("file:///android_asset/~")即可加载对应的HTML~


1.核心步骤讲解:

首先,我们定义一个类,用于将数据暴露出来,JS通过该类暴露的方法(Public)来调用Android!
接着,我们在WebView所在页面Activity,使用下述代码:
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(object,"name");
然后js或者html中调用name.xxx调用对象里的暴露的方法:
比如: < input type="button" value="Toast提示" onclick="name.showToast('呵呵');"/>
另外,setJavaScriptEnabled是在Android 4.4以前的系统才有效!!!下一节我们会来讲解Android 4.4后
WebKit的变化以及要注意的地方!


2.使用示例讲解:

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

运行效果图

代码实现

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

demo1.html:

  1. <html>
  2. <head>
  3. <title>Js调用Android</title>
  4. </head>
  5. <body>
  6. <input type="button" value="Toast提示" onclick="myObj.showToast('曹神前来日狗~');"/>
  7. <input type="button" value="列表对话框" onclick="myObj.showDialog();"/>
  8. </body>
  9. </html>

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

MyObject.java:

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

最后是MainActivity.java,启用JavaScript支持,然后通过addJavascriptInterface暴露对象~

  1. public class MainActivity extends AppCompatActivity {
  2. private WebView wView;
  3. @Override
  4. protected void onCreate(Bundle savedInstanceState) {
  5. super.onCreate(savedInstanceState);
  6. setContentView(R.layout.activity_main);
  7. wView = (WebView) findViewById(R.id.wView);
  8. wView.loadUrl("file:///android_asset/demo1.html");
  9. WebSettings webSettings = wView.getSettings();
  10. //①设置WebView允许调用js
  11. webSettings.setJavaScriptEnabled(true);
  12. webSettings.setDefaultTextEncodingName("UTF-8");
  13. //②将object对象暴露给Js,调用addjavascriptInterface
  14. wView.addJavascriptInterface(new MyObject(MainActivity.this), "myObj");
  15. }
  16. }

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

运行效果图

实现代码

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

  1. <html>
  2. <head>
  3. <meta http-equiv = "Content-Type" content="text/html;charset=UTF-8"
  4. <title>测试Js的三种不同对话框</title>
  5. <script language="JavaScript">
  6. function alertFun()
  7. {
  8. alert("Alert警告对话框!");
  9. }
  10. function confirmFun()
  11. {
  12. if(confirm("访问百度?"))
  13. {location.href = "http://www.baidu.com";}
  14. else alert("取消访问!");
  15. }
  16. function promptFun()
  17. {
  18. var word = prompt("Prompt对话框","请输入点什么...:");
  19. if(word)
  20. {
  21. alert("你输入了:"+word)
  22. }else{alert("呵呵,你什么都没写!");}
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <p>三种对话框的使用</p>
  28. <p>Alert对话框</p>
  29. <p>
  30. <input type="submit" name = "Submit1" value="展示1" onclick="alertFun()"/>
  31. </p>
  32. <p>Confirm对话框</p>
  33. <p>
  34. <input type="submit" name = "Submit2" value="展示2" onclick="confirmFun()"/>
  35. </p>
  36. <p>Prompt对话框</p>
  37. <p>
  38. <input type="submit" name = "Submit3" value="展示3" onclick="promptFun()"/>
  39. </p>
  40. </body>
  41. </html>

PS:主布局和prompt布局这里就不贴了!
直接上MainActivity.java:

  1. public class MainActivity extends AppCompatActivity {
  2. private WebView wView;
  3. @Override
  4. protected void onCreate(Bundle savedInstanceState) {
  5. super.onCreate(savedInstanceState);
  6. setContentView(R.layout.activity_main);
  7. wView = (WebView) findViewById(R.id.wView);
  8. //获得WebSetting对象,支持js脚本,可访问文件,支持缩放,以及编码方式
  9. WebSettings webSettings = wView.getSettings();
  10. webSettings.setJavaScriptEnabled(true);
  11. webSettings.setAllowFileAccess(true);
  12. webSettings.setBuiltInZoomControls(true);
  13. webSettings.setDefaultTextEncodingName("UTF-8");
  14. //设置WebChromeClient,处理网页中的各种js事件
  15. wView.setWebChromeClient(new MyWebChromeClient());
  16. wView.loadUrl("file:///android_asset/demo2.html");
  17. }
  18. //这里需要自定义一个类实现WebChromeClient类,并重写三种不同对话框的处理方法
  19. //分别重写onJsAlert,onJsConfirm,onJsPrompt方法
  20. class MyWebChromeClient extends WebChromeClient {
  21. @Override
  22. public boolean onJsAlert(WebView view, String url, String message,
  23. final JsResult result) {
  24. //创建一个Builder来显示网页中的对话框
  25. new Builder(MainActivity.this).setTitle("Alert对话框").setMessage(message)
  26. .setPositiveButton("确定", new OnClickListener() {
  27. @Override
  28. public void onClick(DialogInterface dialog, int which) {
  29. result.confirm();
  30. }
  31. }).setCancelable(false).show();
  32. return true;
  33. }
  34. @Override
  35. public boolean onJsConfirm(WebView view, String url, String message,
  36. final JsResult result) {
  37. new Builder(MainActivity.this).setTitle("Confirm对话框").setMessage(message)
  38. .setPositiveButton("确定", new OnClickListener() {
  39. @Override
  40. public void onClick(DialogInterface dialog, int which) {
  41. result.confirm();
  42. }
  43. })
  44. .setNegativeButton("取消", new DialogInterface.OnClickListener() {
  45. @Override
  46. public void onClick(DialogInterface dialog, int which) {
  47. result.cancel();
  48. }
  49. }).setCancelable(false).show();
  50. return true;
  51. }
  52. @Override
  53. public boolean onJsPrompt(WebView view, String url, String message,
  54. String defaultValue, final JsPromptResult result) {
  55. //①获得一个LayoutInflater对象factory,加载指定布局成相应对象
  56. final LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
  57. final View myview = inflater.inflate(R.layout.prompt_view, null);
  58. //设置TextView对应网页中的提示信息,edit设置来自于网页的默认文字
  59. ((TextView) myview.findViewById(R.id.text)).setText(message);
  60. ((EditText) myview.findViewById(R.id.edit)).setText(defaultValue);
  61. //定义对话框上的确定按钮
  62. new Builder(MainActivity.this).setTitle("Prompt对话框").setView(myview)
  63. .setPositiveButton("确定", new OnClickListener() {
  64. @Override
  65. public void onClick(DialogInterface dialog, int which) {
  66. //单击确定后取得输入的值,传给网页处理
  67. String value = ((EditText) myview.findViewById(R.id.edit)).getText().toString();
  68. result.confirm(value);
  69. }
  70. })
  71. .setNegativeButton("取消", new OnClickListener() {
  72. @Override
  73. public void onClick(DialogInterface dialog, int which) {
  74. result.cancel();
  75. }
  76. }).show();
  77. return true;
  78. }
  79. }
  80. }

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

该代码实现的是通过js读取Android手机中联系列表,然后显示到HTML中
当我们点击某个电话号码时,会直接跳转到拨号页面
实现关键:
利用onload()在网页加载的时候加载相应的js脚本,而js脚本中定义的一个函数是
取出传递过来的对象,获取里面的数据,通过for循环以单元行的形式打印出来!

运行效果图

实现代码:

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

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>显示获取的联系人列表</title>
  5. <script language="JavaScript">
  6. function show(jsondata)
  7. {
  8. //将传递过来的Json转换为对象
  9. var jsonobjs = eval(jsondata);
  10. //获取下面定义的表格
  11. var table = document.getElementById("PersonTable");
  12. //遍历上面创建的Json对象,将每个对象添加为
  13. //表格中的一行,而它的每个属性作为一列
  14. for(var i = 0;i < jsonobjs.length;i++)
  15. {
  16. //添加一行,三个单元格:
  17. var tr = table.insertRow(table.rows.length);
  18. var td1 = tr.insertCell(0);
  19. var td2 = tr.insertCell(1);
  20. td2.align = "center";
  21. var td3 = tr.insertCell(2);
  22. //设置单元格的内容和属性
  23. //其中innerHTML为设置或者获取位于对象起始和结束标签内的HTML
  24. //jsonobjs[i]为对象数组中的第i个对象
  25. td1.innerHTML = jsonobjs[i].id;
  26. td2.innerHTML = jsonobjs[i].name;
  27. //为现实的内容添加超链接,超链接会调用Java代码中的
  28. //call方法并且把内容作为参数传递过去
  29. td3.innerHTML = "<a href = 'javascript:sharp.call(\""+jsonobjs[i].phone + "\")'>"
  30. +jsonobjs[i].phone + "</a>";;
  31. }
  32. }
  33. </script>
  34. </head>
  35. <!-- onload指定该页面被加载时调用的方法,这里调用的是Java代码中的contactlist方法-->
  36. <body style="margin:0px; background-color:#FFFFFF; color:#000000;" onload = "javascript:sharp.contactlist()">
  37. <!--定义一个表格-->
  38. <table border = "0" width = "100%" id = "PersonTable" cellspacing = "0">
  39. <tr>
  40. <td width = "15%">用户id</td>
  41. <td align = "center">姓名</td>
  42. <td width = "15%">号码</td>
  43. </tr>
  44. </table>
  45. </body>
  46. </html>

在写一个业务类Contact.java

  1. /**
  2. * Created by Jay on 2015/9/11 0011.
  3. */
  4. public class Contact {
  5. private String id;
  6. private String name;
  7. private String phone;
  8. public Contact(){}
  9. public String getId() {
  10. return id;
  11. }
  12. public void setId(String id) {
  13. this.id = id;
  14. }
  15. public String getName() {
  16. return name;
  17. }
  18. public void setName(String name) {
  19. this.name = name;
  20. }
  21. public String getPhone() {
  22. return phone;
  23. }
  24. public void setPhone(String phone) {
  25. this.phone = phone;
  26. }
  27. @Override
  28. public String toString() {
  29. return this.id + "~" + this.name + "~" + this.phone;
  30. }
  31. }

最后就到我们的MainActivity.java了:

  1. public class MainActivity extends AppCompatActivity {
  2. private WebView wView;
  3. @SuppressLint("JavascriptInterface")
  4. @Override
  5. protected void onCreate(Bundle savedInstanceState) {
  6. super.onCreate(savedInstanceState);
  7. setContentView(R.layout.activity_main);
  8. //设置WebView的相关设置,依次是:
  9. //支持js,不保存表单,不保存密码,不支持缩放
  10. //同时绑定Java对象
  11. wView = (WebView) findViewById(R.id.wView);
  12. wView.getSettings().setJavaScriptEnabled(true);
  13. wView.getSettings().setSaveFormData(false);
  14. wView.getSettings().setSavePassword(false);
  15. wView.getSettings().setSupportZoom(false);
  16. wView.getSettings().setDefaultTextEncodingName("UTF-8");
  17. wView.addJavascriptInterface(new SharpJS(), "sharp");
  18. wView.loadUrl("file:///android_asset/demo3.html");
  19. }
  20. //自定义一个Js的业务类,传递给JS的对象就是这个,调用时直接javascript:sharp.contactlist()
  21. public class SharpJS {
  22. public void contactlist() {
  23. try {
  24. System.out.println("contactlist()方法执行了!");
  25. String json = buildJson(getContacts());
  26. wView.loadUrl("javascript:show('" + json + "')");
  27. } catch (Exception e) {
  28. System.out.println("设置数据失败" + e);
  29. }
  30. }
  31. public void call(String phone) {
  32. System.out.println("call()方法执行了!");
  33. Intent it = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
  34. startActivity(it);
  35. }
  36. }
  37. //将获取到的联系人集合写入到JsonObject对象中,再添加到JsonArray数组中
  38. public String buildJson(List<Contact> contacts)throws Exception
  39. {
  40. JSONArray array = new JSONArray();
  41. for(Contact contact:contacts)
  42. {
  43. JSONObject jsonObject = new JSONObject();
  44. jsonObject.put("id", contact.getId());
  45. jsonObject.put("name", contact.getName());
  46. jsonObject.put("phone", contact.getPhone());
  47. array.put(jsonObject);
  48. }
  49. return array.toString();
  50. }
  51. //定义一个获取联系人的方法,返回的是List<Contact>的数据
  52. public List<Contact> getContacts()
  53. {
  54. List<Contact> Contacts = new ArrayList<Contact>();
  55. //①查询raw_contacts表获得联系人的id
  56. ContentResolver resolver = getContentResolver();
  57. Uri uri = ContactsContract.CommonDataKinds.Phone.CONTENT_URI;
  58. //查询联系人数据
  59. Cursor cursor = resolver.query(uri, null, null, null, null);
  60. while(cursor.moveToNext())
  61. {
  62. Contact contact = new Contact();
  63. //获取联系人姓名,手机号码
  64. contact.setId(cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts._ID)));
  65. contact.setName(cursor.getString(cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME)));
  66. contact.setPhone(cursor.getString(cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER)));
  67. Contacts.add(contact);
  68. }
  69. cursor.close();
  70. return Contacts;
  71. }
  72. }

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


代码下载:

WebViewDemo4:WebViewDemo4.zip
WebViewDemo5:WebViewDemo5.zip


本节小结:

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

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注