Android整合三方瀏覽器之X5核心

ruomiz發表於2018-07-18
Android瀏覽器

Android整合三方瀏覽器之X5核心
很多應用開始採用 hybrid 開發模式，最近在做有關 webrtc 視訊通訊的專案，也是使用 hybrid 開發。然而由於系統 WebView 的相容性問題（Android 4.4 以前 webview 是基於 webkit ，4.4 及以後採用 chromium）。需要使用一款相容性較好的核心「完美支援 webrtc」。

如今可以整合的瀏覽器核心主要有 騰訊X5服務 英特爾的CrossWalk 火狐Firefox_Focus Chromium

這一篇主要講解騰訊 X5 瀏覽器的整合，不得不說官方文件 描述的東西太少，如果遇到問題可以去 X5論壇 搜尋相關問題。

騰訊 X5 核心也是基於 chromium 的，相比原生的 WebView 而言，優化了使用者的瀏覽體驗。SDK 是通過共享使用使用者手機上微信、手機QQ、QQ空間等軟體已經下載好的 X5 核心。SDK 很小，且整合簡單隻需幾行程式碼即可。

整合

先去官網下載 SDK 後將所需的 aar 和 so 檔案匯入我們的工程。

x5核心暫時不提供64位的so檔案,so可只保留"armeabi"資料夾，手機執行時會向下相容。

匯入SDK

在 module 的 build.gradle 中新增

 //sdk中只提供了armeabi的資料夾和對應so檔案 
 ndk {
            abiFilters "armeabi", "armeabi-v7a", "x86", "mips" 
        }
複製程式碼
//新增aar檔案
repositories {
    flatDir {
        dirs 'libs'
    }
}

dependencies {
      compile(name: '你的aar檔案', ext: 'aar')
}
複製程式碼
<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" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
複製程式碼
初始化X5服務
//在application中初始化
@Override
    public void onCreate() {
        super.onCreate();
        
        //蒐集本地tbs核心資訊並上報伺服器，伺服器返回結果決定使用哪個核心。
        QbSdk.PreInitCallback callback = new QbSdk.PreInitCallback() {
            @Override
            public void onViewInitFinished(boolean arg) {
                //x5核心初始化完成的回撥，
                // true表示x5核心載入成功，
                // false表示x5核心載入失敗，會自動切換到系統核心。
            }

            @Override
            public void onCoreInitFinished() {
            }
        };

        QbSdk.initX5Environment(getApplicationContext(), callback);
    }

複製程式碼
在佈局中新增 WebView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="3dp" />

    <com.tencent.smtt.sdk.WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>
複製程式碼
初始化 Webview
public class MainActivity extends AppCompatActivity {
    private ProgressBar progressBar;
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar = findViewById(R.id.progressbar);
        webView = findViewById(R.id.webview);
        initWebView();
    }

    private void initWebView() {
        WebSettings settings = webView.getSettings();           //和系統webview一樣
        settings.setJavaScriptEnabled(true);                    //支援Javascript 與js互動
        settings.setJavaScriptCanOpenWindowsAutomatically(true);//支援通過JS開啟新視窗
        settings.setAllowFileAccess(true);                      //設定可以訪問檔案
        settings.setSupportZoom(true);                          //支援縮放
        settings.setBuiltInZoomControls(true);                  //設定內建的縮放控制元件
        settings.setUseWideViewPort(true);                      //自適應螢幕
        settings.setSupportMultipleWindows(true);               //多視窗
        settings.setDefaultTextEncodingName("utf-8");            //設定編碼格式
        settings.setAppCacheEnabled(true);
        settings.setDomStorageEnabled(true);
        settings.setAppCacheMaxSize(Long.MAX_VALUE);
        settings.setCacheMode(WebSettings.LOAD_NO_CACHE);       //快取模式
        webView.setWebViewClient(new WebViewClient() {          

            @Override
            public void onPageStarted(WebView webView, String s, Bitmap bitmap) {
                super.onPageStarted(webView, s, bitmap);
            }

            @Override
            public void onPageFinished(WebView webView, String s) {
                super.onPageFinished(webView, s);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView webView, String url) {
                webView.loadUrl(url);
                return true;
            }

            @Override
            public void onReceivedSslError(WebView webView, SslErrorHandler sslErrorHandler, SslError sslError) {
//                super.onReceivedSslError(webView, sslErrorHandler, sslError);
                sslErrorHandler.proceed();//忽略SSL證照錯誤
            }
        });

        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView webView, String s, String s1, JsResult jsResult) {
                return super.onJsAlert(webView, s, s1, jsResult);
            }

            @Override
            public void onReceivedTitle(WebView webView, String s) {
                super.onReceivedTitle(webView, s);
            }

            @Override
            public void onProgressChanged(WebView webView, int progress) {
                super.onProgressChanged(webView, progress);
               		if（...）{
               			...
                        progressBar.setProgress(progress); //設定進度條
                         ...
                    } else {
                   		 ...
                    }
                }
            }
        });
        webView.loadUrl("http://www.baidu.com");
//      webView.reload(); 重新整理頁面
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView != null && webView.canGoBack()) {
            webView.goBack();
            return true;
        } else {
            ...
        }
    }
}
複製程式碼

總結

上述已經完成 X5 核心整合。首次使用可能還在下載 X5 核心而使用系統核心。如有特殊需求可以採用靜態整合（整合以後無法更新 X5 核心是硬傷）。

提示

之前在使用 X5 核心時，宣告瞭 RECORD_AUDIO 許可權後麥克風依然採集不到聲音，後來發現沒有新增 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

新增以後麥克風可以正常採集聲音。此許可權是修改音訊設定。有更多疑問請在 X5論壇 釋疑。

最後推薦幾個檢查 X5 核心是否成功載入的工具和網址。

  1. debugtbs
  2. TBS開發除錯利器
  3. 檢測小工具

最後

關於Crosswalk整合請跳轉：

Android整合三方瀏覽器之Crosswalk

相關文章