什么是流应用？
小伙伴们是不是很期待用HTML5来开发App呢，在开发之前我们首先要了解一下什么是流应用？
流应用 :基于HTML5+的跨平台技术，让应用边用变下，类似流媒体，实现5秒内启动应用,它结合了原生App和Web App的优势，又优化了各自的缺点。是移动互联网的终极应用形态轻应用，说白一点他其实就是一个App+轻量级+5秒启动+跨平台+DCloud，是不是很流弊？
既然说到流应用了，那小编就在这给大家啰嗦啰嗦我为什么会选择用它来做开发：
1：差量更新+及时更新，保证应用版本始终是最新的（热更新）
2：多端发布，生成流应用的同时生成iOS、Android原生版，浏览器版、微信App和百度直达号。降低开发成本，提升开发效率
3：提高激活用户数，提高用户转化率（原生App版本迭代开发者需要重新打包上传，用户需要下载更新，导致用户流失）
我就问你流不流弊？
App的开发
我们要用HTML5开发一个App需要准备哪些呢，首先开发工具当然我这里推荐的是Dcloud公司出的HBuilder,里面提供了前端框架（MUI）它是目前最高性能和最接近原生体验的手机端框架。常用的API（HTML5+）包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API，可以方便简单的编写，并且可跨平台。
http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/93，因为它确实很好用。具体多牛逼，小编也不在赘述了，自己点开链接查看。
那我们现在已经有了开发工具了，现在开始第一个简单的App吧。看图来开始创建第一个移动App，我们在下面选择包含MUI框架的项目。
创建第一个App
来看下MUI都提供了哪些东西？
首先看一下MUI提供的带返回箭头导航栏标题
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
</body>
代码写完之后来看下他的效果，通常我会在开发过程中把开发窗口改成边改边看模式，这样能很快看出来你编写代码之后的效果。
边改边看模式.gif
边改边看模式的坏处就是开发窗口太小了有木有？看不全代码，我们还可以使用模拟器调试代码，我这里下载了一个Xcode，所以我一般用模拟器调试的时候会用到iOS的模拟器。
模拟器调试.gif
OK大家学会了创建工程和调试之后呢，我们就开始正式先来学习一下最接近原生体验的移动App的UI框架（MUI）
下面开始介绍我们项目中常用组件：折叠面板
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">Item 1</a>
<div class="mui-collapse-content">
<!-- 第1个面板中的内容 -->
</div>
</li>
</ul>
常用简单列表
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
</ul>
</div>
常见新闻列表，图片居左带有标题和正文
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
</ul>
语音输入框
<div class="mui-input-row">
<label>账号</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
搜索框
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
</div>
带清楚按钮的输入框
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
选项卡
<div class="mui-slider">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">选项卡1</a>
<a class="mui-control-item" href="#item2">选项卡2</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第1个选项卡子项</li>
<li class="mui-table-view-cell">第1个选项卡子项</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2个选项卡子项</li>
<li class="mui-table-view-cell">第2个选项卡子项</li>
</ul>
</div>
</div>
</div>
可左右拖动选项卡
<div class="mui-slider">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">选项卡1</a>
<a class="mui-control-item" href="#item2">选项卡2</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第1个选项卡子项</li>
<li class="mui-table-view-cell">第1个选项卡子项</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2个选项卡子项</li>
<li class="mui-table-view-cell">第2个选项卡子项</li>
</ul>
</div>
</div>
</div>
最最经典的底部TabBar切换
他这里面的图案都是MUI里面自带的，但是我们也可以自定制，下篇文章里面会介绍
Tab切换.gif
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
这里面有很多很多的官方提供的学习资料
http://dev.dcloud.net.cn/mui/ui/#accordion
好了今天就先学到这里面吧，大家可以根据官方提供的学习资料去一个个试验下。
下集预告网易新闻客户端界面搭建
网易新闻
未完待续。。。
网友评论
[Web浏览器] "Application Cache Checking event" /News/index.html (0)
[Web浏览器] "Application Cache Error event: Manifest fetch failed (404) http://127.0.0.1:8020/News/manifest" /News/index.html (0)