基于混合模式(Hybrid App)移动终端设计的方法_app移动终端设计

基于混合模式(Hybrid App)移动终端设计的方法由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“app移动终端设计”。

基于混合模式(Hybrid App)移动终端设计的方法

摘要：随着智能移动终端的普及，移动学习（M-learning）与大规模在线教育（MOOCs）进入实用阶段，如何让移动学习客户端能兼具原生App的良好交互，又能够利用浏览器的高效和灵活性，这里提出了一种采用网页渲染Web App与Native App混合模式移动学习的客户端实现方案，能够很好的融合浏览器模式与移动学习App的优点。

关键词：移动学习 浏览器 原生APP 混合模式

中图分类号：TP391.7 文献标识码：A 文章编号：1007-9416（2015）04-0148-02 网页渲染Web App与Native App混合模式（Hybrid App）

混合型应用（Hybrid App），是指在原生客户端中嵌入基于前端技术建构HTML页面，因此它就不再需要调用移动设备中的浏览器进行操作了，可以这样理解，将Hybrid App视为一个“容器”，其核心是基于HTML、CSS、JavaScrit或前端框架打造的页面视图。含有静态文件资源的学习内容页面可以存储在移动学习服务器端，让动态数据通过Ajax的方式在页面视图与移动应用中传输[1]。

采用Web App与原生App混合模式（Hybrid App）核心层面是解决跨平台与硬件应用的问题；针对不同平台，只需要开发与维护核心部份，即具有“容器”性质的本地应用部分。让具体应用功能安排给一套页面视图来实现。

1.1 主框架用原生App实现

采用原生App模式进行移动学习客户端的开发，而不是以浏览器模式作为载体的原因是：

第一，要保证快捷高效的移动学习质量，应当有良好的用户体验。移动学习程序的主框架原生App化，将软件的主体交互、UI都用各移动操作系统提供的SDK来实现，可以保证客户端程序的纯净性、易用性和优雅性。

通过iPhone 4S上对LLVM（底层虚拟机）和Nitro（Nitro是一个web2.0的ruby开发框架）的运行效率进行了对比实验。结果如下图1：

在实验中可以看到，native应用差不多比js执行方式快4.5倍[2]。对于要进行频繁计算的场景，比如主框架管理的页面之间的页面切换动画等，采用原生app有明显的优势。

第二：采用SDK开发客户端，能够最大限度的采用移动客户端的开发方案来实现移动学习客户端，从而使用系统所提供的一切硬件资源来实现功能，而不受制于浏览器提供的能力。这里需要注意的重点，是开发过程中一定要贴合移动客户端的特点来进行设计和创新。

第三：采用原生App框架来管理各个子页面，对于数据库、本地文件的存储和管理都更加灵活，对于实现学习资料的存储，收藏，分享等独特的功能更加有优势。

1.2 置放学习内容的页面使用独立的网页渲染

第一，网页的渲染系统高效强大：教学文字和图片内容的展示，要写出适应各种教材的排版，需要进行大量的客户端开发。对网页排版系统来说，经过多年的开发完善已经非常强大。客户端的大多数基础控件的排版算法，都在有意无意的参考网页的实现。在教学内容的最终展示页面，用网页来进行渲染，在性能和排版通用性上是远优于客户端采用基础控件实现。对已有的学习资源，用网页的形式也能够很好的实现兼容。对于一个学习客户端来说，占最大比重的应该是内容。内容页面采用平台无关的网页来实现，可以减少跨平台的开发量。

第二，对于多媒体内容的调用，网页模式有较高兼容性，易于实现，现在移动端主要采用两种方式：

一是adobe公司从PC上移植来的flash，它的好处是现有资源多，但缺点很致命：耗电和性能。在pc上大行其道的flash技术，在移动端已经肯定败给了HTML5，它从一开始就没有被IOS和WP原生支持。而在Android上，adobe已经宣布不再支持Android系统的flash版本开发，这个问题将直接导致移动学习的平台上的flash类型课程无法在线使用，所以我们建议在移动端上可以彻底抛弃flash的使用。[3]

二是采用HTML5技术。HTML5是用于替代HTML 4.01 和 XHTML 1.0的新标准版本；目前仍处于发展阶段，现在主流的移动浏览器内核如webkit（android和IOS），Trident（WP）都支持HTML5 技术。HTML5提供了间单有效的对多媒体音频、视频、动画等内容的支持。而且HTML5还有一个好处，它可以说是具有与操作系统无关性，因为IOS，Android，WP对HTML5的支持也越来越好，这些组件使用非常方便，开发成本也很低。比如一段教学视频，学习者点击之后通过网页的形式就可以打开，其实在网页上只用一个简单的标签即可实现。

例如HTML5在 Web 页面中嵌入视频的语法如下：

这样向学习网站添加视频很简单，不用第三方插件或嵌入其他的代码，仅此一个简单的标记就能实现。所以HTML5 规范能够让开发人员为移动学习的平台嵌入多媒体资源，并让IOS 产品（iPhone、iPad）以及android、WP移动终端产品轻松访问[4]。

三大操作系统都提供给开发者现成的网络浏览能力的组件。IOS中有UIWebView组件，Android中有WebView组件，WP中有phone：WebBrowser组件。不同操作系统的移动学习客户端，引入一个对应网页组件加载网页代码就可渲染内容页面。比如以上置入视频的例子，这样客户端对于教学音频、视频的支持几乎是零开发量。

1.3 网页调用原生app的能力

问题：网页部分怎样调用硬件资源，如摄像头，陀螺仪等；怎样调用第三方提供的接口？

（1）移动学习的平台是一种众多、开放、全新的学习交流平台，客户端接口应当有适应各种开放平台的接入能力。

（2）以倡导个性化为主要理念而产生的UGC（user generated content），是在WEB2.0环境下让学习者将自己的内容通过学习的平台进行展示或者提共享给其他用户的一种的新方式[5]。随着M-Learning及MOOCs在中国的发展，微课、MOOCs将会吸引一大批学习有成功体验的人参预进来，他们非常愿意别人分享自已的成功经验供他人调用，客户端接口应当具有简单有效地支持传送各种类型数据的能力。

（3）已有的web app的劣势之一是无法访问移动设备的硬件资源，怎么来搭建web app和native app部分的桥梁，解决这个劣势？

本文的解决思路是：对于第三方平台提供的应用程序api或原生app中的api，借助各个平台提供的网页和原生代码交互方案，将这些接口同时提供给原生App部分和网页部分使用。以下是一个Android系统的案例：

比如有一套移动学习的平台的接口SDK类叫MOOCsApi，它有一个函数public void doSomething（）。

在android客户端代码中注入js2java接口到网页

……

MOOCsApi api = new MOOCsApi（）

{ Public void doSomething（）

{Log.d（“test”，“do something”）；

}}……//创建MOOCsApi对象

webView.addJavascriptInterface（api，“MOOCsApi”）；

//将该对象注入网页中，并命名为MOOCsApi

当网页上调用这个doSomething函数时，可以这样写代码：

……

window.MOOCsApi.doSomething（）；//网页拿到注入的MOOCsApi对象，调用它的doSomething方法

……

运行结果：网页中执行MOOCsApi.doSomething（）之后，可以在DDMS（Dalvik Debug Monitor Service，是 Android 开发环境中的Dalvik虚拟机调试监控服务）的Log监控区中看到，由网页调用的原生app接口，得到了“do something”这个打印。证明可以从网页调用原生的api接口。

以这种调用为基础，还能引申出一种更好但稍复杂点的双向调用方式。客户端注入一个带参数的函数给网页调用，网页可以将需要传递的数据组装成JSON字符串，并且将一个回调函数包装成一段js字符串作为参数传给客户端，客户端可以拿到网页传递的JSON结构的数据，可以在调用webview的loadurl执行网页传过来的js函数，将结果回调给网页，完成双向调用。关键代码如下：

……

MOOCsApi api = new MOOCsApi（）

{ Public void doSomething（String jsonString，String callBackFunctionString）

{JSONObject jsn = new JSONObject（jsonString）； //客户端可以得到网页由json传递来的数据

……

JSONObject data = new JSONObject（）；

data.put（“result”，“result back to web ”）；//客户端需要返回的数据放进JSONObject中

String js = “javascript：（” + callBackFunctionString + “.call（this，＼”“ + data.toString（）.replace（”＼“”，“＼＼＼”“）+ ”＼“））”；

mWebView.loadUrl（js）；}}

webView.addJavascriptInterface（api，“MOOCsApi”）； ……

在网页端，采用如下的代码调用：window.MOOCsApi.callbackFromNative = function（callbackId，args）{

var callback = window.MOOCsApi.callbacks[callbackId]，argsJson = JSON.parse（args）；

if（callback）{if（argsJson.succ）{

if（callback.succe）{callback.succe（argsJson.msg）；

}} else {if（callback.fail）{callback.fail（argsJson.msg）；

}}if（！argsJson.keep）{

delete window.MOOCsApi.callbacks[callbackId]；}}}；

通过这种网页和原生App部分的双向调用，可以将网页代码和原生App代码很好的结合起来，双向调用，解决网页部分和原生App部分的交互。特别注意，这部分是网页中需要封装适应各个平台的，但是如果封装得当，开发量不大，但带来的好处是十分明显的。结语

基于以上三个技术要点，所描述的移动学习客户端系统架构图2所示：

从图中可以看到，移动学习客户端采用原生App作为容器，它包含的各个子页面或者模块可以采用原生SDK实现，也可以采用网页实现。原生App代码管理它们之间的交互和生命周期。原生App部分可以和服务器交互，也可以通过网页的特性连接服务器。对于各种通用接口或第三方接口，采用原生App和网页双向调用方案包装成Api供两部分使用，这套方案也可以解决原生App代码和网页代码的交互，是两部分成为一个整体。

系统分解为多个子模块或子页面，它们采用何种模式可以遵循以下几个要点：

（1）需要利用重力加速器、摄像头等硬件设备建议采用原生App实现。

（2）如果页面中的内容部分相对独立、用作内容展示和查看，采用网页渲染。

（3）与网络无关部份用原生App实现。

（4）性能要求严格的情形时，采用原生App实现。

基于网页渲染与原生APP混合模式的移动学习客户系统，既具有灵活性又具有较好的体验性。它解决了纯网站基于浏览器模式的体验问题，将占比最大的内容页采用网页编程，利用网页渲染的跨平台特性。

参考文献

[1]Be For Web译 C7210.前端开发者的-跨平台移动应用开发策略及工具Be For Web Translation C7210.Web Developer’sCro Platform Mobile Application Development Methods and Tools[EB/OL].http：//beforweb.com/node/22/.[2]Why mobile web apps are slow [EB/OL].http：//sealedabstract.com/rants/why-mobile-web-apps-are-slow/.Steffen Itterheim 2013.[3]cnBeta.Adobe确认Flash将不支持Android 4.1 [EB/OL].http：//www.daodoc.comBeta.Adobe Confirmed That Flash Will Not Support Android 4.1.[4]如何使用HTML5嵌入视频.ieFans.Net[EB/OL].http：//www.iefans.net/html5-qianru-shipin/.How To Use The HTML5 Embedded Video.ieFans.Net.[5]赵宇翔，朱庆华.Web 2.0环境下影响用户生成内容的主要动因研究[J].中国图书馆学报，2009，35（9）：107-116.