利用HTML5开发Android笔记（中篇）

2023-03-11 16:01:03

资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础

学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇

（上）包括Android设备多分辨率的问题，Android中构建HTML5应用程序基础

（中）包括Android与JS之间的互动，Android处理JS的警告对话框等，Android中的调试

（下）包括本地储存在Android中的应用，地理位置的应用，离线应用的构建

—————————————————————————————— 分割线 ————————————————————————————————————————

进入正题

● Android与JS之间的互相调用交互

WebView默认是禁用JavaScript的，在启用后，就可以在两者间建立接口进行调用

  1. WebView myWebView = (WebView) findViewById(R.id.webview);
  2. WebSettings webSettings = myWebView.getSettings();
  3. webSettings.setJavaScriptEnabled(true);

（这里的webSetting用处非常大 可以开启很多设置 在之后的本地存储，地理位置等之中都会使用到）

1 在JS中调用Android的函数方法

首先 需要在Android程序中建立接口

  1. final class InJavaScript {
  2. public void runOnAndroidJavaScript(final String str) {
  3. handler.post(new Runnable() {
  4. public void run() {
  5. TextView show = (TextView) findViewById(R.id.textview);
  6. show.setText(str);
  7. }
  8. });
  9. }
  10. }
  1. //把本类的一个实例添加到js的全局对象window中，
  2. //这样就可以使用window.injs来调用它的方法
  3. webView.addJavascriptInterface(new InJavaScript(), "injs");

在JavaScript中调用

  1. function sendToAndroid(){
  2. var str = "Cookie call the Android method from js";
  3. window.injs.runOnAndroidJavaScript(str);//调用android的函数
  4. }

2 在Android中调用JS的方法

在JS中的方法：

  1. function getFromAndroid(str){
  2. document.getElementById("android").innerHTML=str;
  3. }

在Android调用该方法

  1. Button button = (Button) findViewById(R.id.button);
  2. button.setOnClickListener(new OnClickListener() {
  3. public void onClick(View arg0) {
  4. //调用javascript中的方法
  5. webView.loadUrl("javascript:getFromAndroid('Cookie call the js function from Android')");
  6. }
  7. });

3 Android中处理JS的警告，对话框等

在Android中处理JS的警告，对话框等需要对WebView设置WebChromeClient对象

  1. //设置WebChromeClient
  2. webView.setWebChromeClient(new WebChromeClient(){
  3. //处理javascript中的alert
  4. public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
  5. //构建一个Builder来显示网页中的对话框
  6. Builder builder = new Builder(MainActivity.this);
  7. builder.setTitle("Alert");
  8. builder.setMessage(message);
  9. builder.setPositiveButton(android.R.string.ok,
  10. new AlertDialog.OnClickListener() {
  11. public void onClick(DialogInterface dialog, int which) {
  12. result.confirm();
  13. }
  14. });
  15. builder.setCancelable(false);
  16. builder.create();
  17. builder.show();
  18. return true;
  19. };
  20. //处理javascript中的confirm
  21. public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
  22. Builder builder = new Builder(MainActivity.this);
  23. builder.setTitle("confirm");
  24. builder.setMessage(message);
  25. builder.setPositiveButton(android.R.string.ok,
  26. new AlertDialog.OnClickListener() {
  27. public void onClick(DialogInterface dialog, int which) {
  28. result.confirm();
  29. }
  30. });
  31. builder.setNegativeButton(android.R.string.cancel,
  32. new DialogInterface.OnClickListener() {
  33. public void onClick(DialogInterface dialog, int which) {
  34. result.cancel();
  35. }
  36. });
  37. builder.setCancelable(false);
  38. builder.create();
  39. builder.show();
  40. return true;
  41. };
  42. @Override
  43. //设置网页加载的进度条
  44. public void onProgressChanged(WebView view, int newProgress) {
  45. MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);
  46. super.onProgressChanged(view, newProgress);
  47. }
  48. //设置应用程序的标题title
  49. public void onReceivedTitle(WebView view, String title) {
  50. MainActivity.this.setTitle(title);
  51. super.onReceivedTitle(view, title);
  52. }
  53. });

● Android中的调试

通过JS代码输出log信息

  1. Js代码： console.log("Hello World");
  2. Log信息： Console: Hello World http://www.example.com/hello.html :82

在WebChromeClient中实现onConsoleMesaage()回调方法，让其在LogCat中打印信息

  1. WebView myWebView = (WebView) findViewById(R.id.webview);
  2. myWebView.setWebChromeClient(new WebChromeClient() {
  3. public void onConsoleMessage(String message, int lineNumber, String sourceID) {
  4. Log.d("MyApplication", message + " -- From line "
  5. + lineNumber + " of "
  6. + sourceID);
  7. }
  8. });

以及

  1. WebView myWebView = (WebView) findViewById(R.id.webview);
  2. myWebView.setWebChromeClient(new WebChromeClient() {
  3. public boolean onConsoleMessage(ConsoleMessage cm) {
  4. Log.d("MyApplication", cm.message() + " -- From line "
  5. + cm.lineNumber() + " of "
  6. + cm.sourceId() );
  7. return true;
  8. }
  9. });

*ConsoleMessage 还包括一个 MessageLevel 表示控制台传递信息类型。 您可以用messageLevel()查询信息级别，以确定信息的严重程度，然后使用适当的Log方法或采取其他适当的措施。

后面的内容在下篇中继续

上一篇：HTML5本地存储之Web Storage实例篇,最有用的是localStorage


下一篇：利用HTML5开发Android