騰訊X5WebView集成及在移動端中使用

工做中常常涉及H5網頁的加載工做，最多使用的就是安卓系統控件WebView，可是當網頁內容比較多的時候，須要等待好久才能加載完，加載完後用戶才能看到網頁中的內容，這樣用戶須要等好久，體驗不好。

那能不能邊加載邊顯示呢，經過搜索發現騰訊X5WebView能夠實現，相對體驗要好不少，何況手Q、微信、QQ瀏覽器使用的該插件，故值得一試。

步驟以下：

1、下載jar包及so文件分別放到libs和jniLibs文件夾

 

 2、添加權限

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
     
    <uses-permission android:name="android.permission.INTERNET" />
     
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />

 

3、Application中初始化

        private void initX5WebView() {
            //蒐集本地tbs內核信息並上報服務器，服務器返回結果決定使用哪一個內核。
            QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
                @Override
                public void onViewInitFinished(boolean arg0) {
                    //x5內核初始化完成的回調，爲true表示x5內核加載成功，不然表示x5內核加載失敗，會自動切換到系統內核。
                    Log.d("app", " onViewInitFinished is " + arg0);
                }
     
                @Override
                public void onCoreInitFinished() {
                }
            };
            //x5內核初始化接口
            QbSdk.initX5Environment(getApplicationContext(), cb);
        }

 

4、使用自定義X5WebView繼承騰訊包下WebView

    import android.annotation.SuppressLint;
    import android.content.Context;
    import android.util.AttributeSet;
     
    import com.tencent.smtt.sdk.WebSettings;
    import com.tencent.smtt.sdk.WebSettings.LayoutAlgorithm;
    import com.tencent.smtt.sdk.WebView;
    import com.tencent.smtt.sdk.WebViewClient;
     
    public class X5WebView extends WebView {
     
        private WebViewClient client = new WebViewClient() {
            /**
             * 防止加載網頁時調起系統瀏覽器
             */
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        };
     
        @SuppressLint("SetJavaScriptEnabled")
        public X5WebView(Context arg0, AttributeSet arg1) {
            super(arg0, arg1);
            this.setWebViewClient(client);
            // this.setWebChromeClient(chromeClient);
            // WebStorage webStorage = WebStorage.getInstance();
            initWebViewSettings();
            this.getView().setClickable(true);
        }
     
        private void initWebViewSettings() {
            WebSettings webSetting = this.getSettings();
            webSetting.setJavaScriptEnabled(true);
            webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
            webSetting.setAllowFileAccess(true);
            webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
            webSetting.setSupportZoom(true);
            webSetting.setBuiltInZoomControls(true);
            webSetting.setUseWideViewPort(true);
            webSetting.setSupportMultipleWindows(true);
            // webSetting.setLoadWithOverviewMode(true);
            webSetting.setAppCacheEnabled(true);
            // webSetting.setDatabaseEnabled(true);
            webSetting.setDomStorageEnabled(true);
            webSetting.setGeolocationEnabled(true);
            webSetting.setAppCacheMaxSize(Long.MAX_VALUE);
            // webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);
            webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
            // webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);
            webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);
     
            // this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension
            // settings 的設計
        }
     
        public X5WebView(Context arg0) {
            super(arg0);
            setBackgroundColor(85621);
        }
     
    }

 

5、Activity中使用

     
    public class WebViewTestActivity extends Activity {
     
        private static final String mHomeUrl = "http://app.html5.qq.com/navi/index";
        private X5WebView mX5WebView;
     
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_webview_test);
            initHardwareAccelerate();
            initView();
        }
     
        /**
         * 啓用硬件加速
         */
        private void initHardwareAccelerate() {
            try {
                if (Integer.parseInt(android.os.Build.VERSION.SDK) >= 11) {
                    getWindow()
                            .setFlags(
                                    android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
                                    android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
                }
            } catch (Exception e) {
            }
        }
        
        private void initView() {
            mX5WebView = findViewById(R.id.x5_webview);
            mX5WebView.loadUrl(mHomeUrl);
        }
     
        /**
         * 返回鍵監聽
         * @param keyCode
         * @param event
         * @return
         */
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_BACK) {
                if (mX5WebView != null && mX5WebView.canGoBack()) {
                    mX5WebView.goBack();
                    return true;
                } else {
                    return super.onKeyDown(keyCode, event);
                }
            }
            return super.onKeyDown(keyCode, event);
        }
     
       
        @Override
        protected void onDestroy() {
            //釋放資源
            if (mX5WebView != null)
                mX5WebView.destroy();
            super.onDestroy();
        }
    }

6、Xml文件

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
     
        <net.edaibu.testapplication.activity.webview.X5WebView
            android:id="@+id/x5_webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
     
    </RelativeLayout>

7、騰訊X5WebView接入文檔地址

    https://x5.tencent.com/tbs/guide/sdkInit.html點擊打開連接

8、後續繼續編輯