XWalkView+html 开发Android应用

在Android开发中有时候为了开发简洁和方便移植，采用了Html+WebView的开发模式，然而Android自带的WebView控件是调用的本机的浏览器内核，有些版本较老的手机浏览器和手机性能都不能满足需求(表现在html5不兼容、体验不流畅等地方)。

XWalkView是一个基于Chrome内核的移动端浏览器控件，官方介绍是为了保证在所有机器上Html体验一致(官方网站：https://crosswalk-project.org/)。

下面说说集成的方法，开发过程中遇到过很多坑，记录下来希望对同样使用这款控件的人有用，也给自己留个笔记。

首先，去下载需要的控件版本，地址：https://crosswalk-project.org/documentation/downloads.html，有很多选项可以选，这里我使用Android webview(x86) 32位的(模拟器使用，实体机请下载ARM，如图1)。

图1

下载下来后是一个Android工程，打开eclipse，导入这个工程(见图2)。

图2

自己新建一个Android项目，加入以下几个权限。

/*网络访问权限*/
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    
/*磁盘访问权限*/
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

再将activity_main.xml中的控件先移除，加入XWalkView控件布局。

?

1 2 3 4 5 6

<org.xwalk.core.XWalkView         xmlns:android="http://schemas.android.com/apk/res/android"         android:id="@+id/xwalk"         android:layout_width="fill_parent"         android:layout_height="fill_parent" > </org.xwalk.core.XWalkView>

对应的MainActivity.java的OnCreate方法中加入初始化代码。

?

1 2 3 4 5 6 7

//设置允许访问浏览器页面的js方法 XWalkPreferences.setValue("enable-javascript", true); XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);   //获取XWalkView 控件，并让它访问百度 XWalkView xWalkView = (XWalkView) findViewById(R.id.activity_main);             xWalkView.load("http://www.baidu.com", null);

此时系统是找不到XWalkView 引用的，需要将下载的crosswalk-webview工程作为library引用(见图3)。

图3

 

到此，运行工程，一般来说应该能看到主页加载了百度首页，这里只是一个测试，表明我们已经集成了XWalkView控件。

 

下面写下如何实现自定义的Html JS和Java后台互操作。这个和WebView提供的Java和JS互操作写法基本一致，不同点在于引用部分。

第一部分，JS调用Java

创建一个类JSServer，代码如下。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

package com.example.Service;   import org.xwalk.core.JavascriptInterface; import org.xwalk.core.XWalkView;   import com.example.webview.R;   import android.app.Activity; import android.content.Context;   public class JSService {     Context context;       public JSService(Context c) {         context = c;     }           /**      * 跳转到指定的url      * @param url      */     @org.xwalk.core.JavascriptInterface     public void GoToUrl(String url) {         Activity activity = (Activity) context;         final XWalkView walkView = (XWalkView)activity.findViewById(R.id.activity_main);         final String httpUrl=url;                   walkView.post(new Runnable() {             @Override             public void run() {                 walkView.load(httpUrl, null);             }         });         } }

需要注意的就是引用的是上述两处标黄的地方。然后在MainActivity.java的OnCreate方法中加上初始化方法。

?

1 2	xWalkView.addJavascriptInterface(new JSService(MainActivity.this),                 "AndroidJS");

"AndroidJS"就表示Html中js调用时候的方法名，js可以这么写。

?

1 2 3 4 5

<script>     function goto(url){         AndroidJS.GoToUrl(url);     } </script>

 

第二部分，Java调用Html中JS方法

假设js中有这么一个方法。

?

1 2 3 4 5

<script>     function showMsg(name,msg){         alert(name+"说："+msg);     } </script>

Java需要调用这个方法，直接这么写。

?

1	xWalkView.load("javascript:compare('张三','能看到xWalkView弹出的消息吗？')",null);

 

至此，xWalkView的基本使用方法记录完毕，希望对看到这篇博客的人有所帮助。这应该是在现在公司写下的最后一篇博客了，明天即将离职，愿自己能在新的公司过的更开心一些。

更多个人工作中的项目请访问我的个人网站：www.88gis.cn