提到WebView很多同学可能并不陌生;Mobile端、PC端都有机会碰到这个容器,下面我们先来看看各自的定义:
Mobile 端以Android为例:Android WebView在Android平台上是一个特殊的View, 它内部实现是采用渲染引擎来展示view的内容,提供网页前进后退,网页放大,缩小,搜索等功能。
PC端以JavaFX为例:JavaFX提供了一个GUI WebView(javafx.scene.web.WebView)节点,以将HTML5内容呈现到场景图形上。WebView节点是一个小型浏览器。同样内部实现时采用渲染引擎来展示view的内容。
WebView的基本使用
1. 不论Mobile还是PC,使用WebView时都需先new一个对象,如下:WebView webview = new WebView(this); setContentView(webview); ---Mobile
WebView webview = new WebView(); WebEngine engine = webView.getEngine(); ---PC
2. 紧接着可以加载一个网页,如下: WebView webview.loadUrl("http://developer.android.com/"); ---Mobile
<uses-permission android:name="android.permission.INTERNET"> ----Mobile
engine.setUserAgent("Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"); ---PC
engine.load(defaultURL); ---PC
3. 设置监听,对窗体内部元素进行监控,如下:public class TestFindListener implements android.webkit.WebView.FindListener { }; ---Mobile
public ChangeListener(JSHandler jHandler){}---PC, 小编本地具体实现方法
4. 具体操作( 根据各自需求来写)
WebView给我们带来了什么
首先,WebView可以将原生态App和Application中的某些功能结构抽离出来,以加载HTML5的方式进行集成,于是功能结构可以并行开发,提高了研发效率;
其次,WebView提供了的灵活性,在应用升级时只需部署后台服务器,前端框架无需大改;
然后,WebView加载的H5可以有很完美的css美化,是原生态App和Application比较难做到的;
缺点:加载确实稍慢一筹,因为需要拼接还需要加载样式,这里面有一定时间的消耗
WebView在Android端的应用(源码):
package com.example.webviewdemo;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Message;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class WebViewBase extends WebView {
private static final String DEFAULT_URL = "http://www.ijinshan.com/";
private Activity mActivity;
public WebViewBase(Context context) {
super(context);
mActivity = (Activity) context;
init(context);
}
@SuppressLint("SetJavaScriptEnabled")
private void init(Context context) {
WebSettings webSettings = this.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(true);
//webSettings.setUseWideViewPort(true);
this.setWebViewClient(mWebViewClientBase);
this.setWebChromeClient(mWebChromeClientBase);
this.loadUrl(DEFAULT_URL);
this.onResume();
}
private WebViewClientBase mWebViewClientBase = new WebViewClientBase();
private class WebViewClientBase extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
return super.shouldOverrideUrlLoading(view, url);
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
}
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
// TODO Auto-generated method stub
super.onReceivedError(view, errorCode, description, failingUrl);
}
@Override
public void doUpdateVisitedHistory(WebView view, String url,
boolean isReload) {
// TODO Auto-generated method stub
super.doUpdateVisitedHistory(view, url, isReload);
}
}
private WebChromeClientBase mWebChromeClientBase = new WebChromeClientBase();
private class WebChromeClientBase extends WebChromeClient {
@Override
public void onProgressChanged(WebView view, int newProgress) {
mActivity.setProgress(newProgress * 1000);
}
@Override
public void onReceivedTitle(WebView view, String title) {
// TODO Auto-generated method stub
super.onReceivedTitle(view, title);
}
@Override
public void onReceivedTouchIconUrl(WebView view, String url,
boolean precomposed) {
// TODO Auto-generated method stub
super.onReceivedTouchIconUrl(view, url, precomposed);
}
@Override
public boolean onCreateWindow(WebView view, boolean isDialog,
boolean isUserGesture, Message resultMsg) {
// TODO Auto-generated method stub
return super.onCreateWindow(view, isDialog, isUserGesture, resultMsg);
}
}
}
PC端暂时申请专利中,实现案例以后加载!谢谢交流~!