摘要：安卓要麻煩許多，網上大多也都是安卓的講解，我也是遇到了好多坑。我是在里面重新繪制了一下，在適配的時候會用到，安卓倒是沒有怎么處理。

Weex系列(序) —— 總要知道原生的一點東東(iOS)

Weex系列(序) —— 總要知道原生的一點東東(Android)

Weex系列(1) —— Hello World項目

Weex系列(2) —— 頁面跳轉和通信

Weex系列(3) —— 單頁面還是多頁面

Weex系列(4) —— 老生常談的三端統一

Weex系列(5) —— 封裝原生組件和模塊

Weex系列(6) —— webview和web組件

Weex系列(7) —— 踩坑填坑的總總

[Weex系列(8) —— 原理流程簡析]

不知不覺就3月1號了，這段時間在想怎么來收尾這個系列，打算把css小結放在踩坑那一章，那一章以后估計也會不定時更新。最后一章就簡單分析一下流程原理。

還是言歸正傳吧，webview是一個基于webkit引擎、展現web頁面的控件，app里面是經常用到的，weex官方提供了web組件。

webview這塊是比較復雜的，所以官方提供的遠遠不夠，但是對原生又不是很熟悉，就找到組件源碼，在此基礎上再進行二次封裝，上一章也是有很詳細的提到的。

進行了二次封裝，我們想添加功能配置什么的就方便很多了。

iOS端的webview坑要少一些，幾乎沒怎么改過，主要就是html和原生的交互。
1、可以用到URL Schemes來攔截做一些簡單的跳轉處理
2、實在繞不過，就用到了一個比較復雜的WebViewJavascriptBridge，我用的就是谷歌搜出來第一個，參照例子加在我們自己封裝的組件里面了，我這邊直接就加在了viewWillAppear方法里面，同理也需要在html里面配置，最后app就能監聽到html里面的點擊等交互動作了。

安卓要麻煩許多，網上大多也都是安卓的webview講解，我也是遇到了好多坑。
我把網上需要配置的基本都加上了，每個設置的說明看方法能猜出一二。
1、然后就是shouldOverrideUrlLoading，頁面跳轉遇到的無限加載、白屏等都需要在這個方法里面做處理，由于這塊涉及業務處理，也就不截出來了，我也是參照網上的方案解決的，需要耐心，多試幾次，會解決的。

private void initWebView(WebView wv) {
        WebSettings settings = wv.getSettings();
        settings.setAppCacheEnabled(true);
        settings.setAllowFileAccess(true);//設置啟用或禁止訪問文件數據
        settings.setDomStorageEnabled(true);
        settings.setLoadsImagesAutomatically(true);
        //適應屏幕
        settings.setUseWideViewPort(true);
        // 設置可以支持縮放
        settings.setSupportZoom(true);
        // 設置出現縮放工具
        settings.setBuiltInZoomControls(true);
        //不顯示webview縮放按鈕
        settings.setDisplayZoomControls(false);
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        settings.setLoadWithOverviewMode(true);

        // 設置與Js交互的權限
        settings.setJavaScriptEnabled(true);
        // 設置允許JS彈窗
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        //設置字體大小
        settings.setTextZoom(100);

        wv.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {

2、接著就是安卓的上傳圖片文件，用到了如下的方法，最后用到的是WXWebView.mUploadCallbackAboveL 回傳圖片的

// For Android < 3.0
            public void openFileChooser(ValueCallback valueCallback) {
                mUploadMessage = valueCallback;
                openImageChooserActivity();
            }

            // For Android  >= 3.0
            public void openFileChooser(ValueCallback valueCallback, String acceptType) {
                mUploadMessage = valueCallback;
                openImageChooserActivity();
            }

            //For Android  >= 4.1
            public void openFileChooser(ValueCallback valueCallback, String acceptType, String capture) {
                //Log.e(TAG, "onShowFileChooser: "+acceptType);
                mUploadMessage = valueCallback;
                openImageChooserActivity();
            }

            // For Android >= 5.0
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
                //Log.e(TAG, "onShowFileChooser: "+fileChooserParams);
                mUploadCallbackAboveL = filePathCallback;
                openImageChooserActivity();
                return true;
            }

3、還有一個點是webview里面音視頻播放，退出頁面，還會有聲音等，可以在原生.java的onPause方法里面做處理，我記得這個沒處理的時候有的安卓應用商店都是審核不過的。

@Override
    public void onPause() {
        super.onPause();
        if(WXWebView.mWebView != null){
            WXWebView.mWebView.pauseTimers();
            //這里只對頁面中只有一個音頻的情況做了處理，如果有多個音頻需要遍歷整個數組記錄狀態
            WXWebView.mWebView.loadUrl(
                    "javascript:audioEty = document.getElementsByTagName("audio")[0]; audioEty.pause();"
            );
            WXWebView.mWebView.loadUrl(
                    "javascript:videoEty = document.getElementsByTagName("video")[0]; videoEty.pause();"
            );

            WXWebView.mWebView.onPause();
        }
        
    }

最后本來是打算想把app的寬高適配等問題放在css那個小結的，但是現在歸類在了踩坑里面，就把這個放在這兒講吧。
1、iOS我是在viewDidLayoutSubviews里面重新繪制了一下，在適配iPhoneX、XR、XMAX的時候會用到，安卓倒是沒有怎么處理。

_instance.frame = CGRectMake(safeArea.left, safeArea.top, self.view.frame.size.width-safeArea.left-safeArea.right, _weexHeight-safeArea.top);

2、weex官網config這一章里面有講到
這個例子，大家也可以掃碼看一下，主要就是weex.config.env.deviceWidth和weex.config.env.deviceHeight。

最后這個系列就剩下兩章了，下一篇也會盡快發布出來，感謝大家，如果喜歡歡迎收藏點贊啊~