工作中經常涉及H5網頁的加載工作，最多使用的就是安卓系統控件WebView，但是當網頁內容比較多的時候，需要等待很久才能加載完，加載完后用戶才能看到網頁中的內容，這樣用戶需要等很久，體驗很差。

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

步驟如下：

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

二、添加權限

1 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" / 2 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 3 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> 4 <uses-permission android:name="android.permission.INTERNET" /> 5 <uses-permission android:name="android.permission.READ_PHONE_STATE" />

三、Application中初始化

1 private void initX5WebView() { 2 //搜集本地tbs內核信息并上報服務器，服務器返回結果決定使用哪個內核。 3 QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() { 4 @Override 5 public void onViewInitFinished(boolean arg0) { 6 //x5內核初始化完成的回調，為true表示x5內核加載成功，否則表示x5內核加載失敗，會自動切換到系統內核。 7 Log.d("app", " onViewInitFinished is " arg0); 8 } 9 10 @Override 11 public void onCoreInitFinished() { 12 } 13 }; 14 //x5內核初始化接口 15 QbSdk.initX5Environment(getApplicationContext(), cb); 16 }

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

1 import android.annotation.SuppressLint; 2 import android.content.Context; 3 import android.util.AttributeSet; 4 5 import com.tencent.smtt.sdk.WebSettings; 6 import com.tencent.smtt.sdk.WebSettings.LayoutAlgorithm; 7 import com.tencent.smtt.sdk.WebView; 8 import com.tencent.smtt.sdk.WebViewClient; 9 10 public class X5WebView extends WebView { 11 12 private WebViewClient client = new WebViewClient() { 13 /** 14 * 防止加載網頁時調起系統瀏覽器 15 */ 16 public boolean shouldOverrideUrlLoading(WebView view, String url) { 17 view.loadUrl(url); 18 return true; 19 } 20 }; 21 22 @SuppressLint("SetJavaScriptEnabled") 23 public X5WebView(Context arg0, AttributeSet arg1) { 24 super(arg0, arg1); 25 this.setWebViewClient(client); 26 // this.setWebChromeClient(chromeClient); 27 // WebStorage webStorage = WebStorage.getInstance(); 28 initWebViewSettings(); 29 this.getView().setClickable(true); 30 } 31 32 private void initWebViewSettings() { 33 WebSettings webSetting = this.getSettings(); 34 webSetting.setJavaScriptEnabled(true); 35 webSetting.setJavaScriptCanOpenWindowsAutomatically(true); 36 webSetting.setAllowFileAccess(true); 37 webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 38 webSetting.setSupportZoom(true); 39 webSetting.setBuiltInZoomControls(true); 40 webSetting.setUseWideViewPort(true); 41 webSetting.setSupportMultipleWindows(true); 42 // webSetting.setLoadWithOverviewMode(true); 43 webSetting.setAppCacheEnabled(true); 44 // webSetting.setDatabaseEnabled(true); 45 webSetting.setDomStorageEnabled(true); 46 webSetting.setGeolocationEnabled(true); 47 webSetting.setAppCacheMaxSize(Long.MAX_VALUE); 48 // webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY); 49 webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND); 50 // webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH); 51 webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE); 52 53 // this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension 54 // settings 的設計 55 } 56 57 public X5WebView(Context arg0) { 58 super(arg0); 59 setBackgroundColor(85621); 60 } 61 62 }

五、Activity中使用

1 /** 2 * @author geqipeng 3 * @date 2018/1/18 4 */ 5 6 public class WebViewTestActivity extends Activity { 7 8 private static final String mHomeUrl = "http://app.html5.qq.com/navi/index"; 9 private X5WebView mX5WebView; 10 11 @Override 12 protected void onCreate(@Nullable Bundle savedInstanceState) { 13 super.onCreate(savedInstanceState); 14 setContentView(R.layout.activity_webview_test); 15 initHardwareAccelerate(); 16 initView(); 17 } 18 19 /** 20 * 啟用硬件加速 21 */ 22 private void initHardwareAccelerate() { 23 try { 24 if (Integer.parseInt(android.os.Build.VERSION.SDK) >= 11) { 25 getWindow() 26 .setFlags( 27 android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED, 28 android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED); 29 } 30 } catch (Exception e) { 31 } 32 } 33 34 private void initView() { 35 mX5WebView = findViewById(R.id.x5_webview); 36 mX5WebView.loadUrl(mHomeUrl); 37 } 38 39 /** 40 * 返回鍵監聽 41 * @param keyCode 42 * @param event 43 * @return 44 */ 45 @Override 46 public boolean onKeyDown(int keyCode, KeyEvent event) { 47 if (keyCode == KeyEvent.KEYCODE_BACK) { 48 if (mX5WebView != null && mX5WebView.canGoBack()) { 49 mX5WebView.goBack(); 50 return true; 51 } else { 52 return super.onKeyDown(keyCode, event); 53 } 54 } 55 return super.onKeyDown(keyCode, event); 56 } 57 58 59 @Override 60 protected void onDestroy() { 61 //釋放資源 62 if (mX5WebView != null) 63 mX5WebView.destroy(); 64 super.onDestroy(); 65 } 66 }

六、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.X5WebViewandroid:id="@ id/x5_webview"android:layout_width="match_parent"android:layout_height="match_parent"/></RelativeLayout>

效果圖：

騰訊X5WebView接入文檔

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

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的腾讯TBS X5 WebView的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。