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

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

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

Weex系列(1) —— Hello World項(xiàng)目

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

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

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

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

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

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

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

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

還是言歸正傳吧，webview是一個(gè)基于webkit引擎、展現(xiàn)web頁面的控件，app里面是經(jīng)常用到的，weex官方提供了web組件。

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

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

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

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

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

        // 設(shè)置與Js交互的權(quán)限
        settings.setJavaScriptEnabled(true);
        // 設(shè)置允許JS彈窗
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        //設(shè)置字體大小
        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、還有一個(gè)點(diǎn)是webview里面音視頻播放，退出頁面，還會(huì)有聲音等，可以在原生.java的onPause方法里面做處理，我記得這個(gè)沒處理的時(shí)候有的安卓應(yīng)用商店都是審核不過的。

@Override
    public void onPause() {
        super.onPause();
        if(WXWebView.mWebView != null){
            WXWebView.mWebView.pauseTimers();
            //這里只對頁面中只有一個(gè)音頻的情況做了處理，如果有多個(gè)音頻需要遍歷整個(gè)數(shù)組記錄狀態(tài)
            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();
        }
        
    }

最后本來是打算想把a(bǔ)pp的寬高適配等問題放在css那個(gè)小結(jié)的，但是現(xiàn)在歸類在了踩坑里面，就把這個(gè)放在這兒講吧。
1、iOS我是在viewDidLayoutSubviews里面重新繪制了一下，在適配iPhoneX、XR、XMAX的時(shí)候會(huì)用到，安卓倒是沒有怎么處理。

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

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

最后這個(gè)系列就剩下兩章了，下一篇也會(huì)盡快發(fā)布出來，感謝大家，如果喜歡歡迎收藏點(diǎn)贊啊~