騰訊X5WebView整合及在移動端中使用
工作中經常涉及H5網頁的載入工作，最多使用的就是安卓系統控制元件WebView，但是當網頁內容比較多的時候，需要等待很久才能載入完，載入完後用戶才能看到網頁中的內容，這樣使用者需要等很久，體驗很差。
那能不能邊載入邊顯示呢，通過搜尋發現騰訊X5WebView可以實現，相對體驗要好很多，況且手Q、微信、QQ瀏覽器使用的該外掛，故值得一試。
步驟如下：
一、下載jar包及so檔案分別放到libs和jniLibs資料夾
二、新增許可權
<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" />
三、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);
}
四、使用自定義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);
}
}
五、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();
}
}
六、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>
七、騰訊X5WebView接入文件地址
https://x5.tencent.com/tbs/guide/sdkInit.html 點選開啟連結
八、後續繼續編輯