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

相关文章
|
4天前
|
编解码 Java Android开发
通义灵码:在安卓开发中提升工作效率的真实应用案例
本文介绍了通义灵码在安卓开发中的应用。作为一名97年的聋人开发者,我在2024年Google Gemma竞赛中获得了冠军,拿下了很多项目竞赛奖励,通义灵码成为我的得力助手。文章详细展示了如何安装通义灵码插件,并通过多个实例说明其在适配国际语言、多种分辨率、业务逻辑开发和编程语言转换等方面的应用,显著提高了开发效率和准确性。
|
3天前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域,自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View,以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理,进而探索内存和布局优化技巧,最终实现既美观又高效的安卓界面。
14 5
|
1天前
|
JSON Java Android开发
探索安卓开发之旅:打造你的第一个天气应用
【10月更文挑战第30天】在这个数字时代,掌握移动应用开发技能无疑是进入IT行业的敲门砖。本文将引导你开启安卓开发的奇妙之旅,通过构建一个简易的天气应用来实践你的编程技能。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你宝贵的学习资源。我们将一步步地深入到安卓开发的世界中,从搭建开发环境到实现核心功能,每个环节都充满了发现和创造的乐趣。让我们开始吧,一起在代码的海洋中航行!
|
2天前
|
缓存 数据库 Android开发
安卓开发中的性能优化技巧
【10月更文挑战第29天】在移动应用的海洋中,性能是船只能否破浪前行的关键。本文将深入探讨安卓开发中的性能优化策略,从代码层面到系统层面,揭示如何让应用运行得更快、更流畅。我们将以实际案例和最佳实践为灯塔,引领开发者避开性能瓶颈的暗礁。
11 3
|
1天前
|
存储 搜索推荐 Java
打造个性化安卓应用:从设计到实现
【10月更文挑战第30天】在数字化时代,拥有一个个性化的安卓应用不仅能够提升用户体验,还能加强品牌识别度。本文将引导您了解如何从零开始设计和实现一个安卓应用,涵盖用户界面设计、功能开发和性能优化等关键环节。我们将以一个简单的记事本应用为例,展示如何通过Android Studio工具和Java语言实现基本功能,同时确保应用流畅运行。无论您是初学者还是希望提升现有技能的开发者,这篇文章都将为您提供宝贵的见解和实用的技巧。
|
5天前
|
存储 IDE 开发工具
探索Android开发之旅:从新手到专家
【10月更文挑战第26天】在这篇文章中,我们将一起踏上一段激动人心的旅程,探索如何在Android平台上从零开始,最终成为一名熟练的开发者。通过简单易懂的语言和实际代码示例,本文将引导你了解Android开发的基础知识、关键概念以及如何实现一个基本的应用程序。无论你是编程新手还是希望扩展你的技术栈,这篇文章都将为你提供价值和启发。让我们开始吧!
|
5天前
|
搜索推荐 开发工具 Android开发
打造个性化Android应用:从设计到实现的旅程
【10月更文挑战第26天】在这个数字时代,拥有一个能够脱颖而出的移动应用是成功的关键。本文将引导您了解如何从概念化阶段出发,通过设计、开发直至发布,一步步构建一个既美观又实用的Android应用。我们将探讨用户体验(UX)设计的重要性,介绍Android开发的核心组件,并通过实际案例展示如何克服开发中的挑战。无论您是初学者还是有经验的开发者,这篇文章都将为您提供宝贵的见解和实用的技巧,帮助您在竞争激烈的应用市场中脱颖而出。
|
移动开发 JavaScript 前端开发
|
2月前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
48 1
|
2月前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
28 0