什么是流應(yīng)用？
小伙伴們是不是很期待用HTML5來開發(fā)App呢，在開發(fā)之前我們首先要了解一下什么是流應(yīng)用？
流應(yīng)用 :基于HTML5+的跨平臺技術(shù)，讓應(yīng)用邊用變下，類似流媒體，實(shí)現(xiàn)5秒內(nèi)啟動應(yīng)用,它結(jié)合了原生App和Web App的優(yōu)勢，又優(yōu)化了各自的缺點(diǎn)。是移動互聯(lián)網(wǎng)的終極應(yīng)用形態(tài)輕應(yīng)用，說白一點(diǎn)他其實(shí)就是一個App+輕量級+5秒啟動+跨平臺+DCloud，是不是很流弊？
既然說到流應(yīng)用了，那小編就在這給大家啰嗦啰嗦我為什么會選擇用它來做開發(fā)：
1：差量更新+及時更新，保證應(yīng)用版本始終是最新的（熱更新）
2：多端發(fā)布，生成流應(yīng)用的同時生成iOS、Android原生版，瀏覽器版、微信App和百度直達(dá)號。降低開發(fā)成本，提升開發(fā)效率
3：提高激活用戶數(shù)，提高用戶轉(zhuǎn)化率（原生App版本迭代開發(fā)者需要重新打包上傳，用戶需要下載更新，導(dǎo)致用戶流失）
我就問你流不流弊？
App的開發(fā)
我們要用HTML5開發(fā)一個App需要準(zhǔn)備哪些呢，首先開發(fā)工具當(dāng)然我這里推薦的是Dcloud公司出的HBuilder,里面提供了前端框架（MUI）它是目前最高性能和最接近原生體驗(yàn)的手機(jī)端框架。常用的API（HTML5+）包括二維碼、搖一搖、語音輸入、地圖、支付、分享、文件系統(tǒng)、通訊錄等常用API，可以方便簡單的編寫，并且可跨平臺。
http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/93，因?yàn)樗_實(shí)很好用。具體多牛逼，小編也不在贅述了，自己點(diǎn)開鏈接查看。
那我們現(xiàn)在已經(jīng)有了開發(fā)工具了，現(xiàn)在開始第一個簡單的App吧?？磮D來開始創(chuàng)建第一個移動App，我們在下面選擇包含MUI框架的項(xiàng)目。
來看下MUI都提供了哪些東西？
首先看一下MUI提供的帶返回箭頭導(dǎo)航欄標(biāo)題
<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">標(biāo)題</h1>
</header>
</body>
代碼寫完之后來看下他的效果，通常我會在開發(fā)過程中把開發(fā)窗口改成邊改邊看模式，這樣能很快看出來你編寫代碼之后的效果。
邊改邊看模式的壞處就是開發(fā)窗口太小了有木有？看不全代碼，我們還可以使用模擬器調(diào)試代碼，我這里下載了一個Xcode，所以我一般用模擬器調(diào)試的時候會用到iOS的模擬器。
OK大家學(xué)會了創(chuàng)建工程和調(diào)試之后呢，我們就開始正式先來學(xué)習(xí)一下最接近原生體驗(yàn)的移動App的UI框架（MUI）
下面開始介紹我們項(xiàng)目中常用組件：折疊面板
<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個面板中的內(nèi)容 -->
</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>
常見新聞列表，圖片居左帶有標(biāo)題和正文
<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>
選項(xiàng)卡
<div class="mui-slider">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">選項(xiàng)卡1</a>
<a class="mui-control-item" href="#item2">選項(xiàng)卡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個選項(xiàng)卡子項(xiàng)</li>
<li class="mui-table-view-cell">第1個選項(xiàng)卡子項(xiàng)</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個選項(xiàng)卡子項(xiàng)</li>
<li class="mui-table-view-cell">第2個選項(xiàng)卡子項(xiàng)</li>
</ul>
</div>
</div>
</div>
可左右拖動選項(xiàng)卡
<div class="mui-slider">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">選項(xiàng)卡1</a>
<a class="mui-control-item" href="#item2">選項(xiàng)卡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個選項(xiàng)卡子項(xiàng)</li>
<li class="mui-table-view-cell">第1個選項(xiàng)卡子項(xiàng)</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個選項(xiàng)卡子項(xiàng)</li>
<li class="mui-table-view-cell">第2個選項(xiàng)卡子項(xiàng)</li>
</ul>
</div>
</div>
</div>
最最經(jīng)典的底部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">設(shè)置</span>
</a>
</nav>
這里面有很多很多的官方提供的學(xué)習(xí)資料
http://dev.dcloud.net.cn/mui/ui/#accordion
好了今天就先學(xué)到這里面吧，大家可以根據(jù)官方提供的學(xué)習(xí)資料去一個個試驗(yàn)下。
下集預(yù)告網(wǎng)易新聞客戶端界面搭建
未完待續(xù)。。。
