深度支持Android平台——基于Rexsee的移动Web应用实现_Android/iOS_叶江

QCon 演讲火热征集中，快来分享技术实践与洞见！了解详情 



 写点什么

2008 年 11 月，《连线》杂志主编 Chris Anderson 的《Web 已死，Internet 永生》一文在移动互联网大幕拉开之际引起轩然大波。应用交付的转变注定了传统 Web 模式已不再满足用户的需求与体验，Web 应用向移动终端的渗透变得异常重要。

对于需要吸引不同群体用户，满足不同业务需求的应用而言，如何使用一种实用、成本合理，且可支持大量应用的开发方式来实现我们的移动愿景？在很多情况下看来，答案就是使用 Web 技术。

伴随着移动设备与网络结合紧密度的提升，移动平台的广泛支持，以及以 HTML5 为驱动的 Web 技术不断演进发展，以 Web 为中心的移动应用趋势愈发明显。原生应用和移动 Web 应用的界线也开始逐步缩减。

同时，众多移动 Web 开发框架的升级发展也加速了 Web 应用向移动终端的渗透。国内开源的移动 Web 开发平台 Rexsee（ www.rexsee.com ）就是很典型的例子，它基于大量的扩展 API，通过 Javascript 实现 Web 应用对移动终端功能的直接调用，建立起了 Web 应用与移动终端的桥梁。

模糊 Web 应用与原生应用界线

原生应用，也就是 Native App，可以充分的发挥硬件设备和操作系统的功能特性，并可以完全不受网络限制，运行效率高，且在用户体验方面有着突出优势。但同时，因为技术门槛的原因，原生应用在具体实现上需要面对开发周期较长、成本较高、调试与发布以及后期管理维护相对复杂的问题。

对比 Web 应用，虽然在复杂的用户交互界面效果，以及对硬件功能的实现方面有着明显劣势，但使用标准化的 Web 技术为开发者带来了很大的自由度、广泛的应用范围和低廉的成本。

但即便如此，以浏览器为平台的 Web 应用相较于原生应用仍旧面临着诸多难以逾越的困境，其中最明显的则是对网络的依赖以及对移动终端的功能支持。

让Web 应用脱离网络，超出浏览器范围运行，并可直接调用移动终端功能。基于这样的价值实现，Rexsee（ www.rexsee.com ）通过实现一种混合应用的形态，进一步模糊了原生应用与 Web 应用的界线。

Rexsee 支持开发者以标准化 Web 开发模式，也就是使用 HTML5、CSS3 和 JavaScript 开发，并可通过在线编译生成原生应用客户端，快速实现移动应用。

以 Webkit 为内核，在应用中保留浏览器元素，强化 HTML5 在浏览器之外的高度交互特性。
基于原生开发，扩展接近 2000 个 API，通过 Javascript 直接调用移动终端功能。
符合 W3C 标准，完全兼容 Sencha Touch、jQuery Mobile 等第三方 JavaScript 工具包。
提供云端应用与本地应用的不同展现形态，可完全脱离网络运行。

跨平台的取舍价值

iOS 和 Android 的首当其冲，Symbian、黑莓、Meego、WebOS 的夹缝求生，多种移动操作系统平台在当前的移动互联网中各自有着大批用户支持。摆脱平台和硬件环境的差异，让应用适配于全部平台，成为了移动 Web 应用一开始就需要承担的责任。

降低了对平台和底层的学习成本，提高代码复用以及最终应用交付的适用范围，这是跨平台的优势所在。但是，劣势同样明显：为兼顾不同平台，开发框架会相对臃肿，开发模式也会被动调整；其次，对于不同硬件功能的调用难免会因为迎合不同功能交集而做出舍弃，无法全面实现。

“一次开发，到处运行”成为了开发人员期望实现但又难以做到的问题。基于这样的一个鱼与熊掌的取舍，Rexsee 选择深度支持Android 平台，从而保证了高效同步的开发方式，以及全面功能的应用交付。截至目前为止，Rexsee 提供了接近2000 个扩展API，覆盖95% 的Android 原生功能实现。

同时，针对于目前移动Web 开发框架所面对的一个通病，即缺乏对系统原生UI 控件的调用能力，难以实现等同于原生应用的界面展现这一问题，Rexsee 在最新发布的2.8 版本里（infoQ 报道： http://www.infoq.com/cn/news/2012/02/rexsee2.8-release ）扩展多个对象，主要用于创建和管理原生界面元素，支持 Android 系统的原生 UI 布局（目前已支持 Android SDK Platform API8 的全部布局）。

开发者可以通过 JS 直接生成 Android SDK 中定义的布局对象和基本对象，对这些对象通过设置样式属性可以很灵活的控制其样式，完全实现等同于原生应用的界面展现与交互体验。

基于 Rexsee 的标准化 Web 开发模式

基于 Rexsee 的 Android 应用可以使用标准化的 Web 开发模式进行开发。所有的 Rexsee 代码仅体现在 Web 前端，放在 HTML 页面的标签；也可以在外部文件中添加 JS 代码，然后引用；

本段代码中用到了 window.onRexseeReady=function（），即当系统加载完毕后，自动执行{}中的 JS 语句；

rexseeDialog.toast()，这行代码执行时会弹出一个随即消失的对话框；

随后，利用 Rexsee 开发版可以方便的查看应用效果并快速调试。

图 1. Rexsee Hello World**** 应用截图

在代码编写完成之后，点击项目右上角的“编译”按钮就能直接获得一个 APK 下载地址和该应用的二维码图形。咱们的第一个应用开发流程也就全部结束，你可以将编译完成的 APK 应用投放到任何一个第三方应用市场，并加以推广和运营。

除了基于项目中心的在线开发，你也可以在本地进行。只需将上面示例中的代码编写到 index.html 文件中，然后打包为 zip 格式文件，再利用 Rexsee 的在线编译功能实现封装，同样获得 APK 程序。

理论上你可以把除了后台代码之外的东西都打包到 ZIP 包里，比如一些图片，音视频文件，或者 HTML 的框架文件，CSS 文件，JS 文件。但考虑到安全、网络速度、流量、交互体验等各方面需求，建议根据具体应用项目来安排。

五分钟创建指南针应用

在熟悉了一个简单的应用开发流程以后我们可以结合 Rexsee 的扩展对象，快速实现一个具体的 Android 应用。在此，我们以指南针应用为例。

首先需要开启 Android 的传感器功能，利用 Rexsee 的“rexseeOrientation.start()”，然后把方向改变时触发的事件写上。

复制代码

  
function onOrientationChanged(){ // 方向传感器事件, 即当方向发生改变时触发的动作
   var x = rexseeOrientation.getLastKnownX();
   x = 90 - x;
   document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
}

其次则是处理应用展现中的图片问题，只需要找两个好看的图片，一个罗盘，一个指针就可以搞定。

复制代码

  
<div id='Layer1'>
   <div id="northDiv"><img src="img/north.png" width="300" height="300" /></div>
   <div id="oriDiv"><img src="img/compass.png" width="260" height="260" /></div>
</div>

发布后我们就可以得到一个最基本的指南针应用。

图 2. 指南针应用截图

该应用完整源码如下。（同样是在 index 页面进行编辑）

复制代码

  
<html>
   <head>
       <style type="text/css">
           #Layer1 {
               position:absolute;
               top:20px;
               z-index:1;
           }
           #northDiv {
               position:absolute; 
               z-index:2;
           }
           #oriDiv {
               position:absolute;
               top:23px;
               left:22px;
               z-index:2;
           }
       </style> 
       <script >
           rexseeOrientation.start();
           rexseeDialog.toast('准备启动');
           function onOrientationChanged(){ // 方向传感器事件, 即当方向发生改变时触发的动作
               var x = rexseeOrientation.getLastKnownX();
               x = 90 - x;
               document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
           }
       </script>
   </head>
   <body align='center'>
       <div id='Layer1'>
           <div id="northDiv"><img src="img/north.png" width="300" height="300" /></div>
           <div id="oriDiv"><img src="img/compass.png" width="260" height="260" /></div>
       </div>
   </body>
</html>

更多详细的 JS 对象和事件说明可以在 Rexsee 社区的“手册与源码”中获取，或者直接下载 Rexsee 开发手册：

手机在线版手册： http://www.rexsee.com/rexsee/rexseeReference.apk
手机本地版手册： http://www.rexsee.com/rexsee/rexseeLocalReference.apk

结语

移动互联网大幕才刚刚拉开，原生应用与 Web 应用的并存也会在很长一段时间内持续，谁会最终占据主导其实并不重要。基于开放的平台策略，稳定提升应用性能，争取更多用户并创造更佳用户体验，将是推进这浪潮创新发展的关键所在。Rexsee 也将致力于此，不断完善，打造更加广泛的开发者基础。

批注：

[1] 出于安全考虑，浏览器无法读取本地资源，对于移动设备的很多功能不能直接调用，比如通讯录、GPS、蓝牙；基于浏览器的Web 应用严重依赖网络，一旦网络情况不佳，很多交互无法进行；由于HTTP 协议本身的限制，对于消息、推送等功能也会有所影响；……

[2] 以当前最受关注的iOS 平台和Android 平台为例。前者由于不支持js 调用，原本在Android 平台上最为便捷的开发模式需在iOS 变成一种"hack"行为，异步调用也成为了让开发者头疼而又不得不采取的选择。

[3] Rexsee 本身具备了浏览器的所有功能，能够加载任何网页代码，并渲染效果。在此之外，Rexsee 提供了本地功能的调用接口，可以实现对本地存储、通讯录、传感器、定位信息等本地功能的调用。同时，还提供了离线提交、push 推送等原生应用功能。而这些，都是普通浏览器无法做到的。

[4] Rexsee 开发版是一个专门用于调试 Rexsee 应用的软件。开发者可以访问如下链接，免费下载 Rexsee 开发版，并安装在测试用的 Android 手机，或者模拟器上。

Rexsee 开发版： http://www.rexsee.com/rexsee/rexseeDeveloper-release.apk
Rexsee 模拟器（有点大）： http://www.rexsee.com/rexsee/RexseeEmulator.rar

[5] Rexsee 的开发手册即是一个具体的 APK 应用程序，具体对象和事件函数的示例演示可在手机上直接运行。

感谢侯伯薇对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ）或者腾讯微博（ @InfoQ ）关注我们，并与我们的编辑和其他读者朋友交流。

发布

暂无评论

创作场景

深度支持 Android 平台——基于 Rexsee 的移动 Web 应用实现

模糊 Web 应用与原生应用界线

跨平台的取舍价值

基于 Rexsee 的标准化 Web 开发模式

五分钟创建指南针应用

结语

评论

TOGAF 10新鲜出炉了！

Tomcat：网络请求原理分析

IDC最新报告：澳鹏AI全生命周期数据解决方案在市场上具独特优势

课程四

redis优化系列（六）高可用集群Redis Cluster的认识

Windows Edge 浏览器的有关 URL 链接的复制粘贴

Docker下，pinpoint环境搭建

FL STUDIO20.9中文版汉化包注册激活教程

OpenHarmony加速行业应用落地，多款软件发行版正在通过兼容性测评

没日没夜做需求，就能交出满分答卷吗？

yarn add electron安装失败

在线文本代码对比

Spring Data Elasticsearch 使用示例

SqlServer主备构建探索

linux之mktemp命令

在线Excel转公式工具

《写作的逻辑》读书笔记

Amazon Aurora 读写能力扩展之 ShardingSphere-JDBC 篇

常见问题（FAQ）

如果只有一周时间，怎么快速提升线上系统的稳定性？

使用 GoRouter 进行 Flutter 导航：Go 与 Push

Flutter 网络请求 Dio 拦截器详解

H2 数据库如何以服务器方式启动

H2 数据库采用客户/服务器端连接数据的 JDBC 参数

灵感乍现！造了个与众不同的Dubbo注册中心扩展轮子

APICloud数据云3.0使用教程

Redis太难？阿里P8总结的Redis灵魂拷问70题解析，还不懂我就哭了

[Day27]-[二叉树] 遍历

融云国产化适配排坑指南


	function onOrientationChanged(){ // 方向传感器事件, 即当方向发生改变时触发的动作
	var x = rexseeOrientation.getLastKnownX();
	x = 90 - x;
	document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
	}


	<div id='Layer1'>
	<div id="northDiv"><img src="img/north.png" width="300" height="300" /></div>
	<div id="oriDiv"><img src="img/compass.png" width="260" height="260" /></div>
	</div>


	<html>
	<head>
	<style type="text/css">
	#Layer1 {
	position:absolute;
	top:20px;
	z-index:1;
	}
	#northDiv {
	position:absolute;
	z-index:2;
	}
	#oriDiv {
	position:absolute;
	top:23px;
	left:22px;
	z-index:2;
	}
	</style>
	<script >
	rexseeOrientation.start();
	rexseeDialog.toast('准备启动');
	function onOrientationChanged(){ // 方向传感器事件, 即当方向发生改变时触发的动作
	var x = rexseeOrientation.getLastKnownX();
	x = 90 - x;
	document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
	}
	</script>
	</head>
	<body align='center'>
	<div id='Layer1'>
	<div id="northDiv"><img src="img/north.png" width="300" height="300" /></div>
	<div id="oriDiv"><img src="img/compass.png" width="260" height="260" /></div>
	</div>
	</body>
	</html>

创作场景

深度支持 Android 平台——基于 Rexsee 的移动 Web 应用实现

模糊 Web 应用与原生应用界线

跨平台的取舍价值

基于 Rexsee 的标准化 Web 开发模式

五分钟创建指南针应用

结语

评论

更多内容推荐

推荐阅读

电子书

大厂实战PPT下载