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

2019年8月31日 589次阅读来源: 多罗罗

iOS端的webview坑要少一些，险些没怎样悛改，重要就是html和原生的交互。
1、能够用到URL Schemes来阻拦做一些简朴的跳转处置惩罚
2、着实绕不过，就用到了一个比较复杂的WebViewJavascriptBridge，我用的就是谷歌搜出来第一个，参照例子加在我们本身封装的组件内里了，我这边直接就加在了viewWillAppear要领内里，同理也须要在html内里设置，末了app就可以监听到html内里的点击等交互动作了。

Android

安卓要贫苦很多，网上大多也都是安卓的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<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;
            }

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。

《Weex系列(6) —— web组件和webview》

末了这个系列就剩下两章了，下一篇也会尽快宣布出来，谢谢人人，假如喜好迎接珍藏点赞啊~

    原文作者：多罗罗
    原文地址: https://segmentfault.com/a/1190000018350725
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网

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

目次

iOS

Android

页面宽高适配