webview使用心得

</pre> 随着html5的成熟，市场上的一些应用直接使用webview+html+js代替了一些传统应用，可能或许还有些不成熟，交互不如本地应用友好。所以，现在我们需要一些关于本地app操作js等一些操作。这就要求我们对android中WebView有一定的了解。以下，是在工作中或者各大牛人blog中常用的一些webview的属性或方法。若哪里解释不对，还请大家帮我指出。<p></p><p><span style="font-family:Microsoft YaHei"><span style="white-space:pre"></span></span></p><pre name="code" class="java"><span style="white-space:pre">	</span>mWebView.getSettings().setJavaScriptEnabled(true);//支持与js交互
        mWebView.getSettings().setSupportZoom(true);//支持缩放
        mWebView.getSettings().setBuiltInZoomControls(false);//不显示缩放工具
        mWebView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);//尽可能使所有的宽度不超过屏幕宽度
        mWebView.getSettings().setDefaultFontSize(18);//设置字体

LayoutAlgorithm是一个枚举，用来控制html的布局，总共有三种类型：
NORMAL：正常显示，没有渲染变化。
SINGLE_COLUMN：把所有内容放到WebView组件等宽的一列中。
NARROW_COLUMNS：可能的话，使所有列的宽度不超过屏幕宽度。

String body ="示例：这里有个img标签，地址是相对路径<img src='/uploads/allimg/130923/1FP02V7-0.png' />";

mWebView.loadDataWithBaseURL("http://www.jcodecraeer.com", body, "text/html", "utf-8",null);
加载html时，可以使用loadData，loadDataWithBaseURL，loadUrl。那么这三个方法有什么区别呢？

loadUrl：直接显示网络上的资源比如：http:www.baidu.com/xxx.png 一个图片。这时候，可以使用该方法。

loadData：方法中有三个参数 ，string data ，string type ，string encoding 分别指定加载的数据，指定类型，以及编码。但是，很重一点是data的传入的数据中，不能存在

英文字符：'#', '%', '\' , '?' 这四个字符，如果有的话可以用 %23, %25, %27, %3f。如果遇遇到乱码问题，得使用encoding设置为utf-8 一定要一致。

loadDataWithBaseURL：它比loadData方法多了两个参数，其他的一样。分别是 baseUrl 和 historyUrl ，值得注意的是，这里的baseUrl 是一个相对根路径 ，例如 上面的黑体字 代码 ，当执行loadDataWithBaseURL时，它会将http://www.jcodecraeer.com和/uploads/allimg/130923/1FP02V7-0.png拼接起来 相当于 loadUrl（“http://www.jcodecraeer.com/uploads/allimg/130923/1FP02V7-0.png”）；的效果history 根据文档上介绍说，history必须是个页面，并且他必须存在sd卡中或者工程assets中的html 。但是loadDataWithBaseURL方法不会记录储存历史记录，因此需要我们自己去记录访问过的历史页面 ，具体实现可以向一些有经验的前辈请教。

以上就是webview一些常用的东西。

提供一个加载本地html方法

    private void loadLocalHtml(){
        String data = "";
        try {
            // 读取assets目录下的文件需要用到AssetManager对象的Open方法打开文件
            InputStream is = getAssets().open("html/test2.html");
            // loadData()方法需要的是一个字符串数据所以我们需要把文件转成字符串
            ByteArrayBuffer baf = new ByteArrayBuffer(500);
            int count = 0;
            while ((count = is.read()) != -1) {
                baf.append(count);
            }
            data = EncodingUtils.getString(baf.toByteArray(), "utf-8");
        } catch (IOException e) {
            e.printStackTrace();
        }
// 下面两种方法都可以加载成功
        mWebView.loadData(data, "text/html", "utf-8");
// wv.loadDataWithBaseURL("", data, "text/html", "utf-8", "");
    }

下面是关于webview中操作js一些知识：

先上代码再说注意事项。

public class JavaScriptInterfaceDemoActivity extends Activity {

    private WebView Wv;
    private TextView myTextView;
    final Handler myHandler = new Handler();

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_java_script_interface_demo);
        Wv = (WebView)findViewById(R.id.webview1);
        myTextView = (TextView)findViewById(R.id.textview1);
        final JavaScriptInterface myJavaScriptInterface
                = new JavaScriptInterface(this);

        Wv.getSettings().setLightTouchEnabled(true);//使用高亮色代表选中状态 hover
        Wv.getSettings().setJavaScriptEnabled(true);
        Wv.addJavascriptInterface(myJavaScriptInterface, "demo");//
        Wv.loadUrl("file:///android_asset/demo.html");
//        Wv.loadUrl("javascript:wave()");//调用js中的方法
    }

    public class JavaScriptInterface {
        Context mContext;
        JavaScriptInterface(Context c) {
            mContext = c;
        }

        public void showToast(String webMessage){
            final String msgeToast = webMessage;
            myHandler.post(new Runnable() {
                @Override
                public void run() {
                    // This gets executed on the UI thread so it can safely modify Views
                    myTextView.setText(msgeToast);

                    System.out.print("thread:"+Thread.currentThread());
                }
            });
            Toast.makeText(mContext, webMessage, Toast.LENGTH_SHORT).show();
        }
    }
}

值得注意的是,android4.2之后js调用native代码方法, 需要在被调用的方法之前加

@android.webkit.JavascriptInterface

否则回报Uncaught TypeError: Object [object Object] has no method这个错误
布局 很简单 linearlaout 包含一个webview和 textview textview用来显示 html页面获取的数据

demo.html:

<html>
    <script language="javascript">
        /* This function is invoked by the activity */
        function wave() {
            alert("1");
            var text = document.getElementById("text1").value;
            alert(text);
            window.demo.showToast(text);
        }
    </script>
    <body>
        <!-- Calls into the javascript interface for the activity -->
        <a onClick="wave()"><div style="width:80px;
            margin:0px auto;
            padding:10px;
            text-align:center;
            border:2px solid #202020;" >
                <img id="droid" src="android_normal.png"/><br>//点击图片时，将html input值 传给android 展示在textview中
                Click me!
        </div></a>
        <input id="text1" type="text" />
    </body>
</html>

android与js交互时，一定要添加 Wv.getSettings().setJavaScriptEnabled(true);
 Wv.addJavascriptInterface(myJavaScriptInterface, "demo")；

该代码的作用就相当于 java与javascript的一个方法映射，在js中调用java代码 使用：

window.demo.showToast(text);

其中demo 就是我们在java代码中映射的myJavaScriptInterface类 demo.showToast就相当于调用了JavaScriptInterface类中showToast方法。

而java代码调用js代码更简单： Wv.loadUrl("javascript:wave()");即可调用html中js代码。

值得注意的是：

从Android4.2开始。只有添加  @JavascriptInterface 声明的Java方法才可以被JavaScript调用，例如：

1 2 3 4 5 6 7

class JsObject {      @JavascriptInterface      public String toString() { return "injectedObject" ; }   }   webView.addJavascriptInterface( new JsObject(), "injectedObject" );   webView.loadData( "" , "text/html" , null );   webView.loadUrl( "javascript:alert(injectedObject.toString())" );

最后引用伟人 小平爷爷的一句话，时间是检验真理的唯一标准。