什么是流應用？
小伙伴們是不是很期待用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框架的項目。
來看下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>
代碼寫完之后來看下他的效果，通常我會在開發過程中把開發窗口改成邊改邊看模式，這樣能很快看出來你編寫代碼之后的效果。
邊改邊看模式的壞處就是開發窗口太小了有木有？看不全代碼，我們還可以使用模擬器調試代碼，我這里下載了一個Xcode，所以我一般用模擬器調試的時候會用到iOS的模擬器。
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里面自帶的，但是我們也可以自定制，下篇文章里面會介紹
<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
好了今天就先學到這里面吧，大家可以根據官方提供的學習資料去一個個試驗下。
下集預告網易新聞客戶端界面搭建
未完待續。。。
