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

相关文章
|
3天前
|
IDE 开发工具 Android开发
安卓与iOS开发对比:平台选择对项目成功的影响
【9月更文挑战第10天】在移动应用开发的世界中,选择正确的平台是至关重要的。本文将深入探讨安卓和iOS这两大主要移动操作系统的开发环境,通过比较它们的市场份额、开发工具、编程语言和用户群体等方面,为开发者提供一个清晰的指南。我们将分析这两个平台的优势和劣势,并讨论如何根据项目需求和目标受众来做出最佳选择。无论你是初学者还是有经验的开发者,这篇文章都将帮助你更好地理解每个平台的特性,并指导你做出明智的决策。
|
1天前
|
API Android开发 iOS开发
安卓与iOS开发中的线程管理对比
【9月更文挑战第12天】在移动应用的世界中,安卓和iOS平台各自拥有庞大的用户群体。开发者们在这两个平台上构建应用时,线程管理是他们必须面对的关键挑战之一。本文将深入探讨两大平台在线程管理方面的异同,通过直观的代码示例,揭示它们各自的设计理念和实现方式,帮助读者更好地理解如何在安卓与iOS开发中高效地处理多线程任务。
|
3天前
|
开发框架 Android开发 iOS开发
探索安卓与iOS开发的差异:构建未来应用的指南
在移动应用开发的广阔天地中,安卓与iOS两大平台各占半壁江山。本文将深入浅出地对比这两大操作系统的开发环境、工具和用户体验设计,揭示它们在编程语言、开发工具以及市场定位上的根本差异。我们将从开发者的视角出发,逐步剖析如何根据项目需求和目标受众选择适合的平台,同时探讨跨平台开发框架的利与弊,为那些立志于打造下一个热门应用的开发者提供一份实用的指南。
14 5
|
2天前
|
搜索推荐 Android开发 UED
安卓开发中的自定义视图:打造个性化用户界面
【9月更文挑战第11天】在安卓应用开发领域,自定义视图是实现独特用户体验的基石。本文将引导你通过一个简单的自定义视图示例,探索如何从零开始创建并应用自定义组件,以增强你的应用界面。我们将一起学习如何扩展View类,重写onDraw方法,处理触摸事件,并最终在我们的安卓项目中使用这个自定义视图。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供清晰的步骤和实用的技巧,帮助你提升用户界面设计的能力。
|
3天前
|
开发工具 Android开发 Swift
探索安卓与iOS开发的差异:从新手到专家的旅程
在数字时代的浪潮中,移动应用开发已成为连接世界的桥梁。本文将深入探讨安卓与iOS这两大主流平台的开发差异,带领读者从零基础出发,逐步了解各自的特点、开发环境、编程语言及市场策略。无论你是梦想成为移动应用开发者的初学者,还是希望扩展技能边界的资深开发者,这篇文章都将为你提供宝贵的见解和实用的建议。
|
1天前
|
Android开发 开发者 Kotlin
告别AsyncTask:一招教你用Kotlin协程重构Android应用,流畅度飙升的秘密武器
【9月更文挑战第13天】随着Android应用复杂度的增加,有效管理异步任务成为关键。Kotlin协程提供了一种优雅的并发操作处理方式,使异步编程更简单直观。本文通过具体示例介绍如何使用Kotlin协程优化Android应用性能,包括网络数据加载和UI更新。首先需在`build.gradle`中添加coroutines依赖。接着,通过定义挂起函数执行网络请求,并在`ViewModel`中使用`viewModelScope`启动协程,结合`Dispatchers.Main`更新UI,避免内存泄漏。使用协程不仅简化代码,还提升了程序健壮性。
7 1
|
3天前
|
Linux Android开发 iOS开发
探索Android与iOS开发:平台之战还是互补共生?
在移动应用开发的浩瀚宇宙中,Android和iOS这两大星系始终吸引着无数开发者的目光。它们各自拥有独特的引力场,引领着技术潮流的方向。本文将穿梭于这两个平台的星际空间,揭示它们背后的力量对比,以及如何在这两者之间找到平衡点,共同推动移动应用开发的进步。
13 1
|
JavaScript 前端开发 Java
html5 开发android
引用:http://www.cnblogs.com/qianru/archive/2012/02/27/2369526.html ● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi。
990 0
|
移动开发 数据库 Android开发
html5 开发 android 注意点
引用:http://yarin.blog.51cto.com/1130898/614512 http://www.mhtml5.com/ 《Android应用开发新路线——用HTML5开发Android应用程序》 android的HTML5应用程序概述 如何适配多分辨率的android设备 !...
841 0
|
移动开发 JavaScript Java