webview框架

android webView 内核

 

现在的移动开发，一个明显的趋势是HTML占据了越来越重要的位置,H5不再是简单的一个浏览网页的行为，在非常多的APP中，它承担了许多原本许要原生开发的功能；Android的H5支持则是个比较头痛的事情

在进行IOS开发时，WebView从来都不是问题，在IOS上不仅WebView统一，而且性能极佳，也很少需要考虑兼容性问题；

但这个问题在Android上则表现的非常不一样，由于机型众多，WebView的内核众多，不同手机的WebView的兼容性，性能相差也比较大，如果你的APP在Android上对H5有较高需求，你就需要一个好的解决方案

现在所在的公司所负责开发的APP，就是一款企业级APP，由于需要对接企业开发的各式各样的H5的业务系统，因此在H5方面要求较高；也因此笔者对这一方面了解稍等有一点

Android WebView的选择有三种方案，分别是

1.    使用Android系统自带的WebView

2.    使用X5内核的WebView

3.    使用基于chrome webkit的crosswalk WebView

如上述三种方案，第1个是最原始的解决方案，第2，3个则分别是腾讯，corsswalk的解决方案

几种方案的对照如下表:

方案	方案说明	实际效果	优缺点	html5test分数
系统自带WebView	Android默认	最差	优：没有额外的JAR及负担，原生API 缺: 兼容性，性能在不同手机上显示差别很大	最差
X5 WebView	腾讯产品，微信，QQ浏览器就是使用X5内核	一般	优：提供了一个兼容性的解决方案,且微信，QQ浏览器都在用，可信度高 缺: 解决的能力一般，而且某些方面反而加大了开发工作量;而且不支持cordova	一般
crosswalk	国外为Android提供的一个融合chrome webkit的解决方案	最佳	优:没有兼容性，性能问题,且支持corodva 缺：18M的包，而且区分不同的arm,x86等CPU	较佳

1.      使用Chrome Webkit内核，兼容性不存在任何问题

2.     性能佳

3.     支持cordova

4.     支持前端人员可以在PC Chrome上联调

不足：

1.     APP包增加了至少18M

2.     不同的CPU系统的包完全不同，笔者APP只支持arm，如果你还要支持X86 CPU，你还得加18M的大小，或者分2个APP

而X5做为腾讯的一款产品，主要目标也是解决兼容性问题，从分数上看，它在H5的支持度上并没有太多的改善；但兼容性方面应该有比较好的改善，同时有微信和QQ浏览器做支撑，也是一个比较好的选择

因此，笔者最终建议如下：

1.     你的APP对WebView需求不高，以纯原生为主，那就不用考虑WebView的兼容性及性能问题，使用系统自带的WebView就可以了

2.     如果你的APP有大量使用到WebView，加载一些H5网页，但在cordova等其它方面没有要求，使用X5是一个比较好的选择，毕竟腾讯的实力摆在那，有问题你可以说，微信也是这样的（这个话非常有杀伤力）

3.     类似笔者公司这样的APP，对H5有非常高的要求，大量的业务系统是由H5完成，且需要cordova与原生进行大量的交互 ，那这种情况下,crosswalk是我们唯一的选择，虽然加大了18M，但带来的好处是显而易见的

 

下面附上crosswalk集成流程：

首先在项目的gradle添加：

 

repositories {
 
   maven {
       url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
   }
}

然后在APP的gradle添加：

implementation 'org.xwalk:xwalk_core_library:23.53.589.4'

编译！

Xml：

   android:id="@+id/xwalkView"

   android:layout_width="match_parent"

   android:layout_height="match_parent" />

 

代码中：

private XWalkView mXWalkView;

 

@Override

protected void onCreate(Bundle savedInstanceState) {

   super.onCreate(savedInstanceState);

   setContentView(R.layout.activity_main);

 

  mXWalkView = findViewById(R.id.xwalkView);

  mXWalkView.loadUrl(“需要加载的网址”);

 

}

设置UIClient：

mXWalkView.setUIClient(new XWalkUIClient(mXWalkView) {

   @Override

   public void onReceivedTitle(XWalkView view, String title) {

       super.onReceivedTitle(view, title);

       //获取Web页中的标题

       mTitle.setText(title);

   }

 

  });

设置ResourceClient：

mXWalkView.setResourceClient(new XWalkResourceClient(mXWalkView) {

   @Override

   @Override

   public void onProgressChanged(XWalkView view, int newProgress) {

       super.onProgressChanged(view, newProgress);

       //获得网页的加载进度并显示

       if (newProgress >= 0 && newProgress < 100) {

           mWebProgress.setVisibility(View.VISIBLE);

           mWebProgress.setProgress(newProgress);

       } else {

           mWebProgress.setVisibility(View.GONE);

       }

       Log.e("onProgressChanged", newProgress + "");

   }

});

 

部分操作：

后退：

if (mXWalkView.getNavigationHistory().canGoBack()) {

   mXWalkView.getNavigationHistory().navigate(XWalkNavigationHistory.Direction.BACKWARD, 1);

}

前进：

if (mXWalkView.getNavigationHistory().canGoForward()) {

   mXWalkView.getNavigationHistory().navigate(XWalkNavigationHistory.Direction.FORWARD, 1);

}

刷新：

mXWalkView.reload(mXWalkView.getLayoutMode());

 

 

生命周期：

准备开始

@Override

protected void onResume() {

   super.onResume();

   if (mXWalkView != null) {

       mXWalkView.resumeTimers();

       mXWalkView.onShow();

   }

 

}

暂停

@Override

protected void onPause() {

   super.onPause();

   if (mXWalkView != null) {

       mXWalkView.resumeTimers();

       mXWalkView.onHide();

   }

}

 

销毁

 @Override

   protected void onDestroy() {

       if (mXWalkView != null) {

         mXWalkView.onDestroy();

           mXWalkView = null;

       }

       super.onDestroy();

   }