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



 写点什么

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 开发模式

五分钟创建指南针应用

结语

评论

每日一R「08」类型系统（二）

RocketMQ高可用设计之消息发送重试

RPC与REST对比指南

Redis分布式锁-觉悟吧，红锁！

leetcode 128. Longest Consecutive Sequence 最长连续序列(中等)

文件管理-Linux系统VIM编辑

App切换到后台后如何保持持续定位？

面试突击75：SpringBoot 有几种读取配置文件的方法？

【云原生】SpringCloud Alibaba 之 Nacos注册中心实战

小菜鸟河北联通上岗培训随笔二

再见MybatisPlus，阿里推出新ORM框架！

C++继承中的同名成员处理方式与同名静态成员处理方式

Java基础之Java枚举

docker下，极速搭建spark集群(含hdfs集群)

加码企业服务，阿里云发布计算巢加速器

开源一夏 | 使用 Three.js 实现"雪糕"地球，让地球也凉爽一夏

开源一夏|聆听信通院何所长开源生态发展的所记所思

Java基础知识（一些需要注意的点）

STM32入门开发：编写XPT2046电阻触摸屏驱动(模拟SPI)

[极致用户体验] 用户体验好的 Button，在手机上不应该有 Hover 态

干货|语义网、Web3.0、Web3、元宇宙这些概念还傻傻分不清楚？（下）

【Java】：你知道字符串的格式化输出吗？

不是吧，还有人不知道三目运算符的BUG

春意盎然，适合“二叉树剪枝”

Web3 结算协议 Zebec Protocol 的商业模式与发展前景一览

【数独 1】不回溯，试试候选数法1ms高效解数独谜题-C++实现

彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-项目入口与路由EP01


	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下载