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(newJsObject(),"injectedObject");

 webView.loadData("","text/html",null);

 webView.loadUrl("javascript:alert(injectedObject.toString())");

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