App混合开发之WebView进行H5页面基本操作

现在淘宝、京东、聚划算、甚至于一些银行的App都是利用原生加H5混合开发技术进行开发的，混合开发越来越成为App开发主流技术。WebView是android内嵌的Web页面访问组件，通过它可以轻松实现原生App代码和H5页面的交互操作，还可以和Js相互调用，是混合开发（Hyprid App）常用的技术。Android的WebView在4.4后使用chrome内核，之前采用了不同的Webkit版本内核。（代码下载可进群交流：161154103）

一、用WebView加载网页：

在进行代码之前需要给应用程序设置网络访问权限并把控件引入对应的容器：

权限：

<uses-permission android:name="android.permission.INTERNET"/>

在容器内引入WebView控件：

<WebView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/webView"

/>

页面加载具体的代码：

webView=(WebView)view.findViewById(R.id.webView);

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true);//设置支持javascript

//打开的具体地址，可以是百度、新浪等，这是加载的案秀云提供的文章

webView.loadUrl("https://www.anxiuyun.com/web/article/1cc914c54fb14cf99088da65a54f7a7e";);

webView.setWebViewClient(new WebViewClient(){

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;//返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器

}

});

打开的页面如下：

其中loadurl函数有多种用法：

1、可以加载一个Web页面如： webView.loadUrl("https://www.anxiuyun.com/web/article/1cc914c54fb14cf99088da65a54f7a7e"); 

2、加载打包程序中的html页面，html保存在asset目录下， webView.loadUrl("file:///android_asset/anxiuyun.html"); 

3、加载手机本地的html页面 webView.loadUrl("content://com.android.htmlfileprovider/sdcard/anxiuyun.html"); 

4、加载 HTML 页面的一小段内容 WebView.loadData(String data, String mimeType, String encoding) // 参数说明：参数1：需要截取展示的内容 // 内容里不能出现 ’#’, ‘%’, ‘’ , ‘?’ 这四个字符，若出现了需用 %23, %25, %27, %3f 对应来替代，否则会出现异常 // 参数2：展示内容的类型 // 参数3：字节码

设置支持JS代码：

webSettings.setJavaScriptEnabled(true);//设置支持javascript，如果不设置页面中一些通过js动态调用数据就显示不出来

设置用WebView打开页面还是调用系统浏览器或第三方浏览器打开页面：

webView.setWebViewClient（）//默认情况下WebView是调用系统默认的浏览器或者第三方浏览器打开页面，通过webView.setWebViewClient(new WebViewClient(){...重写后，页面是在WebView中打开的。

二、判断页面加载过程

webView.setWebChromeClient(new WebChromeClient() {

@Override

public void onProgressChanged(WebView view, int newProgress) {

if (newProgress == 100) {

// 网页加载完成

} else {

// 加载中

}

}

});

三、页面前进/后退操作

//判断是否可以后退

webView.canGoBack()

//后退网页

webView.goBack()

//判断是否可以前进

webView.canGoForward()

//前进网页

webView.goForward()

//以当前的index为起始点前进或者后退到历史记录中指定的steps

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

webView.goBackOrForward(intsteps)

四、Back键控制网页后退

在App中如果不做任何代码处理，在点击系统的“Back”键时,整个 Browser 会调用 finish()而结束自身，而我们实质想进行页面后退操作，为避免这情况具体代码：

在当前Activity中监听按键事件，并消费掉系统默认的 Back 事件

public boolean onKeyDown(int keyCode, KeyEvent event) {

if ((keyCode == KEYCODE_BACK) && webView.canGoBack()) {

webView.goBack();

return true;

}

return super.onKeyDown(keyCode, event);

}

五、WebSettings子类其它的一些用法

//获得WebSettings子类 WebSettings webSettings = webView.getSettings(); 

//缩放操作

webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。 webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放 webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件

webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 webSettings.setAllowFileAccess(true); //设置可以访问文件 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片 webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

//设置自适应屏幕，两者合用

webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小

webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小