最近的项目中,有用到phonegap,并需要展示一些需要高效渲染的网页,同情况下,IOS跑起来轻松无比,但是Webview。。。。(泪奔),在焦头烂额的机型及版本适配中,发现了Crosswalk项目。
一、 在使用 Crosswalk框架之前,我们必须得了解 Crosswalk
1. Crosswalk是一款开源的Web引擎,其基于 Chromium/Blink 的应用运行环境,对于混合开发的轻量级应用尤为受欢迎。
2. crosswalk官网https://crosswalk-project.org/index_zh.html,很贴心的中文选项
3. 同时在使用前的声明,如果你不能承受APK激增 20M~ OR 40M~ 体积的话,你懂得。当然如果大家有好的APK瘦身方法,希望能得到指点。
4. 最近搞项目有尝试过许多框架,这里Tencent X5也非常棒,至于ChromiumView貌似不再维护了
二、开始应用到项目
题主现阶段给出为嵌入模式XWalkView 的一些api使用介绍,crosswalk有支持phonegap的插件替换其中系统webview,以获取更强大功能,这个后续有时间会再次分享
1.首先在greadle 中声明 maven仓库,并添加库的依赖
repositories {
maven {
url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
}
}
compile 'org.xwalk:xwalk_core_library:18.48.477.13'
2 . 接下来使用的XwalkView我们有几点注意的地方
1. 要求最低版本 minSdkVersion 14
2. 硬件加速:android:hardwareAccelerated="true"
3. 权限要求:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<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.WRITE_EXTERNAL_STORAGE"/>
4.
<org.xwalk.core.XWalkView android:id="@+id/xw"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
ndroid:layout_height="fill_parent">
</org.xwalk.core.XWalkView>
三、API使用
1. XWalkPreferences配置(API 文档地址)
//添加对javascript支持
XWalkPreferences.setValue("enable-javascript", true);
//开启调式,支持谷歌浏览器调式
XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);
//置是否允许通过file url加载的Javascript可以访问其他的源,包括其他的文件和http,https等其他的源XWalkPreferences.setValue(XWalkPreferences.ALLOW_UNIVERSAL_ACCESS_FROM_FILE, true);
//JAVASCRIPT_CAN_OPEN_WINDOW
XWalkPreferences.setValue(XWalkPreferences.JAVASCRIPT_CAN_OPEN_WINDOW, true);
// enable multiple windows.
XWalkPreferences.setValue(XWalkPreferences.SUPPORT_MULTIPLE_WINDOWS, true);
2. 一些基本的api和webview类似
//设置滑动样式。。。
Xwalkview mXwview.setHorizontalScrollBarEnabled(false);
mXwview.setVerticalScrollBarEnabled(false);
mXwview.setScrollBarStyle(XWalkView.SCROLLBARS_OUTSIDE_INSET);
mXwview.setScrollbarFadingEnabled(true);
//获取setting
mMSettings = mXwview.getSettings();
//支持空间导航
mMSettings.setSupportSpatialNavigation(true);
mMSettings.setBuiltInZoomControls(true);
mMSettings.setSupportZoom(true);
3. 加载
mXwview.load(url, null);
mXwview.setDrawingCacheEnabled(false);//不使用缓存
mXwview.getNavigationHistory().clear();//清除历史记录
mXwview.clearCache(true);//清楚包括磁盘缓存
4. XWalkView没了webview的setwebviewclient api 增加了setUIClient 和setResourceClient
顾名思义,UI变化及资源加载
1 .我们可以在XWalkUIClient中覆盖方法onPageLoadStarted及onPageLoadStopped处理页面开始加载及加载完毕
同时在页面缩放onScaleChanged或调用JsAlert中进行相应操作
mXwview.setUIClient(new XWalkUIClient(mXwview) {
@Override
public void onPageLoadStarted(XWalkView view, String url) {
super.onPageLoadStarted(view, url);
}
@Override
public boolean onJsAlert(XWalkView view, String url, String message, XWalkJavascriptResult result) {
return super.onJsAlert(view, url, message, result);
}
@Override
public void onScaleChanged(XWalkView view, float oldScale, float newScale) {
if (view != null) {
view.invalidate();
}
super.onScaleChanged(view, oldScale, newScale);
}
@Override
public void onPageLoadStopped(XWalkView view, String url, LoadStatus status) {
super.onPageLoadStopped(view, url, status);
}
});
2 .在XWalkResourceClient中同样有我们熟悉的onReceivedLoadError()错误回调及shouldOverrideUrlLoading()方法,同时相比webview增加的有shouldInterceptLoadRequest,可以对url进行监听及拦截操作
mXwview.setResourceClient(new XWalkResourceClient(mXwview) {
@Override
public void onReceivedLoadError(XWalkView view, int errorCode, String description, String failingUrl) {
super.onReceivedLoadError(view, errorCode, description, failingUrl);
}
@Override
public WebResourceResponse shouldInterceptLoadRequest(XWalkView view, String url) {
LogUtils.d("http", "shouldOverrideUrlLoading-url=" + url);
return super.shouldInterceptLoadRequest(view, url);
}
@Override
public boolean shouldOverrideUrlLoading(XWalkView view, String url) {
odlurl= url;
return super.shouldOverrideUrlLoading(view, url);
}
});
5. 监听back按钮点击事件
//改写物理按键——返回的逻辑
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
if (mXwview.getNavigationHistory().canGoBack()) {
mXwview.getNavigationHistory().navigate(XWalkNavigationHistory.Direction.BACKWARD, 1); //返回上一页面
} else {
/*finish();*/
}
return true;
}
return super.onKeyDown(keyCode, event);
}
6. 同时不忘XWalkView令人心动的一点,与Activity生命周期的绑定,对资源的更好回收和处理
@Override
protected void onDestroy() {
super.onDestroy();
if (mXwview != null) {
mXwview.onDestroy();
}
android.os.Process.killProcess(android.os.Process.myPid());
}
@Override
protected void onPause() {
super.onPause();
if (mXwview != null) {
mXwview.pauseTimers();
mXwview.onHide();
}
}
@Override
protected void onResume() {
super.onResume();
if (mXwview != null) {
mXwview.resumeTimers();
mXwview.onShow();
}
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (mXwalkView != null) {
mXwalkView.onActivityResult(requestCode, resultCode, data);
}
}
@Override
protected void onNewIntent(Intent intent) {
if (mXwalkView != null) {
mXwalkView.onNewIntent(intent);
}
}
7.XWalkView可直接执行js
js调java用@JavascriptInterface注解声明即可
public class FromJs{
public FromJs(){}
@JavascriptInterface
public String fromJsMethod() {
return "js-------------";
}
}
mXWalkView.addJavascriptInterface(new FromJs(),"NativeInterface");
8. cookies使用
XWalkCookieManager xm = new XWalkCookieManager();
xm.setAcceptCookie(true);
xm.setCookie(url, cookie);
四、好的,做好这一步,让我们来混淆打包吧
混淆:
-keep class org.xwalk.core.** { *;}
-keep class org.chromium.** { *;}
-keepattributes **
以上是其官网提示混淆规则,但打包时仍存在问题,添加下方后解决
-keep class junit.framework.**{*;}
哟哟哟,切克闹
接下来会发现,apk大了40M~有木有,让我们打开apk
Arm和X86多出来的两个.so动态库,每个大概占了20m大小,这边官方推荐的是分别打包上传到谷歌市场,不同用户手机处理器下载不同版本,但是这边项目非上线版的,故而没有去选择
当然,还有官网共享模式可以选择
分别打包时,在gradle中声明即可
productFlavors {
armv7 {
ndk {
abiFilters "armeabi-v7a"
}
}
x86 {
ndk {
abiFilters "x86"
}
}
}
依赖中添加(可去官网下载不同版本库导入即可)
X86Compile project ''
Armv7Compile project ''