Webview是Android系统提供的一个内置浏览器对象类,它早期采用WebKit内核,这个内核也是苹果浏览器safari的内核,后来用上了自己在此基础上研发的内核。正是通过这个Android内置的浏览器,Android便可以很方便的展示H5页面:
- loadUrl:加载某个网页
- loadData
- LoadDataWithBase
自定义WebView
既然WebView是基于WebKit的浏览器实现类,因此,如果有需要,开发者也可以自己实现自定义浏览器,来完成功能扩展。或者继承已经开发好的第三方的浏览器,都是可以的。
适合混合开发的场景
- 业务经常变动,页面变化频繁
- App中使用频率很低的页面,比如帮助页面,联系页面等
- 页面中使用到定位,传感器等功能,需要调起原生
二、WebView的使用
Webview作为系统已经实现的浏览器的组件,使用步骤比较简单:
- 对象初始化:实例化WebView,相当于打开浏览器
- 设置属性:WebView设置,相当于设置浏览器;
- 事件监听:添加WebView一些通知事件,比如加载页面开始、加载页面完毕的通知、H5中JS相关事件的一些通知;通常会使用两个:
- WebViewClient:如果用户设置了WebViewClient,则在点击新的链接以后就不会跳转到系统浏览器了,而是在本WebView中显示。WebViewClient主要用来辅助WebView处理各种通知、请求等事件,通过 setWebViewClient 方法设置。
- WebChromeClient:主要用来辅助WebView处理Javascript的对话框、网站图标、网站标题以及网页加载进度等。通过WebView的setWebChromeClient()方法设置。
- 添加交互方法:添加Android与H5交互的方法,包括Android调用H5中的方法,H5中调用Android的方法;
- Android调用JS方法:在Android中调用网页中的方法。
- 页面中JS调用Android原生:在H5页面中调用原生的方法。
- 加载网页:调用loadUrl加载一个网页。
三、WebViewClient设置
设置WebViewClient主要的作用是让webView处理网页加载,如果不设置,在加载网页时,会跳转使用系统浏览器。常用的方法有:
- shouldOverrideUrlLoading:加载网页时,对网页中超链接的拦截。该方法会在加载url之前进行加载。
- shouldInterceptRequest:加载一个网页的同时也会加载 js,css,图片等资源,所以会多次调用 shouldInterceptRequest 方法。
- onPageStarted:开始加载网页
- onPageFinished:网页加载结束
- onReceivedError:加载网页遇到错误
- onReceivedSslError:处理https请求和ssl证书
四、WebChromeClient设置
通过WebView的setWebChromeClient()方法设置WebChromeClient相关内容。
- onProgressChanged:页面加载进度变化回调
- onJsAlert:警告弹窗
- onJsConfirm:确认弹窗
- onJsPrompt:最为灵活,可以接收自定义的。
五、WebSettings配置
WebSettings是WegView的属性设置,包含很多可以设置的属性:
- setJavaScriptEnabled(true):支持js,如果要使用js,必须设置才能用。
- 设置缓存方式:缓存有几种,常见的是:
- LOAD_CACHE_ONLY:不使用网络,只读取本地缓存数据。
- LOAD_DEFAULT:根据cache-control决定是否从网络上取数据。
- LOAD_NO_CACHE:不使用缓存,只从网络获取数据。
- setDatabasePath(cacheDirPath):设置缓存的路径
- setDefaultTextEncodingName:设置默认编码
- setUseWideViewPort:图片调整到适合webview的大小
- setSupportZoom:支持缩放,一般为false
- setLayoutAlgorithm:支持内容重新布局
- supportMultipleWindows:设置支持多窗口
- setLoadWithOverviewMode:设置自动加载图片
- 。。。还有很多
六、原生调用JS
Android调用JS代码的方法有2种,分别是:
- loadUrl:WebView提供的最常用的方法,需要放在另外一个线程中,并且要在页面加载结束以后才能调用。
mWebView.loadUrl("javascript:jsMethod()")
- evaluateJavascript:WebView的另外一个方法,该方法比第一种方法效率更高、使用更简洁。该方法只能在4.4以上才能用。
mWebView.evaluateJavascript("javascript:jsMethod()",new ValueCallback<String>(){})
七、页面JS调用原生
想比起原生调用JS,JS调用原生要多一个步骤,需要进行对象注入:
- 对象注入
- 编写原生方法,使用注解进行标注
- JS使用注入对象
JS对象注入
mSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JSInterface (),"Object");
编写Javascript接口类
public class WebH5Test {
private Context context;
public WebH5Test(Context context) {
this.context = context;
}
@JavascriptInterface
public void message(String s) {
Toast.makeText(context, s, Toast.LENGTH_SHORT).show();
}
}
JS调用原生
JS中调用原生代码:
<input type="button" value="调用原生" onclick="window.Object.message('JS中传来的参数')"/>