开发者社区> 馨语随风飞> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

XWalkView+html 开发Android应用

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

在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控件布局。

<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方法中加入初始化代码。

//设置允许访问浏览器页面的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,代码如下。

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方法中加上初始化方法。

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

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

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

 

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

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

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

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

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

 

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML5应用框架-Lavaca介绍
Lavaca是一个全功能的HTML5应用框架,专注于快速、简便的构建Web应用。Lavaca是一个完整的构建系统,内建了配置以适应于不同的环境。随着构建系统打包HTML、CSS和JavaScript,还有一个JavaScript文档生成根据,一个单元测试框架和数个通用的JavaScript库。
653 0
HTML5应用框架-Lavaca介绍
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/8498780 HTML5应用框架-Lavaca介绍 作者:chszs,转载需注明。
592 0
uiu
HTML+CSS各类布局模式介绍
HTML+CSS各类布局模式介绍
27 0
html+css实战85-综合案例1
html+css实战85-综合案例1
25 0
html+css实战83-显示模式-继承性
html+css实战83-显示模式-继承性
28 0
html+css实战86-综合案例2
html+css实战86-综合案例2
31 0
html+css实战50-通配符
html+css实战50-通配符
51 0
html+css实战48-类选择器
html+css实战48-类选择器
20 0
+关注
馨语随风飞
毕业于211院校四川农业大学地理信息系统专业,毕业后从事GIS相关研发7年,熟悉C#、JAVA和前端开发,在GIS领域对地理空间算法有一定的个人认识和见解。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Android组件化实现
立即下载
Android插件化:从入门到放弃
立即下载
《深入探索Android热修复技术原理》
立即下载