对于android初学者应该都了解webView这个组件。之前我也是对其进行了一些简单的了解，但是在一个项目中不得不用webview的时候，发现了webview的强大之处，今天就分享一下使用webview的一些经验。

1、首先了解一下webview。

webview介绍的原文如下：A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

从上面你应该了解到了基本功能，也就是显示网页。之所以我说webview功能强大是因为它和js的交互非常方便，很简单就可以实现。

2、webview能做什么？

①webView可以利用html做界面布局，虽然目前还比较少人这么使用，不过我相信当一些客户端需要复杂的图文（图文都是动态生成）混排的时候它肯定是个不错的选择。

②直接显示网页，这功能当然也是它最基本的功能。

③和js交互。（如果你的js基础比java基础好的话那么采用这种方式做一些复杂的处理是个不错的选择）。

3、如何使用webview？

这里直接用一个svn上取下的demo，先上demo后讲解。demo的结构图如下：

WebViewDemo.java

package com.google.android.webviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

/**
 * Demonstrates how to embed a WebView in your activity. Also demonstrates how
 * to have javascript in the WebView call into the activity, and how the activity
 * can invoke javascript.
 * <p>
 * In this example, clicking on the android in the WebView will result in a call into
 * the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code
 * will turn around and invoke javascript using the {@link WebView#loadUrl(String)}
 * method.
 * <p>
 * Obviously all of this could have been accomplished without calling into the activity
 * and then back into javascript, but this code is intended to show how to set up the
 * code paths for this sort of communication.
 *
 */
public class WebViewDemo extends Activity {

    private static final String LOG_TAG = "WebViewDemo";

    private WebView mWebView;

    private Handler mHandler = new Handler();

    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
        mWebView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(false);

        mWebView.setWebChromeClient(new MyWebChromeClient());

        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

        mWebView.loadUrl("file:///android_asset/demo.html");
    }

    final class DemoJavaScriptInterface {

        DemoJavaScriptInterface() {
        }

        /**
         * This is not called on the UI thread. Post a runnable to invoke
         * loadUrl on the UI thread.
         */
        public void clickOnAndroid() {
            mHandler.post(new Runnable() {
                public void run() {
                    mWebView.loadUrl("javascript:wave()");
                }
            });

        }
    }

    /**
     * Provides a hook for calling "alert" from javascript. Useful for
     * debugging your javascript.
     */
    final class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            Log.d(LOG_TAG, message);
            result.confirm();
            return true;
        }
    }
}

demo.html

<html>
    <script language="javascript">
        /* This function is invoked by the activity */
        function wave() {
            alert(");
            document.getElementById("droid").src="android_waving.png";
            alert(");
        }
    </script>
    <body>
        <!-- Calls into the javascript interface for the activity -->
        <a onClick="window.demo.clickOnAndroid()"><div style="width:80px;
            margin:0px auto;
            padding:10px;
            text-align:center;
            border:2px solid #202020;" >
                <img id="droid" src="android_normal.png"/><br>
                Click me!
        </div></a>
    </body>
</html>

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/intro"
        android:padding="4dip"
        android:textSize="16sp"
        />

    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        />

</LinearLayout>

4、如何交互？

①android如何调用js。

调用 形式：

mWebView.loadUrl("javascript:wave()");

其中wave（）是js中的一个方法，当然你可以把这个方法改成其他的方法，也就是android调用其他的方法。

②js如何调用android。

调用形式：

<a onClick="window.demo.clickOnAndroid()">

代码中的“demo”是在android中指定的调用名称，即

 mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

代码中的clickOnAndroid()是“demo”对应的对象：new DemoJavaScriptInterface() 中的一个方法。

③双向交互。

当然是把前面的两种方式组合一下就可以了。

5、讲解demo。

现在你一定了解了android和js的交互了。是时候分析一些demo了，根据上面讲的你也应该比较清楚了。具体交互流程如下：

①点击图片，则在js端直接调用android上的方法clickOnAndroid()；

②clickOnAndroid()方法（利用线程）调用js的方法。

③被②调用的js直接控制html。

个人总结：利用webView的这种方式在有些时候UI布局就可以转成相应的html代码编写了，而html布局样式之类有DW这样强大的工具，而且网上很多源码，很多代码片。在UI和视觉效果上就会节省很多时间，重复发明轮子没有任何意义。

webview与js交互的更多相关文章

  1. webview与js交互（转）

    原文:http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html 对于android初学者应该都了解webView这个组件.之前我也是 ...

  2. webView和js交互

    与 js 交互 OC 调用 JS // 执行 js - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *title = [web ...

  3. iOS webView与js交互在文本空格上输入文字

    项目要求:webview加载html网址,内容为填空题型文本,需要在横线上添加答案,并点击提交按钮后再将答案进行回显 正常加载的效果图片: 这个是用js交互后的效果图: 点击空格,输入想输入的答案,如 ...

  4. [android] WebView与Js交互

    获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置j ...

  5. Android Webview 与JS交互

    Android中 WebView控件支持JS与本地代码的交互. // 是否允许在webview中执行javascript webSettings.setJavaScriptEnabled(true); ...

  6. Android中使用WebView与JS交互全解析

    1.概述首先,需要提出一个概念,那就是hybrid,主要意思就是native原生Android和h5混合开发.为什么要这样做呢?大家可以想象一下针对于同一个活动,如果使用纯native的开发方式,An ...

  7. Android原生webview中js交互

    http://www.cnblogs.com/android-blogs/p/4891264.html Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中, ...

  8. swift-初探webView与JS交互

    公司接下来的项目需要用swift内嵌h5来实现, 以前没有做过swift项目, 现在慢慢将所学的一点一滴记录一下 一个是怕自己忘了- =, 再就是希望大家看到能帮助我哈哈哈 前几天想要直接用swift ...

  9. 【Android开发】Webview 和 JS 交互问题

    一,安卓原生调用JS代码 1,js代码: function handlePasteDataFromApp(pasteStr) { showInfo('pasteData: aaaaa' + JSON. ...

随机推荐

  1. 手把手教你全家桶之React(一)

    前言 最近项目用到react,其实前年我就开始接触react,时光匆匆,一直没有时间整理下来(太懒啦)!如今再次用到,称工作间隙,对全家桶做一次总结,项目源码地址.废话不多说,上码. 创建一个文件目录 ...

  2. js页面(页面上无服务端控件，且页面不刷新)实现请求一般处理程序下载文件方法

    对于js页面来说,未使用服务端控件,点击下载按钮时不会触发服务端事件,且不会提交数据到服务端页面后台进行数据处理,所以要下载文件比较困难.且使用jQ的post来请求一般处理程序也不能实现文件的下载,根 ...

  3. 浅谈JS变量声明和函数声明提升

    先来两个问题 很多时候,在直觉上,我们都会认为JS代码在执行时都是自上而下一行一行执行的,但是实际上,有一种情况会导致这个假设是错误的. a = 2; var a; console.log(a); 按 ...

  4. Java第5次实验提纲（集合）

    PTA与参考资料 重要参考-集合简述 题集:jmu-Java-05-集合 集合实验文件 第1次实验 1.1 7-1ArrayListIntegerStack(课堂演示) 注1:不要导入java.awt ...

  5. 加解密、PKI与CA基础

    介绍 这门知识如果以前尝过的各位想必都知道:枯燥无比!因此在文中我会尽量讲的生动些,举一些例子,并试图以一个完整的例子来贯穿整个讲述过程.今年又恰逢莎翁逝世400周年,一方面也为了纪念这位伟大的作家. ...

  6. OpenResty 执行阶段的概念和用途

    主要还是 Nginx 的执行阶段知识了,都是因为 OR 才会那么深刻, 它有些自己的阶段. 主要还是参照 春哥的 Nginx 教程 请多读几遍,如果不清楚nginx的执行阶段就无法充分利用 openr ...

  7. React Native（一） FlexBox布局

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/53241550 本文出自:[余志强的博客] 在React Native ...

  8. Activtiy完全解析（二、layout的inflate过程）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/52457893 本文出自:[openXu的博客]   在上一篇文章<Activtiy完全 ...

  9. JVM内存区域划分（JDK6/7/8中的变化）

    前言 Java程序的运行是通过Java虚拟机来实现的.通过类加载器将class字节码文件加载进JVM,然后根据预定的规则执行.Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同 ...

  10. JSP简单隔行变色和日期格式化

    以前好像在找,都没找到简单点的,所以后面就自己写了一个,感觉超级简单又好理解,分享给大家 <%@ page language="java" import="java ...