腾讯X5浏览器简单使用_x5加载网页

前言：

Android中的WebView一直是令人头疼的问题，各种手机内核不一致，版本也不一样，型号众多，导致兼容不好做，自从使用X5WebView，兼容和版本适配问题得到很大提升，本文将给X5WebView出接入的指南.

1.X5内核的好处:

1）速度快：相比系统webview的网页打开速度有30+%的提升；
​
2）省流量：使用云端优化技术使流量节省20+%；
​
3） 更安全：安全问题可以在24小时内修复；
​
4）更稳定：经过亿级用户的使用考验，CRASH率低于0.15%；
​
5） 兼容好：无系统内核的碎片化问题，更少的兼容性问题；
​
6） 体验优：支持夜间模式、适屏排版、字体设置等浏览增强功能；
​
7） 功能全：在Html5、ES6上有更完整支持；
​
8） 更强大：集成强大的视频播放器，支持视频格式远多于系统webview；
​
9） 视频和文件格式的支持x5内核多于系统内核
​
10） 防劫持是x5内核的一大亮点

2.下载SDK，将jar文件放到工程的libs目录下，源码和XML里的系统包和类替换为SDK里的包和类，

2.1 腾讯X5浏览器sdk下载地址:

腾讯浏览服务-SDK下载

2.2 不过我采用的是远程依赖的方式进行加载，因为jar集成有时加载不成功，后面sdk版本升级更换也很麻烦，采用依赖的方式只需要替换最新版本号即可，它自己会慢慢下载.

2.3 app目录下的build.gradle配置如下:

dependencies {
 implementation fileTree(dir: 'libs', include: ['*.jar'])
 implementation 'androidx.appcompat:appcompat:1.1.0'
 implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
 testImplementation 'junit:junit:4.12'
 androidTestImplementation 'androidx.test.ext:junit:1.1.0'
 androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
 implementation "com.tencent.tbs.tbssdk:sdk:43697"
 }

3. 目前sdk不支持64位的手机cpu,需要如下配置:

ndk {
​
abiFilters "armeabi", "armeabi-v7a", "x86", "mips"
​
}

4.添加权限:

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

5.初始化：

/**
​
/* @作者: njb
​
/* @时间: 2019/11/8 10:18
​
/* @描述:
​
*/
​
public class App extends Application {
​
private static App mInstance;
​
@Override
​
public void onCreate() {
​
super.onCreate();
​
mInstance = this;
​
initX5WebView();
​
}
​
private void initX5WebView(){
​
QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
​
@Override
​
public void onViewInitFinished(boolean arg0) {
​
// TODO Auto-generated method stub
​
//x5內核初始化完成的回调，为true表示x5内核加载成功，否则表示x5内核加载失败，会自动切换到系统内核。
​
Log.d("app", " onViewInitFinished is " + arg0);
​
}
​
@Override
​
public void onCoreInitFinished() {
​
// TODO Auto-generated method stub
​
}
​
};
​
//x5内核初始化接口
​
QbSdk.initX5Environment(getApplicationContext(), cb);
​
}
​
public static App getmInstance() {
​
return mInstance;
​
}
​
}

6.基本使用：

 /**
​
/* @作者: njb
​
/* @时间: 2019/11/8 10:32
​
/* @描述: 用于演示X5webView的基本使用
​
*/
​
public class X5WebViewActivity extends Activity {
​
private X5WebView webView;
​
private TextView textView;
​
//private String url = "https://1111.tmall.com/";
​
//private String url = "https://h5.m.taobao.com/";
​
private String url = "https://www.jd.com/";
​
@Override
​
protected void onCreate(Bundle savedInstanceState) {
​
// TODO Auto-generated method stub
​
super.onCreate(savedInstanceState);
​
setContentView(R.layout.filechooser_layout);
​
initWebView();
​
initListener();
​
}
​
private void initWebView() {
​
webView = findViewById(R.id.web_filechooser);
​
textView = findViewById(R.id.tv_open);
​
webView.loadUrl(url);
​
}
​
private void initListener() {
​
textView.setOnClickListener(new View.OnClickListener() {
​
@Override
​
public void onClick(View v) {
​
openFileChooseProcess();
​
}
​
});
​
}
​
/**
​
/* 打开文件管理器
​
*/
​
private void openFileChooseProcess() {
​
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
​
i.addCategory(Intent.CATEGORY_OPENABLE);
​
i.setType("application/vnd.ms-excel");
​
//i.setType("*/*");
​
startActivityForResult(Intent.createChooser(i, "test"), 0);
​
}
​
/**
​
/* 确保注销配置能够被释放
​
*/
​
@Override
​
protected void onDestroy() {
​
// TODO Auto-generated method stub
​
if (this.webView != null) {
​
webView.destroy();
​
}
​
super.onDestroy();
​
}
​
}

7.X5WebView基类封装:

/**
​
/* @作者: njb
​
/* @时间: 2019/11/8 10:32
​
/* @描述: WebView基类
​
*/
​
public class X5WebView extends WebView {
​
private static final String TAG = "XWebView";
​
private WebSettings webSettings;
​
private WebViewClient client = new WebViewClient() {
​
/**
​
/* 防止加载网页时调起系统浏览器
​
*/
​
public boolean shouldOverrideUrlLoading(WebView view, String url) {
​
view.loadUrl(url);
​
return true;
​
}
​
@Override
​
public void onPageStarted(WebView webView, String s, Bitmap bitmap) {
​
super.onPageStarted(webView, s, bitmap);
​
webSettings.setBlockNetworkImage(true);
​
Log.d(TAG, " onPageStart " + s + "------------");
​
}
​
@Override
​
public void onPageFinished(WebView webView, String s) {
​
super.onPageFinished(webView, s);
​
Log.d(TAG," onPageFinished " + s + "----------");
​
webSettings.setBlockNetworkImage(false);
​
if (!webSettings.getLoadsImagesAutomatically()) {
​
//设置wenView加载图片资源
​
webSettings.setBlockNetworkImage(false);
​
webSettings.setLoadsImagesAutomatically(true);
​
}
​
}
​
};
​
public X5WebView(Context arg0, AttributeSet arg1) {
​
super(arg0, arg1);
​
this.setWebViewClient(client);
​
initWebViewSettings();
​
this.getView().setClickable(true);
​
}
​
@SuppressLint("SetJavaScriptEnabled")
​
private void initWebViewSettings() {
​
webSettings = this.getSettings();
​
webSettings.setJavaScriptEnabled(true);
​
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
​
webSettings.setAllowFileAccess(true);
​
webSettings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
​
webSettings.setSupportZoom(true);
​
webSettings.setBuiltInZoomControls(true);
​
webSettings.setUseWideViewPort(true);
​
webSettings.setSupportMultipleWindows(true);
​
webSettings.setAppCacheEnabled(true);
​
//开启数据库形式存储
​
webSettings.setDatabaseEnabled(true);
​
//开启Dom形式存储
​
webSettings.setDomStorageEnabled(true);
​
webSettings.setGeolocationEnabled(true);
​
webSettings.setAppCacheMaxSize(Long.MAX_VALUE);
​
webSettings.setPluginState(WebSettings.PluginState.ON_DEMAND);
​
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
​
//缓存数据的存储地址
​
String appCacheDir = App.getmInstance().getDir("cache", Context.MODE_PRIVATE).getPath();
​
webSettings.setAppCachePath(appCacheDir);
​
//开启缓存功能
​
webSettings.setAppCacheEnabled(true);
​
//缓存模式
​
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
​
webSettings.setAllowFileAccess(true);
​
}
​
public X5WebView(Context arg0) {
​
super(arg0);
​
setBackgroundColor(85621);
​
}
​
} 

8.播放视频：

 /**
​
/* @作者: njb
​
/* @时间: 2019/11/8 10:32
​
/* @描述: 用于演示X5webView实现视频的全屏播放功能 其中注意 X5的默认全屏方式 与 android 系统的全屏方式
​
*/
​
public class FullScreenPlayerActivity extends Activity {
​
X5WebView webView;
​
@Override
​
protected void onCreate(Bundle savedInstanceState) {
​
// TODO Auto-generated method stub
​
super.onCreate(savedInstanceState);
​
setContentView(R.layout.filechooser_layout);
​
webView = findViewById(R.id.web_filechooser);
​
webView.loadUrl("https://static.chuangyetianxia.com/study/3/media/5d4a6cb2bc78215651585786907.mp4");
​
getWindow().setFormat(PixelFormat.TRANSLUCENT);
​
webView.getView().setOverScrollMode(View.OVER_SCROLL_ALWAYS);
​
webView.addJavascriptInterface(new WebViewJavaScriptFunction() {
​
@Override
​
public void onJsFunctionCalled(String tag) {
​
// TODO Auto-generated method stub
​
}
​
@JavascriptInterface
​
public void onX5ButtonClicked() {
​
FullScreenPlayerActivity.this.enableX5FullscreenFunc();
​
}
​
@JavascriptInterface
​
public void onCustomButtonClicked() {
​
FullScreenPlayerActivity.this.disableX5FullscreenFunc();
​
}
​
@JavascriptInterface
​
public void onLiteWndButtonClicked() {
​
FullScreenPlayerActivity.this.enableLiteWndFunc();
​
}
​
@JavascriptInterface
​
public void onPageVideoClicked() {
​
FullScreenPlayerActivity.this.enablePageVideoFunc();
​
}
​
}, "Android");
​
}
​
@Override
​
public void onConfigurationChanged(Configuration newConfig) {
​
// TODO Auto-generated method stub
​
try {
​
super.onConfigurationChanged(newConfig);
​
if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
​
} else if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
​
}
​
} catch (Exception e) {
​
e.printStackTrace();
​
}
​
}
​
// 向webView发出信息
​
private void enableX5FullscreenFunc() {
​
if (webView.getX5WebViewExtension() != null) {
​
Toast.makeText(this, "开启X5全屏播放模式", Toast.LENGTH_LONG).show();
​
Bundle data = new Bundle();
​
data.putBoolean("standardFullScreen", false);// true表示标准全屏，false表示X5全屏；不设置默认false，
​
data.putBoolean("supportLiteWnd", false);// false：关闭小窗；true：开启小窗；不设置默认true，
​
data.putInt("DefaultVideoScreen", 2);// 1：以页面内开始播放，2：以全屏开始播放；不设置默认：1
​
webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams",
​
data);
​
}
​
}
​
private void disableX5FullscreenFunc() {
​
if (webView.getX5WebViewExtension() != null) {
​
Toast.makeText(this, "恢复webkit初始状态", Toast.LENGTH_LONG).show();
​
Bundle data = new Bundle();
​
data.putBoolean("standardFullScreen", true);// true表示标准全屏，会调起onShowCustomView()，false表示X5全屏；不设置默认false，
​
data.putBoolean("supportLiteWnd", false);// false：关闭小窗；true：开启小窗；不设置默认true，
​
data.putInt("DefaultVideoScreen", 2);// 1：以页面内开始播放，2：以全屏开始播放；不设置默认：1
​
webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams",
​
data);
​
}
​
}
​
private void enableLiteWndFunc() {
​
if (webView.getX5WebViewExtension() != null) {
​
Toast.makeText(this, "开启小窗模式", Toast.LENGTH_LONG).show();
​
Bundle data = new Bundle();
​
data.putBoolean("standardFullScreen", false);// true表示标准全屏，会调起onShowCustomView()，false表示X5全屏；不设置默认false，
​
data.putBoolean("supportLiteWnd", true);// false：关闭小窗；true：开启小窗；不设置默认true，
​
data.putInt("DefaultVideoScreen", 2);// 1：以页面内开始播放，2：以全屏开始播放；不设置默认：1
​
webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams",
​
data);
​
}
​
}
​
private void enablePageVideoFunc() {
​
if (webView.getX5WebViewExtension() != null) {
​
Toast.makeText(this, "页面内全屏播放模式", Toast.LENGTH_LONG).show();
​
Bundle data = new Bundle();
​
data.putBoolean("standardFullScreen", false);// true表示标准全屏，会调起onShowCustomView()，false表示X5全屏；不设置默认false，
​
data.putBoolean("supportLiteWnd", false);// false：关闭小窗；true：开启小窗；不设置默认true，
​
data.putInt("DefaultVideoScreen", 1);// 1：以页面内开始播放，2：以全屏开始播放；不设置默认：1
​
webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams",
​
data);
​
}
​
}
​
}

9.以上就是X5WebView的简单使用，大家有好的想法可以提出，一起交流学习，写得不好，还望指正。

10.项目源码地址:

X5WebViewDemo: 腾讯X5内核使用实例