Crosswalk入门

Crosswalk是一款开源的WEB引擎。目前Crosswalk正式支持的移动操作系统包括Android和Tizen,在Android 4.0及以上的系统中使用Crosswalk的Web应用程序在HTML5方面可以有一致的体验,同时和系统的整合交互方面(比如启动画面、权限管理、应用切换、社交分享等等)可以做到类似原生应用。现在Crosswalk已经成为众多知名HTML5平台和应用的推荐引擎,包括Google Mobile Chrome App、Intel XDK、Famo.us和Construct2等等,未来的Cordova 4.0也计划集成Crosswalk。

下载的时候有些小迷茫,不知道应该下载哪个,入门的话,还是使用下图的稳定版本好了。
CrossViewDownload

  • 集成到应用中

1.下载zip包,然后参考 Android Studio如何Import Module 即项目依赖(针对非Gradle项目,以Crosswalk为例) 中的介绍,建立Android Studio工程,并且导入到项目中。

2.在AndroidManifest.xml中增加如下权限

使用XWalkView必须开启硬件加速,修改AndroidManifest.xml

  • 基本使用

Crosswalk中用来替代WebView的控件叫XWalkView

1.layout文件写法

2.代码中使用
和其他Android的控件不同,这个类需要监听系统事件。例如:生命周期、intent、Activity result。
控件内置的Web引擎需要获取并处理这些信息。并且当XWalkView 不再需要使用的时候,在onDestroy方法中XWalkView必须显式的调用destroy方法,否则容易造成Web引擎的内存泄漏。

3.loadUrl去哪了?

上面的代码中其实已经剧透了,使用load方法即可。

4.WebViewClient?

对应WebView的WebViewClient,XWalkView中有XWalkResourceClient。

  • 调用JavaScript

不像WebView一样获取setting设置setJavaScriptEnabled为true才能执行。
Crosswalk可以直接执行js。

当然,按照Kitkat引入的方式,使用evaluateJavascript方法也是可以的。(大神们推荐)

  • JavaScript回调Java

  1. 定义js回调接口

    Caution: If you've set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available to your JavaScript (the method must also be public). If you do not provide the annotation, the method is not accessible by your web page when running on Android 4.2 or higher.
    From developer.android.com

    备注:这里的

    所在的包是

  2. XWalkView设置JavaScript可用且绑定对象

  3. 调用html执行JavaScript或直接执行Javascript调用Java

    index.html源码:

  • 高级使用

调试

Kitkat开始,Android提供了和Chrome联调功能。可以很方便的在Chrome中调试WebView中的代码。
Crosswalk使用Chromium内核当然也具备这个功能。
开启调试的语句如下:

对于Crosswalk来说,这个设置是全局的。

使用动画或者设置隐藏可见注意

默认XWalkView不能使用动画,甚至setVisibility也不行。

XWalkView represents an Android view for web apps/pages. Thus most of attributes for Android view are valid for this class. Since it internally uses android.view.SurfaceView for rendering web pages by default, it can't be resized, rotated, transformed and animated due to the limitations of SurfaceView. Alternatively, if the preference key ANIMATABLE_XWALK_VIEW is set to True, XWalkView can be transformed and animated because TextureView is intentionally used to render web pages for animation support. Besides, XWalkView won't be rendered if it's invisible.

开启动画模式:

由于设置也像调试一样是全局的,在onDestroy时记得关闭。

暂停JS timer

html代码

XWalkView对应方法:

这也在防止内存泄漏,监听系统事件示例代码中提到过:

历史记录

自动视频暂停

loadAppFromManifest

manifest.json

参考链接


发布者

《Crosswalk入门》上有31条评论

  1. 您好,我在编写这个例子的时候,Andriod设备上出现 XWalkUsers已停止运行,不知道是什么原因导致的?不知道你有没有遇到相同的问题?

    1. 一般是由于您指定的编译android版本太高导致的,比如您手机是Android4.2的,那么编译的时候却选择了5.0的版本号,比如 本来应该是 android-19 ,却使用了android-22

  2. 您好,我之前用的webview拦截html加载JS和CSS资源,webclient中有两个方法@Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
    return super.shouldInterceptRequest(view, request);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
    return super.shouldOverrideUrlLoading(view, url);
    }
    下面那个已经被废弃了 SDK20以上用上面的,我想判断http的请求方式,只能用下面的那个,也就是说20以上才能判断,请问XWalkView有没有判断请求方式的方法呢?

  3. 你好,看你写的贴帮助颇大, 请问xwalkview如何判断网络连接失败?因为xwalkview在没有网络的情况下会alert network lost,如何覆盖这个事件?谢谢

  4. 补充一下:demo使用的是arm32bit包,在4.4可运行,5.0也可以。但是挪到自己项目中,5.0系统报错,log如下:
    java.lang.UnsatisfiedLinkError: No implementation found for long com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create()
    at com.baidu.platform.comapi.util.f.b(Unknown Source)
    at com.baidu.platform.comapi.a.c(Unknown Source)
    at com.baidu.platform.comapi.c.a(Unknown Source)
    at com.baidu.mapapi.SDKInitializer.initialize(Unknown Source)
    at com.baidu.mapapi.SDKInitializer.initialize(Unknown Source)
    但是项目中没有引入crosswalk可以正常调用百度SDK的。
    有没有大神知道如何处理的?求教

  5. 使用crosswalk 播放电视剧视频时,点击全屏横屏播放(爱奇艺),然后播放完一集,在他播放广告,点击广告时他去到广告,但所有的视图被撑大,回不来,返回也一样,只能再点击全屏,再点击退出全屏才能正常显示

  6. CrossWalk的shouldInterceptLoadRequest不能拦截获取js的window.location.href跳转,请问有什么办法可以解决吗?

  7. 大神你好,我使用这个播放HTML中附带的视频,点击全屏后没有效果,请问怎么处理,已经重写那onFullscreenToggled()方法,debug发现点全屏的时候不会进来,求教.....

  8. 多谢小编的XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, true);解决了我的问题 多谢! 感激感激!!!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注