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

時間 2019-12-06

標籤 weex 系列 web 組件 webview 欄目 HTML 简体版

原文原文鏈接

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

Android

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

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) {

二、接着就是安卓的上傳圖片文件，用到了以下的方法，最後用到的是WXWebView.mUploadCallbackAboveL 回傳圖片的apache

// For Android < 3.0
            public void openFileChooser(ValueCallback<Uri> 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<Uri> valueCallback, String acceptType, String capture) {
                //Log.e(TAG, "onShowFileChooser: "+acceptType);
                mUploadMessage = valueCallback;
                openImageChooserActivity();
            }

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

三、還有一個點是webview裏面音視頻播放，退出頁面，還會有聲音等，能夠在原生.java的onPause方法裏面作處理，我記得這個沒處理的時候有的安卓應用商店都是審覈不過的。segmentfault

@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那個小結的，可是如今歸類在了踩坑裏面，就把這個放在這兒講吧。
一、iOS我是在viewDidLayoutSubviews裏面從新繪製了一下，在適配iPhoneX、XR、XMAX的時候會用到，安卓卻是沒有怎麼處理。api

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

二、weex官網config這一章裏面有講到
這個例子，你們也能夠掃碼看一下，主要就是weex.config.env.deviceWidth和weex.config.env.deviceHeight。數組

最後這個系列就剩下兩章了，下一篇也會盡快發佈出來，感謝你們，若是喜歡歡迎收藏點贊啊~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

目錄

iOS

Android

頁面寬高適配