|
|
知识路径： > 电子商务系统程序设计基础 > 电子商务系统建设 > B/S结构程序设计 > WebApp开发 >
|
|
相关知识点：1个
|
|
|
|
|
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得到广泛应用的优势之一。
|
|
|
|
|
|
|
