高兴建花晓慧邢溧萍
摘要：I框架是一种开源软件开发工具包（SDK），用于开发具有HTML5，CSS和的混合移动应用。开发者可使用HTML5、CSS、Typ来创建可在Adrd，OS和WdsPh上有效部署的移动应用程序。文章讨论了这三种开发模式的优缺点，阐述了如何基于I开发混合移动应用，并通过开发实例——移动微课App，证明了方案的有效性。
关键词：I；混合应用；HTML5；Aulr；Typ；Crdv
中图分类号：TP3文献标志码：A文章编号：006-8228（208）03-3-04
RsrhdplttfIdhybrdblpplt
GX，HuXhu，XLp2
（IsttutfCputrS&p;Thly，NtUvrsty，Nt22609，Ch；2IsttutfFrLus，NtUvrsty）
Abstrt：IrspsurSftrDvlptKt（SDK）frdvlphybrdblppltthHTML5，CSS，dDvlprsusHTML5，CSS，TyptrtblppltthtbfftvlydplydAdrd，OSdWdsPhThsrtldsusssthdvtsddsdvtsfthrdvlptds，dlbrtshtdvlpIdhybrdblppltAdthruhdvlptst，thblr-lssApp，prvsthfftvssfthslut
Kyrds：I；HybrdApp；HTML5；Aulr；Typ；Crdv
0引言
移动智能终端得到普及，移动学习逐渐兴起。日语学习者已不满足于书面化的资源，對在线学习资源的需求日益增加，现有的网络资源良莠不齐，难成体系，难以满足人们利用碎片化时间自主学习日语的需求。同时由于所需设备多，系统版本各异，移动学习平台的开发与维护成本较高。企业成本的增加，会间接增加日语学习者的学习费用。
可喜的是，近年来I、Crdv、RtNtv、Xr及r7等一系列跨平台移动应用框架的出现，大大减少了App的开发成本，同时又不影响用户体验，是企业移动开发的首选。本文以I框架为例，在基于对I的研究之上利用Wb技术构建一个移动微课App。
App开发模式
现如今，有三种主流的App开发模式：NtvApp、WbApp和HybrdApp。
⑴NtvApp
NtvApp是一种基于智能手机操作系统的本地化应用，静态资源下载在本地，可以支持在线或离线访问资源，具有良好的交互性和可靠性，用户体验非常优秀，是高品质产品的首选开发模式。但由于设备众多，系统版本各异，开发与维护较为复杂，App的开发成本很高。
⑵WbApp
WbApp，即网络应用。它是一种依赖于Wb浏览器，通过网络进行访问的应用程序[]。WbApp可以跨多个平台提供一致的用户界面，因为外观取决于浏览器而不是操作系统。但WbApp完全依赖于网络，当处在离线状态时，App基本无法使用，用户体验差。
⑶HybrdApp
HybrdApp是指混合移动应用，同时使用网页语言与程序语言编写，包含原生视图和Wb视图两种方式，使用方式和NtvApp一致，而又继承了WbApp实时更新、开发成本低等优点[2]。HybrdApp托管在使用WbV的本机应用程序中，用户界面操作逻辑及部分静态资源驻留本地，因而，App的部分功能可以离线使用。如表所示，HybrdApp相比于其他类型App，有很多优点。在开发成本、平台独立开发和维护所需的时间方面，HybrdApp是最好的选择[3]。
表NtvApp、HybrdApp、WbApp对比
[ NtvApp HybrdApp WbApp 跨平台 差 优 优 体验 优 中 差 开发难度 难 易 易 开发周期 长 短 短 开发成本 高 低 低 安装 需要 需要 不需要 ]
2I框架
2I简介
I是免费、开源、轻量级的HybrdApp框架，用于使用HTML5、CSS3、SASS（CSS扩展语言）和等Wb技术开发跨平台移动应用。I比较注重终端用户的体验及移动应用的交互[4]，它主要有如下几个特性。
⑴提供多种UI组件。I为开发者提供了多种Ntv风格UI组件，丰富的CSS库，包括Butt、Grd、Lst、Mu、Tb和Tl等。这些组件颜色样式繁多，界面现代化、美观，用户体验度极高。
⑵将Typ作为编程语言。Typ是的超集，因此，所有的代码都可以用于I的移动App开发。Typ允许开发者编写用于处理用户数据的复杂逻辑，以提供良好的交互式用户体验。
⑶集成到Aulr中。Aulr是一个框架，旨在实现前端驱动的动态Wb应用程序的轻松开发。该库扩展了HTML语法，并支持依赖注入、路由、表单验证、深层链接、模板化、数据绑定等功能。
⑷采用Crdv插件。Crdv针对不同平台的WbV做了扩展和封装，使WbV这个组件变成可访问设备本地API的强大浏览器，所以开发人员在Crdv框架下可通过访问设备本地API[5]。INtv是Crdv/PhGp插件的封装，开发者可通过它将所需的本地功能添加到应用中。
⑸使用简单。①I图标库Is提供许多图标供开发者使用。②I的推送服务使App能够将本地推送通知发送到另一个平台上的设备。③ILb允许同时开发和测试App，每次在开发或测试过程中进行更改时，它都能快速更新源代码，实时展现App的界面。④I拥有自己强大的命令行ICLI，用于搭建、开发以及部署I应用。
22环境搭建
⑴安装ICLI和Crdv。IApp主要通过I命令行（“CLI”）创建和开发，并使用Crdv构建和部署为本机应用程序。因此，要创建I项目，开发者需要安装最新版本的CLI和Crdv。首先安裝Nds，在官网下载Nds6或更高版本的安装包进行安装，然后继续安装ICLI和Crdv进行App开发：$pstll-rdv。
⑵创建一个I项目。安装完成后，便可创建一个空白的I项目：$strtMyIPrtbl，也可以使用I的模板如tbs、sdu、supr及tutrl等。
⑶在浏览器中调试程序。开发者可以在控制台中通过d命令进入项目文件夹：$dMyIPrt，若要在浏览器中快速预览App，可使用srv命令：$srv。
⑷部署到设备。在App开发过程中，使用浏览器或模拟器可以快速、轻松地调试App，但最终测试INtv插件或App制作完成时，App不得不在设备上进行调试以达到准确测试的目的。如果要运行App，只需在命令行运行$rdvrudrd/s-dv，之后便会产生App的调试版本，并在设备上运行。
23I懒加载
懒加载是一种设计模式，页面只在第一次启动应用时才加载。如果用户导航到新页面，那么该页面的组件将立即加载。但是，这并不意味着它总是在改变页面的时候加载组件。实际上，它只加载第一个访问页面，当我们再次访问该页面时，它不会加载。
I的懒加载方式带来许多的新特性。①懒加载能够减少程序启动时间，减少打包后的体积，让用户体验更友好的加载，更快的响应，在优化内容交付和用户体验之间达成了平衡。②避免在每一个使用到某P的Mdul或其他P中重复导入这个类（需要写一堆路径），大大的简化了代码量。③可以很方便的使用路由的功能，通过字符串y在任何想使用的地方获取某一P。④让开发过程实时编译更快。
3基于I的移动微课App——JL设计
3移动学习
移动学习（M-Lr）是指在移动电话或平板电脑上学习，其在数字化学习（E-Lr）中发挥了重要作用[6]。在信息化时代，移动学习的进步与发展已然成为必然的趋势。JL（JpsLss）是一款基于移动学习的理念，致力于提高非专业日语学习者的学习效率与兴趣的App，主要有以下几个特点：
⑴个性化学习。学习者可根据自己的能力、时间安排等调节进度，满足了学习者的个性化需求。
⑵学习时间碎片化。JL所收录的微课时长为5-0分钟，简单清晰便于记忆，利于提高学习效率，极大地满足了非专业日语学习者的学习要求。
⑶发散性内容丰富，提高学习积极性。JL研发了单词、语法、文化等多个学习模块，学习闲暇之余，可帮助学习者提高学习趣味性。
⑷适用人群范围广。移动学习是建立在移动平台上的学习方式，即所有持有移动设备的适合学习的人群都是移动学习可适用范围。
32JL架构设计
JL采用MVC架构模式（见图），Mdl层用于封装数据及处理数据的方法，由Usr、Curs、Dy、Ns组成，Usr用于存储用户数据，Curs用于存储课程数据，Dy用于存储动态数据，Ns用于存储资讯数据；V层通过HTML5、CSS实现；Ctrllr层采用Typ语言，通过方法监听和处理用户的请求，封装Srvs及API，接收基于HTTP协议的GET、POST请求，实现与Srvr的交互，另外，Ctrllr层还可以调用INtv已经封装好的Crdv/PhGp插件，实现拍照、SQLt数据库及视频播放等功能。
图移动微课App——JL架构图
33JL界面设计
JL主要特点就是精炼，延展性强，产品的逻辑是简单化、模块化。JL的首页如图2，整体设计采用大图标模式，所见即所得，风格简约。在“我的课程”里，用户可根据自己的需求与兴趣，自定义学习，可续看自己的课程。“我的笔记”可用来写自己的学习感悟、理解和想法，并且用户可以根据自己的喜好来调节字体、颜色及模式。“活动中心”为App增加了极大的推广度，其获得一定的商业价值，让用户有参与感。
图3为全部课程的页面，用户可在此页面找到各种类别的视频。“发现”是JL独特的动态模块（见图4），用户可在此模块表达自己对日语学习的所想所感，也可以通过该平台增添学习好友，促进交流，共同进步。图5是个人信息的页面，用户可在此页面方便地管理个性化学习信息。
图2首页图3课程
图4发现图5我的
34JL前后端交互
I与后端存在于完全独立的空间中，后端所使用的技术与I是完全不相关的。I不直接与后端集成，只是与它通信。为使I能够与后端交互，后端需要实现I应用可以进行HTTP请求的各种API。JL的前后端是分离的，通信通过跨域请求，页面路由由前端处理，所有数据均通过HTTP请求获得，因而前后端开发互不影响，更有利于进行维护。JL的前端中可集中所有数据，所有页面均可以访问这些数据，从而避免了重复请求获取相同数据的现象，也减少了用户等待数据加载的时间。
35JL数据库架构设计
JL数据库采用Aph+PHP+MySQL的组合，即Aph作为Wb服务器，PHP实现数据库与服务器的连接，MySQL作为后台数据库。Aph是一个开放源代码的网页服务器。由于其可以在大多数电脑操作系统下运行和具有较高的安全性而被广泛使用，是目前使用排名第一的Wb服务器[7]。若要访问MySQL数据库，JL先要利用HTTP协议发送Rqust请求给Aph，PHP根据请求访问MySQL数据库，并将读取的数据库内容封装成JSON格式，回传给JL客户端，JL客户端再对JSON解析，生成相应的页面。
36JL优化
由于Adrd系统碎片化比较严重，不同Adrd版本的Wbv的HTML5能力也有较大差异，导致I应用的一致性难以保证。为了增强JL的性能，使JL在装有低版本Adrd系统的设备上也能流畅地运行，Crssl作为渲染运行时的引擎被集成到JL中。此外，Crssl还在不同的移动系统中作为运行时引擎运行，以自动更新基于不同平台的渲染引擎[8]。为减小带宽压力，同时给用户人性化体验，JL对其所播放的视频进行编码处理。视频采用HEVC/H265编码。HEVC可提高视频编码效率，在相同的图像质量前提下，压缩率比H264/AVC高档次（hhprfl）提高一倍；支持各类规格的视频，从QVGA（320×240）到080p（920×080），直至超高清视频4320p（7980×4320）；在计算复杂度、压缩率、鲁棒性和处理延时之间妥善折中处理[9]。
4结束语
I拥有一个庞大的国际开发商和贡献者社区，促进其成长，在4年的快速发展中，I已成为世界上最受欢迎的移动应用开发框架之一。随着硬件的升级、框架的优化，IApp逐渐趋近于NtvApp的体验，以I为代表的混合移动应用逐渐变成了一种趋势。
参考文献（Rfrs）：
[]章斓基于HTML的WbApp的开发与探索[J]长沙大学学
报，20529（5）：50-53
[2]陆钢，朱培军，李慧云等智能终端跨平台应用开发技术研究[J]
电信科学，2025：4-7
[3]AKhdrprr，RGuptdBSdhyA
trduttHybrdPltfrMblAppltDvlpt[J]ItrtlJurlfCputrApplts，2058（5）：3-33
[4]RKh，MHrltGttStrtdthI[M]
Brh，UK：PtPublshLtd，206
[5]朱凱南，李艳平，申闫春等基于I和Crdv的跨平台移
动APP的研究与应用[J]电脑知识与技术，2062（）：9-2
[6]MSylrThMblWv：HMblItllWll
ChEvryth[M]US：VurdPrss，202
[7]凌质亿，刘哲星，曹蕾高并发环境下Aph与Nx的I/O
性能比较[J]计算机系统应用，20322（6）：204-208
[8]NW，XuCh，GbS，QlL，
HdRPrsDsNMblOptzdRtLbrtryAppltArhtturfrM-Lr[J]IEEETrstsIdustrlEltrs，20764（3）：2382-239
[9]朱秀昌，李欣，陈杰新一代视频编码标准—HEVC[J]南京邮
电大学学报（自然科学版），20333（3）：-
文章来源于：计算机时代