Android 使用騰訊X5內(nèi)核WebView和原生做交互

騰訊X5內(nèi)核TBS

騰訊瀏覽服務(wù)是致力于優(yōu)化移動端webview體驗的整套解決方案逆趋。該方案由SDK猜欺、手機QQ瀏覽器X5內(nèi)核和X5云端服務(wù)組成谜慌，解決移動端webview使用過程中出現(xiàn)的一切問題摔竿，優(yōu)化用戶的瀏覽體驗旋膳。同時逮矛，騰訊還將持續(xù)提供后續(xù)的更新和優(yōu)化说铃，為開發(fā)者提供最新最優(yōu)秀的功能和服務(wù)佑惠。

1、布局文件 activity_base_web.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/superplayer_content_bg"
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
        <FrameLayout
            android:id="@+id/webViewContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray">
        </FrameLayout>
    </LinearLayout>

</LinearLayout>

在Activity/Fragment中 初始化 WebView

注意導(dǎo)包WebView的相關(guān)依賴都需要導(dǎo)com.tencent.smtt.sdk下面依賴

1萍虽、初始化WebView -> initWebView

/**
     * 自定義初始化WebView設(shè)置厘灼，此處為默認 BaseWebViewActivity 初始化
     * 可通過繼承該 Activity Override 該方法做自己的實現(xiàn)
     */
    protected void initWebView() {
        mWebView = new WebView(mContext);
        mWebView.setVerticalScrollBarEnabled(false);
        //設(shè)置WebView滾動條不顯示
        //水平不顯示
        mWebView.setHorizontalScrollBarEnabled(false);
        ViewGroup mContainer = findViewById(R.id.webViewContainer);
        mContainer.addView(mWebView);
        WebSettings webSetting = mWebView.getSettings();
        webSetting.setJavaScriptEnabled(true);
        webSetting.setAllowFileAccess(true);
        webSetting.setSupportZoom(true);
        webSetting.setDatabaseEnabled(true);
        webSetting.setAllowFileAccess(true);
        webSetting.setDomStorageEnabled(true);
        // 設(shè)置出現(xiàn)縮放工具
        webSetting.setBuiltInZoomControls(false);
        //擴大比例的縮放
        webSetting.setUseWideViewPort(true);
        //自適應(yīng)屏幕
        webSetting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        webSetting.setLoadWithOverviewMode(true);
        initWebViewClient();
        initWebChromeClient();
        initJavaScriptInterface();
        //啟用或禁用豎直滾動條
        initWebViewClientExtension();
    }

2、初始化WebView -> initWebViewClient WebViewClient 在影響View的事件到來時幼苛，會通過WebViewClient中的方法回調(diào)通知用戶

    private void initWebViewClient() {
        mWebView.setWebViewClient(new WebViewClient() {



            /**
             * 具體接口使用細節(jié)請參考文檔：
             * https://x5.tencent.com/docs/webview.html
             * 或 Android WebKit 官方：
             * https://developer.android.com/reference/android/webkit/WebChromeClient
             */


            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                Logger.e("web_url: "  + url);
                if (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("hxclass.cn")) {
                    return;
                }
                if (url.startsWith("intent://") && url.contains("com.youku.phone")) {
                    return;
                }
                if ( url.startsWith("weixin://")
                        ||  url.startsWith("alipays://")
                        ||  url.startsWith("mqqapi://")  ){
                    mWebView.goBack();
                    pay_loading_view.setVisibility(VISIBLE);
                    isWxPay = true;
                    //打開本地App進行支付
                    Intent intent = new Intent();
                    intent.setAction(Intent.ACTION_VIEW);
                    intent.setData(Uri.parse(url));
                    startActivity(intent);
                }
                //微信H5支付核心代碼，此方法亦可以喚起支付
//                if (url.startsWith("weixin://wap/pay?")) {
//                    mWebView.goBack();
//                    isWxPay = true;
//                    Intent intent = new Intent();
//                    intent.setAction(Intent.ACTION_VIEW);
//                    intent.setData(Uri.parse(url));
//                    startActivity(intent);
//                } else {
//                    mWebView.goBack();
//                    isWxPay = true;
//                    Map<String, String> extraHeaders = new HashMap<>();
//                    extraHeaders.put("Referer", "https://alpha.mobile.hxclass.cn");
//                    view.loadUrl(url, extraHeaders);
//                }
                Logger.i("zhoujianxiong onPageStarted, view:" + view + ", url:" + url);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                if (mWebView.getUrl().endsWith("/login")) {
                    String js = "var newscript = document.createElement(\"script\");";
                    js += "newscript.onload=function(){changeLoginType(type);};";  //xxx()代表js中某方法
                    js += "document.body.appendChild(newscript);";
                    view.loadUrl("javascript:" + js);
                }
                networkPlay();
            }

            @Override
            public void onReceivedError(WebView webView, int errorCode, String description, String url) {
                Logger.i("zhoujianxiong onReceivedError: " + errorCode
                        + ", description: " + description
                        + ", url: " + url);
                if (url.startsWith("weixin://") && !api.isWXAppInstalled()) {
                    mWebView.stopLoading();
                    mWebView.goBack();
                    pay_loading_view.setVisibility(GONE);
                    ToastUtils.showShort("請先安裝微信");
                    return;
                }
                if ( url.startsWith("weixin://")
                        ||  url.startsWith("alipays://")
                        ||  url.startsWith("mqqapi://")  ){
                    pay_loading_view.setVisibility(VISIBLE);
                }
            }

            @Override
            public WebResourceResponse shouldInterceptRequest(WebView webView, WebResourceRequest webResourceRequest) {

                return super.shouldInterceptRequest(webView, webResourceRequest);
            }

            //其他回調(diào)接口
            咆霜。。嘶朱。蛾坯。。疏遏。

        });
    }

3脉课、初始化WebView -> initWebChromeClient 當(dāng)影響瀏覽器的事件到來時，就會通過WebChromeClient中的方法回調(diào)通知用法财异。

   /**
     * 初始化webChromeClient
     */
    private void initWebChromeClient() {
        mWebView.setWebChromeClient(new WebChromeClient() {
            /**
             * 具體接口使用細節(jié)請參考文檔：
             * https://x5.tencent.com/docs/webview.html
             * 或 Android WebKit 官方：
             * https://developer.android.com/reference/android/webkit/WebChromeClient
             */
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                Log.i(TAG, "onProgressChanged, newProgress:" + newProgress + ", view:" + view.getUrl());
                String url = view.getUrl();
                canNotGoBack = url.endsWith("/home") || url.endsWith("/selected")
                        || url.endsWith("/study") || url.endsWith("/my");
                if (newProgress == 100 && canNotGoBack) {
                    mClickBackTime = 0;
                    mWebView.clearHistory();
                }
                if (newProgress == 100 && url.contains(".alipay.com")) {
                    findViewById(R.id.top_bar_view).setVisibility(VISIBLE);
                } else if (newProgress == 100){
                    networkPlay();
                    findViewById(R.id.top_bar_view).setVisibility(GONE);
                }
            }

            @Override
            public boolean onJsAlert(WebView webView, String url, String message, JsResult result) {
                return true;
            }

            @Override
            public boolean onJsConfirm(WebView webView, String url, String message, JsResult result) {
                return true;
            }

            @Override
            public boolean onJsBeforeUnload(WebView webView, String url, String message, JsResult result) {
                return true;
            }

            @Override
            public boolean onJsPrompt(WebView webView, String url, String message, String defaultValue, JsPromptResult result) {
                return true;
            }


            /**
             * API >= 21(Android 5.0.1)回調(diào)此方法
             */
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> valueCallback, FileChooserParams fileChooserParams) {
                Log.e("zhoujianxiong_web", "運行方法 onShowFileChooser");
                Log.e("zhoujianxiong_web", "運行方法 onShowFileChooser" + fileChooserParams.toString());
                // (1)該方法回調(diào)時說明版本API >= 21倘零，此時將結(jié)果賦值給 mUploadCallbackAboveL，使之 != null
                String[] acceptTypes = fileChooserParams.getAcceptTypes();
                //通過acceptTypes判斷前端的參數(shù)類型 圖片 戳寸、文件   可以約定
                if (acceptTypes.length > 0 && !acceptTypes[0].equals("")) {
                    isCropPic = false;
                    //調(diào)起原生的拍照和選擇文件功能 isCaptureEnabled
                    //注意 mUploadCallbackAboveL 在 回傳給前端之后 onReceiveValue  需要置空
                    takePhoto(fileChooserParams.isCaptureEnabled());
                    mUploadCallbackAboveL = valueCallback;
                    mUploadCallbackAboveL.onReceiveValue(null);
                    mUploadCallbackAboveL = null;
                } else {
                    //調(diào)起原生的文件選擇器
                    mUploadCallbackAboveL = valueCallback;
                    openFileChooseProcess(false);
                }
                Log.e("zhoujianxiong_web", "運行方法 onShowFileChooser" + Arrays.toString(acceptTypes));
                return true;
            }

            @Override
            public void onGeolocationPermissionsShowPrompt(String origin,
                                                           GeolocationPermissionsCallback geolocationPermissionsCallback) {
            }
        });

    }

4呈驶、初始化WebView -> addJavascriptInterface 添加提供給前端調(diào)用的接口方法

重點：webSetting.setJavaScriptEnabled(true); 必須為 true

// 第二個參數(shù)Android是提供給前端調(diào)用的tag ,可自定義

mWebView.addJavascriptInterface(new WebViewJavaScriptFunction() {}, "Android");

    private void initJavaScriptInterface() {
        mWebView.addJavascriptInterface(new WebViewJavaScriptFunction() {
            @Override
            public void onJsFunctionCalled(String tag) {

            }

            @JavascriptInterface
            public void clearCache(){
                //清除cookie
                clearCacheQbSdk();
            }

        }, "Android");
    }

5、初始化WebView -> initWebViewClientExtension X5內(nèi)核滾動條設(shè)置

    private void initWebViewClientExtension() {
        if (mWebView == null || mWebView.getX5WebViewExtension() == null) {
            return;
        }
        // textZoom:100表示正常疫鹊，120表示文字放大1.2倍
        mWebView.getSettings().setTextZoom(100);
        //豎直快速滑塊袖瞻，設(shè)置null可去除
        mWebView.getX5WebViewExtension().setVerticalTrackDrawable(null);
        mWebView.getX5WebViewExtension().setVerticalScrollBarEnabled(false);
        mWebView.getX5WebViewExtension().setHorizontalScrollBarEnabled(false);

    }

Android原生調(diào)用前端的方法舉例

    /**
     * 全局錯誤提示
     * @param msg 消息提示
     */
    protected void errToast(String msg){

        mHandler.post(new Runnable() {
            public void run() {
                String insertJavaScript ="javascript:(function() {" +
                        "javascript:window.errToast('"+  msg +"');\n" +
                        " })();";
                mWebView.loadUrl(insertJavaScript);
            }
        });
    }