Ahdroid 混合开发 接入H5界面以及webView控件详解

android 混合开发接入Html5界面以及webView控件详解

1. 简述：

在安卓中，利用webView控件来展示渲染网页界面的，先来认识一下webView控件。

2.webView 控件介绍：

webView 是一个基于webkit引擎，展示web界面的控件。

webView控件的常用方法：

webView.onResume()//激活WebView为活跃状态，能正常执行网页的响应 ；

webView.onPause()；//当页面被失去焦点被切换到后台不可见状态，需要执行onPause

//通过onPause动作通知内核暂停所有的动作，比如DOM的解析、plugin的执行、JavaScript执行。

webView.pauseTimers()//当应用程序(存在webview)被切换到后台时，这个方法不仅仅针对当前的webview而是全局的全应用程序的webview//它会暂停所有webview的layout，parsing，javascripttimer。降低CPU功耗。

webView.resumeTimers()；//恢复pauseTimers状态

rootLayout.removeView(webView); 

webView.destroy();//销毁Webview//在关闭了Activity时，如果Webview的音乐或视频，还在播放。就必须销毁Webview//但是注意：webview调用destory时,webview仍绑定在Activity上//这是由于自定义webview构建时传入了该Activity的context对象//因此需要先从父容器中移除webview,然后再销毁webview:

Webview.canGoBack()//是否可以后退

Webview.goBack()//后退网页

Webview.canGoForward()//是否可以前进  

Webview.goForward()//前进网页

Webview.goBackOrForward(intsteps)//以当前的index为起点前进或者后退到历史记录中指定的steps

//如果steps为负数则为后退，正数则为前进

图示：

webView常见问题：

控制网页回退，而不是app界面回退：

	public boolean onKeyDown(int keyCode, KeyEvent event) {
   		 if ((keyCode == KEYCODE_BACK) && web.canGoBack()) {
      		  web.goBack();
        	return true;
   	 }
   	 return super.onKeyDown(keyCode, event);
	}

	清除网页缓存数据：

   	//清除网页访问留下的缓存
	//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
        web.clearCache(true);

	//清除当前webview访问的历史记录
	//只会webview访问历史记录里的所有记录除了当前访问记录
        web.clearHistory();

	//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
        web.clearFormData();

3.在项目中接入H5界面

3.1首先是配置联网权限和读写SD卡的权限

3.2在布局文件中添加webView布局

	<WebView
    	   android:id="@+id/wv_include_tuwen"
    	   android:layout_width="match_parent"
    	   android:layout_height="wrap_content"
    	   android:layout_below="@+id/ll_indent_address"
    	   android:background="#00000000">
	</WebView>

3.3声明并初始化webView控件

	private WebView web;

     web= (WebView) findViewById(R.id.wv_include_tuwen);

3.4展示webView界面

	/**
 	* 展示webview界面
 	*/
	private void interaction() {
    	//链接及参数（将链接及参数拼接正确,可以放在网页是测试一下）
    	String url = "http://120.27.118.19:81/home/index.html";

   	WebSettings setting = web.getSettings();

   	setting.setJavaScriptEnabled(true);

	settings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
	//支持屏幕缩放
	settings.setSupportZoom(true);
	settings.setBuiltInZoomControls(true);
	//不显示webview缩放按钮
	settings.setDisplayZoomControls(false);

web.loadUrl(url);

    	web.setWebChromeClient(new WebChromeClient());

    	web.setWebViewClient(new WebViewClient() {
       		@Override
        	public boolean shouldOverrideUrlLoading(WebView view, String url) {
            	view.loadUrl(url);
           	 return true;
        	}
    	});

	}

至此，H5界面就可以在你的app中显示出来了。