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

阅读数：11192 2012 年 3 月 30 日 00:00

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 页面的 <script> 标签内。

编写 Rexsee 客户端，实际上就是编写 Rexsee 所能理解、渲染的 HTML、CSS 和 Javascript 代码。与浏览器不同， Rexsee 这个“浏览器”除了支持 Webkit 支持的所有对象外，又扩展了 100 多个 Javascript 对象及相应的 2000 个方法和事件。

  • 界面：Rexsee 的页面设计支持 Web 布局和原生布局两种形态。

    • 针对于原生布局，可以通过 Javascript 语言构造出 Android SDK 中的布局和基本对象，结合相应的触屏事件，可以有很好的用户体验。且支持 2D 和 3D 的绘图功能。

    针对 Web 布局有两个不同类的对象，一是页面内对象，一是页面外对象。

    • 页面内对象指的是网页对象，如表格、DIV 层、图片、画布等。可以用 CSS 来控制其样式，其渲染效果由 Webkit 引擎负责展现。
    • 页面外对象是指网页以外的元素，如各种 Bar，对话框（Dialog），弹出窗口等。使用 Rexsee 的样式表定义，如该对象的位置、宽、高、透明度、颜色、字体等。页面外元素的样式是通过相关对象的样式设置方法来操作的。
  • 功能调用：同时支持同步和异步两种调用方式。实现多媒体支持，定位、位置服务，传感器，存储，蓝牙、wifi，以及推送和通知等功能。
  • 交互：通过 Javascript 的事件接口、Rexsee 的事件接口以及 Rexsee 私有协议实现。
    • 特别指出，私有协议是通过诸如：rexsee:info；rexsee:about 等；
    • Rexsee 的事件接口已经由 Rexsee 内置注册，使用时只需在相应的事件函数中编写用户代码即可，在事件触发时，用户代码会被执行。
  • 调试：和原有的 Web 前端开发一致。同时，Rexsee 本身也提供了异常事件，用于捕捉错误。
  • 编译：整个过程其实就是将 Rexsee 代码和 Rexsee 客户端关联的过程。
    • 可以体现在 B/S 架构下，只需将 Rexsee 代码所在的 URL 和 Rexsee 客户端首页绑定。这种架构下，Rexsee 代码实际上是部署在服务器端，客户端体积小，无需下载更新即可实现应用升级。
    • 也可以在 C/S 架构下，需要将 Rexsee 代码、资源文件打包进 Rexsee 客户端，这种架构模式更加类似于原生应用，完全摆脱网络束缚，启动和运行效率较高。
    • 同时，Rexsee 还提供了 B/C/S 混合架构模式，即整合 B/S 和 C/S 的优势。

对于开发者而言，只需在掌握 Web 前端开发的基础上，按需选用 Rexsee 提供的 Javascript 对象，按照 Rexsee 对象的方法、事件编写代码便可实现相应功能。

Rexsee Hello World

Rexsee 开源技术社区在去年年底推出在线开发服务，登陆社区并访问“项目中心”就可在线创建、开发应用。同时，该服务更强化了开发者之间的应用源码分享。在 Rexsee 项目中心，我们可以很方便的在线实现第一个 Hello World 程序。

进入项目中心（ http://www.rexsee.com/project/index.php）后，点击左侧头部的“创建新项目”开始咱们的 Hello World 应用创建。只需在对应的信息录入框中填写应用信息，并勾选权限设置即可创建成功。

编写 index.html 页面，输入如下代码：

<html>
    <head>
        <title>Rexsee Hello World</tiltle>
        <script type=text/javascript>
            //Rexsee 代码从这里开始 
            window.onRexseeReady=function(){
                rexseeDialog.toast('系统加载完毕！');// 出现后随即消失效果 
            }
        </script> 
    </head>
    <body></body>
</html>

说明：

  • Rexsee 提供的是 JS API，可以在 HTML 中加入 <script type=text/javascript></script> 标签；也可以在外部文件中添加 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 开发手册：

结语

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

批注：

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

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

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

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

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

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

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

文章版权归极客邦科技 InfoQ 所有，未经许可不得转载。
Android《架构师》月刊语言 & 开发架构

评论

发布