您现在的位置是：首页 > 文章详情

微信x5webview接入实战

日期：2018-06-30点击：346收藏

应用中许多网页由于优化的不够理想，出现加载慢，加载时间长等，而且因为碎片化导致兼容性问题，有一些网页有视频内容，产品还提出各种小窗需求，搞得心力憔悴。找到公开的有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();