1. 程式人生 > >微信x5webview接入實戰

微信x5webview接入實戰

嘗試 小時 b- default per 亮點 size void arr

應用中許多網頁由於優化的不夠理想,出現加載慢,加載時間長等,而且因為碎片化導致兼容性問題,有一些網頁有視頻內容,產品還提出各種小窗需求,搞得心力憔悴。找到公開的有crosswalk和x5webview,經過分析和研究決定上x5weview,他的好處有哪些呢?

1. TBS(騰訊瀏覽服務)的優勢

1) 速度快:相比系統webview的網頁打開速度有30+%的提升;

2) 省流量:使用雲端優化技術使流量節省20+%;

3) 更安全:安全問題可以在24小時內修復;

4) 更穩定:經過億級用戶的使用考驗,CRASH率低於0.15%;

5) 兼容好:無系統內核的碎片化問題,更少的兼容性問題;

6) 體驗優:支持夜間模式、適屏排版、字體設置等瀏覽增強功能;

7) 功能全:在Html5、ES6上有更完整支持;

8) 更強大:集成強大的視頻播放器,支持視頻格式遠多於系統webview;

9) 視頻和文件格式的支持x5內核多於系統內核

10) 防劫持是x5內核的一大亮點

2. 運行環境

1)手機ROM版本高於或等於2.2版本

2)手機RAM大於500M,該RAM值通過手機 /proc/meminfo 文件的MemTotal動態獲取

註:如果不滿足上述條件,SDK會自動切換到系統WebView,SDK使用者不用關心該切換過程。

3. SDK尺寸指標

1)SDK提供的JAR包約250K

經過實際測試對一些頁面的支持確實比原生的好,尤其是對視頻的支持上面,解碼和加載效果明顯。而且對一些非常重的頁面支持比較好,經常發現有一些在PC端的頁面直接就甩過來丟到app上面,一看幾十M,加載半天加載不出來,而且白屏,特別煩。關鍵webview還是有點問題的,有時候加載錯誤也不回調,進度直接卡死。

集成步驟:

1.導入jar包.

2.導入so庫。這裏需要註意的是,只提供了ameabli的,如果要求其他的直接考一個到讀應的目錄就行。

3.權限聲明增加下面配置:

<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" />

4.替換到app中原先所有的webview,包括布局和動態創建的webview--x5webview。

5.初始化,上報錯誤可以不加。

QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {

            @Override
            public void onViewInitFinished(boolean finished) {
                //x5內核初始化完成的回調,為true表示x5內核加載成功,否則表示x5內核加載失敗,會自動切換到系統內核。
                LogUtil.e("my", " onViewInitFinished is " + finished);
            }

            @Override
            public void onCoreInitFinished() {
                LogUtil.e("my", " onCoreInitFinished  " );
            }
        };
        //x5內核初始化接口

        try {
            QbSdk.initX5Environment(getApplicationContext(), cb);
        } catch (Exception e) {
        }

        CrashReport.UserStrategy strategy = new CrashReport.UserStrategy(getApplicationContext());
        strategy.setCrashHandleCallback(new CrashReport.CrashHandleCallback() {
            public Map<String, String> onCrashHandleStart(int crashType, String errorType, String errorMessage, String errorStack) {
                LinkedHashMap<String, String> map = new LinkedHashMap<String, String>();

                String x5CrashInfo = com.tencent.smtt.sdk.WebView.getCrashExtraMessage(getApplicationContext());
                map.put("x5crashInfo", x5CrashInfo);
                return map;
            }

            @Override


            public byte[] onCrashHandleStart2GetExtraDatas(int crashType, String errorType, String errorMessage, String errorStack) {
                try {
                    return "Extra data.".getBytes("UTF-8");
                } catch (Exception e) {
                    return null;
                }
            }
        });

7.註意事項

如果需要使用播放器功能,需要播放的頁面在清單文件中加入,不加的話,呵呵呵,比如小窗模式 在某些手機上就用不了

頁面的Activity需要聲明android:configChanges="orientation|screenSize|keyboardHidden"

為了避免閃爍的問題,在activity中要加入:

getWindow().setFormat(PixelFormat.TRANSLUCENT);(這個對宿主沒什麽影響,建議聲明)

不要去嘗試調用

webview.setLayerType()
webview.setDrawingCacheEnabled(true);

重要的點,關於websettings的設置,一定按照demo中的來,我的配置如下

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.setAppCachePath(getContext().getDir("appcache", 0).getPath());
        webSetting.setDatabasePath(getContext().getDir("databases", 0).getPath());
        webSetting.setGeolocationDatabasePath(getContext().getDir("geolocation", 0).getPath());
        webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
//         webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);
        webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);

        //增加
//        webSetting.setTextSize(WebSettings.TextSize.NORMAL);
        //支持混合模式
//        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//            webSetting.setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
//        }
        //接口禁止(直接或反射)調用,避免視頻畫面無法顯示:
//        setLayerType(View.LAYER_TYPE_SOFTWARE,null);
//        setDrawingCacheEnabled(true);
        // this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension
        // settings 的設計
        CookieSyncManager.createInstance(getContext());
        CookieSyncManager.getInstance().sync();

接入以後遇到一些詭異的問題:

1.小窗有些手機上無法使用,發現是清單文件聲明少了導致的

2.發現攔截無網絡的errordes和webview的不同

3.發現極簡的app,在首次加載網頁會出現加載不出來的問題,經過調試發現原來是x5webview還沒有初始化完成,就在activity中調用了x5webview導致的,所以一定要註意預加載的回調。

4.關於線上問題的查漏補缺,記得帶上x5webview的版本號

騰訊x5webview官網

騰訊x5webview論壇交流

微信x5webview接入實戰