【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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

  • 2012-03-30
  • 本文字数:5865 字

    阅读完需:约 19 分钟

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 开发手册

    结语

    移动互联网大幕才刚刚拉开,原生应用与 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 )关注我们,并与我们的编辑和其他读者朋友交流。

    2012-03-30 00:0015505

    评论

    发布
    暂无评论
    发现更多内容

    IIOT WiFi7-IPQ9574/IPQ9554-QCN9274-QCN6274-4096-QAM, each Symbol carries 12bit information

    wifi6-yiyi

    WiFi7 qcn9274 ipq9574

    微信伴侣WechatTweak for mac(微信防撤回、多开助手)v3.8.5中文集成版

    影影绰绰一往直前

    Currency Assistant for Mac(货币兑换计算器)v3.6.2永久激活版

    影影绰绰一往直前

    第28期 | GPTSecurity周报

    云起无垠

    揭示API重要性,以Assistants API为例

    幂简集成

    AI API ASSISTANTS API

    可视化:最热的前端Web组态工具

    2D3D前端可视化开发

    物联网 可视化 组态软件 web组态 组态工具

    CodeWhisperer 一款好玩的 AI 插件

    亚马逊云科技 (Amazon Web Services)

    Java 人工智能 云上探索实验室 Amazon CodeWhisperer

    Tipard FixMP4 for Mac(专业的MP4视频修复工具)v1.0.6激活版

    影影绰绰一往直前

    激发创新,助力研究:CogVLM,强大且开源的视觉语言模型亮相

    汀丶人工智能

    人工智能 计算机视觉 大语言模型 视觉语言模型

    程序员编码必备Sublime Text for Mac:强大而优雅的代码编辑器

    晴雯哥

    不要仅局限于技术实现细节

    老张

    微服务架构 性能测试 技术选型 容器化

    一种可度量的测试体系-精准测试

    鲸品堂

    工具 测试 企业号11月PK榜

    Lunar Pro for Mac(屏幕亮度调整工具)6.4.5激活版

    影影绰绰一往直前

    架构探索之路-第一站-clickhouse | 京东云技术团队

    京东科技开发者

    数据库 OLAP Clickhouse 企业号11月PK榜

    Mac电脑屏幕调节亮度软件 Lunar pro 激活最新版

    胖墩儿不胖y

    Mac软件 屏幕亮度调整

    大数据平台红蓝对抗 - 磨利刃,淬精兵! | 京东云技术团队

    京东科技开发者

    测试 混沌演练 红蓝对抗 企业号11月PK榜

    【优秀MacOS视频下载软件】Downie 4最新中文版

    晴雯哥

    分布式基础概念

    派大星

    分布式 Java 面试题

    用友全球司库十问(七)|企业如何进行资金计划的经营化管理?

    用友BIP

    全球司库 资金计划

    增长实验室-ab分流的流量保护功能介绍 | 京东云技术团队

    京东科技开发者

    测试 AB实验 企业号11月PK榜 用户桶位

    KeyShot 2023 Pro for mac v12.2.1.2激活版下载

    影影绰绰一往直前

    NCH PicoPDF Plus for Mac(PDF编辑工具)v4.49注册版

    影影绰绰一往直前

    Mac FoneLab iOS Unlocker for mac(iPhone解锁工具)v1.0.56激活版

    影影绰绰一往直前

    服务器管理器怎么设置?

    Geek_f19a80

    服务器

    使用商品详情API接口获取商品数据

    Noah

    Apeaksoft Video Fixer for Mac(视频修复工具)v1.0.6激活版

    影影绰绰一往直前

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