01.前沿說明css
02.如何使用html
03.js調用前端
WebView啓動過程大概分爲如下幾個階段,這裏借鑑美團的一張圖片java
如何引用,該x5的庫已經更新到最新版本,引用最新1.2.0穩定版android
implementation 'cn.yc:WebViewLib:1.2.0'
項目初始化git
X5WebUtils.init(this);
最普通使用,須要本身作手動設置setting相關屬性github
<BridgeWebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbarSize="3dp" />
也可使用X5WebView,已經作了常見的setting屬性設置web
<X5WebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbarSize="3dp" />
若是想有帶進度的,可使用ProgressWebView面試
<可使用ProgressWebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbarSize="3dp" />
如何使用本身的WebViewClient和WebChromeClientjson
//主要是在X5WebViewClient和X5WebChromeClient已經作了不少常見的邏輯處理,若是不知足你使用,能夠以下這樣寫 MyX5WebViewClient webViewClient = new MyX5WebViewClient(webView, this); webView.setWebViewClient(webViewClient); MyX5WebChromeClient webChromeClient = new MyX5WebChromeClient(this); webView.setWebChromeClient(webChromeClient); private class MyX5WebViewClient extends X5WebViewClient { public MyX5WebViewClient(BridgeWebView webView, Context context) { super(webView, context); } //重寫你須要的方法便可 } private class MyX5WebChromeClient extends X5WebChromeClient{ public MyX5WebChromeClient(Activity activity) { super(activity); } //重寫你須要的方法便可 }
針對相似購物的商品詳情頁面的webView
關於web的接口回調,包括常見狀態頁面切換,進度條變化等監聽處理
mWebView.getX5WebChromeClient().setWebListener(interWebListener); private InterWebListener interWebListener = new InterWebListener() { @Override public void hindProgressBar() { pb.setVisibility(View.GONE); } @Override public void showErrorView(@X5WebUtils.ErrorType int type) { //設置自定義異常錯誤頁面 } @Override public void startProgress(int newProgress) { //該方法是是監聽進度條進度變化的邏輯 pb.setProgress(newProgress); } @Override public void showTitle(String title) { //該方法是監聽h5中title } };
關於視頻播放的時候,web的接口回調,主要是視頻相關回調,好比全頻,取消全頻,隱藏和現實webView
x5WebChromeClient = x5WebView.getX5WebChromeClient(); x5WebChromeClient.setVideoWebListener(new VideoWebListener() { @Override public void showVideoFullView() { //視頻全頻播放時監聽 } @Override public void hindVideoFullView() { //隱藏全頻播放,也就是正常播放視頻 } @Override public void showWebView() { //顯示webView } @Override public void hindWebView() { //隱藏webView } });
其餘api說明
//X5WebView中 //設置是否開啓密碼保存功能,不建議開啓,默認已經作了處理,存在盜取密碼的危險 mWebView.setSavePassword(false); //是否開啓軟硬件加速 mWebView.setOpenLayerType(false); //獲取x5WebChromeClient對象 x5WebChromeClient = mWebView.getX5WebChromeClient(); //獲取x5WebViewClient對象 x5WebViewClient = mWebView.getX5WebViewClient();
關於如何使用仿微信加載H5頁面進度條
private WebProgress pb; //顯示進度條 pb.show(); //設置進度條過分顏色 pb.setColor(Color.BLUE,Color.RED); //設置單色進度條 pb.setColor(Color.BLUE); //爲單獨處理WebView進度條 pb.setWebProgress(newProgress); //進度完成後消失 pb.hide();
設置cookie和清除cookie操做
//同步cookie X5WebUtils.syncCookie(this,"url",cookieList); //清除cookie X5WebUtils.removeCookie(this);
優化一下相關的操做
@Override public void onResume() { super.onResume(); if (mWebView != null) { mWebView.getSettings().setJavaScriptEnabled(true); } } @Override protected void onStop() { super.onStop(); if (mWebView != null) { mWebView.getSettings().setJavaScriptEnabled(false); } }
@Override protected void onDestroy() { try { if (webView != null) { webView.stopLoading(); webView.destroy(); webView = null; } } catch (Exception e) { Log.e("X5WebViewActivity", e.getMessage()); } super.onDestroy(); }
對於web加載異常,分爲多種狀態,好比常見的有,沒有網絡;404加載異常;onReceivedError,請求網絡出現error;在加載資源時通知主機應用程序發生SSL錯誤
@Override public void showErrorView(@X5WebUtils.ErrorType int type) { switch (type){ //沒有網絡 case X5WebUtils.ErrorMode.NO_NET: break; //404,網頁沒法打開 case X5WebUtils.ErrorMode.STATE_404: break; //onReceivedError,請求網絡出現error case X5WebUtils.ErrorMode.RECEIVED_ERROR: break; //在加載資源時通知主機應用程序發生SSL錯誤 case X5WebUtils.ErrorMode.SSL_ERROR: break; default: break; } }
java調用js的流程圖
js調用Android的流程圖
代碼以下所示,下面updateAttentionStatus表明js這邊的方法名稱
mWebView.callHandler("updateAttentionStatus", attention, new CallBackFunction() { @Override public void onCallBack(String data) { } });
代碼以下所示,下面中的toPhone表明的是Android這邊提供給js的方法名稱
mWebView.registerHandler("toPhone", new BridgeHandler() { @Override public void handler(String data, CallBackFunction function) { try { JSONObject jsonData = new JSONObject(data); String phone = jsonData.optString("phone"); //todo 打電話 } catch (JSONException e) { e.printStackTrace(); } } });
如何回調數據給web那邊
//注意,這裏回傳數據目前只是支持String字符串類型 function.onCallBack("回調數據");
onPageFinished()或者onPageStarted()方法中注入js代碼
WebViewClient.onProgressChanged()方法中注入js代碼
WebViewClient.onProgressChanged()這個方法在dom樹渲染的過程當中會回調屢次,每次都會告訴咱們當前加載的進度。
那麼有人會問,加載到多少才須要處理js注入邏輯呢?
感謝開源庫
參考博客