|
知识路径: > 电子商务系统程序设计基础 > 电子商务系统建设 > B/S结构程序设计 >
|
相关知识点:80个
|
|
|
|
|
WebApp是指页面应用。它是一种依赖Web浏览器,通过网络访问的应用程序。随着HTML5的快速发展、智能手机的普及,WebApp在手机应用程序的开发上得到了迅猛的发展。
|
|
|
WebApp与原有的Native App(原生态网络应用)相比,WebApp的优点在于一次性开发跨平台使用,开发成本低,周期短,内容设置限制比较小,用户总能访问到最新版本,无需手动更新需求。不足之处是性能体验有待提高,因为许多操作需要链接到互联网,因此不能离线操作,而且不能充分发挥移动硬件设备的硬件性能,用户体验上还不能完全替代Native App的功能和性能优势。目前,随着WebApp开发技术日趋成熟,其性能正在不断地改进和提升,从长远来看WebApp有着良好的发展前景。
|
|
|
|
目前,比较流行的有Cordova、MUI、PhoneGap、appMobi、WeX5等主流的构建WebApp框架。MUI是一个高性能的HTML5开发框架,从UI界面到执行效率都在极力追求原生体验,是接近Native App体验的高性能前端框架。主要特点为:轻量级别,不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K;原生UI,以iOS平台UI为基础,补充部分Android平台特有的UI控件。
|
|
|
Hbuilder工具是由DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE,该工具能够快速搭建MUI框架,实现WebApp的开发。下面给出Hbuilder工具开发MUI框架的WebApp的基本流程。
|
|
|
(1)使用HBuilder新建移动WebApp项目。启动Hbuilder,单击“文件”→“新建”→“项目”,然后选择“5+App”并输入项目名称,就直接搭建完成一个基于MUI的移动App项目。
|
|
|
(2)配置manifest.json文件。manifest.json是项目的配置文件,包含了要申请的AppID号、App的名称、版本号、首页文件、应用的图标、应用的启动图片以及需要的各种SDK。根据需要可以自行配置。
|
|
|
(3)生成含MUI的html文件。在新建HTML文件时,选择“含MUI的html”,就可以生成以MUI架构为基础的网页文件,代码如下所示:
|
|
|
|
这里mui.init()初始化函数,接收一个对象参数,用于进行页面的各种配置,例如子页面的加载、页面预加载等。如下代码,设置手势:
|
|
|
|
(4)搭建首页HTML布局。首先在body中输入“m”选择mHead,生成头部导航栏,然后在导航栏下面,输入mbody,生成页面的主体部分,其实就是一个div。页面中除了Header和Footer以外的全部内容,必须包含在body中。接着在body中,输入一个个元素,例如添加一个列表mList等。最后为每个元素添加事件,例如添加跳转页面,这里和JSP类似,要调用mui.plusReady(function(){绑定事件})函数,例如一个列表的每项实现到下一个页面的跳转,如下代码:
|
|
|
|
(5)模拟运行。在开发过程中完成某一功能,就可以进行调试,HBuilder支持多种方式,可以直接通过浏览器调试,也可以通过手机运行或通过模拟器调试,如下图所示。
|
|
|
|
|
(6)打包WebApp。一旦开发测试完成,就可以应用打包工具生成Andriod的APK文件和iPhone的IPA文件。单击HBuilder菜单导航栏的“发行”→“原生App”-“云打包”,可以看到如下图所示的对话框,打包过程非常简单,这也是HBuilder得到广泛应用的优势之一。
|
|
|
|
|