上一篇我們講了uni-app的各種優缺點，接下來我們要講一下uni-app的開發流程和一些常用組件。此篇文章為uni-app基礎篇，如果你是uni-app開發大神可以忽略此篇文章，當然如果您發現了文章的不足也請您不吝指出。
一：uni-app開發流程
（一）首先我們需要HBX，如果還沒有HBX的同學，請自行點擊以下鏈接進行下載：HBX下載地址
接下來如果你已經安裝了HBX，請繼續往下看。
HBX體量很小，不需要安裝就可以使用，下載完成后直接解壓，進入文件夾找到HBX圖標雙擊就可以愉快的和它玩耍了。打開HBX后選擇文件->新建->項目，選擇uni-app項目，然后給你的項目命名，并選擇模板，如果你已經有過開發經驗可以自信的選擇默認模板，當然如果你是萌新可以選擇hello uni-app模板，里面有一些封裝好的組件和css樣式可以直接供你使用。選擇好模板以后點擊創建，一個uni-app項目就這樣出現在了你的編輯器里啦，可以說我們已經走完了偉大的第一步，然后可能會有同學要問了，那我的項目是存在哪里的呢，那讓我來告訴你，在你創建項目的時候里面有一個默認的存儲位置。如果你沒有注意的話，建議你重新建一個項目然后把它記住（偷笑）。
（二）接下來我們要講的是uni-app的目錄結構
我想不管是什么項目，我們首先要了解的就是目錄結構：uni-app的整體目錄結構如下：
common-common文件夾可以用來存放一些公共css及js文件
component-component文件夾可以存放我們自己封裝的一些組件
static-static文件夾用來存放我們的靜態文件比如圖片，icon之類的
hybrid-該文件夾可以存放我們寫的本地html文件
platforms-存放各平臺專用頁面的目錄
pages-存放業務文件的文件夾
main.js- vue.js的初始化入口文件
App.vue- 用來配置app的全局樣式以及監聽應用的生命周期
manifest.json- 配置應用的各種信息
pages.json- 配置頁面的路由、導航條、選項卡等頁面類信息
（三）應用的生命周期及頁面的生命周期
應用的生命周期可以在app.vue里面進行配置：
onLaunch：應用初始化完成時觸發，全局只觸發一次。可以做一些業務邏輯的判斷，比如區分開發環境然后調用不同服務器的接口（本地開發時配置測試服務器的域名，生產環境下配置成線上服務器的域名）具體的一些處理細節會在以后的文章中詳細介紹。
onShow：當應用啟動或者，從后臺進入前臺時觸發。
onHide：當應用從前臺進入后臺時觸發。
onUniNViewMessage： 對nvue（nativevue）頁面發送的數據進行監聽。
頁面的生命周期可以在每個業務頁面里面配置：
onLoad：頁面加載時觸發，可以用來在頁面之間傳參，具體的一些處理會在以后的文章詳細介紹。
onShow：頁面顯示時觸發
onReady：頁面初次渲染完成時觸發
onHide：頁面隱藏時觸發
onUnload：頁面卸載時觸發
onPullDownRefresh：用戶下拉時觸發
onReachBottom：頁面上拉觸底時觸發
onNavigationBarButtonTap： 原生標題欄點擊時觸發，可以用于分享app等功能，詳細介紹會在后面的文章中介紹
onBackPress：頁面返回時觸發
如果你用過或者學過vue，那你有可能要問我了vue的生命周期在uni-app里面是否支持呢，答案是當然是支持啦，不過如果你寫的是uni-app應用還是建議用onLoad代替created，用onReady代替mounted。
（四）關于樣式
uni-app因為要適配不同端，所以使用的布局方式都是flex布局，關于flex如果你還不是太理解建議你去看看阮一峰的博客，講解的很到位，在這里就不贅述了，不過有一點要跟大家說，在uni-app里都是使用upx來代替px作為單位的。
upx 是相對于基準寬度的單位，可以根據屏幕寬度進行自適應。uni-app?規定屏幕基準寬度750upx。另外頁面元素寬度在?uni-app?中的寬度計算公式為：750 * 元素在設計稿中的寬度 / 設計稿基準寬度
（五）條件編譯
這也是uni-app的一大亮點，有了它可以在你的項目里優雅的實現平臺個性化
條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。
寫法：以?#ifdef?或?#ifndef?加?%PLATFORM%?開頭，以?#endif?結尾。
?%PLATFORM%?的可選值為：APP-PLUS（5+APP），APP-PLUS-NVUE（5+app，nvue），H5（H5），MP-WEIXIN（微信小程序），MP-ALIPAY（支付寶小程序），MP-BAIDU（百度小程序），MP（微信小程序/支付寶小程序/百度小程序）。
二：uni-app常用組件講解
如果你做過微信小程序的話會發現uni-app封裝的組件和微信小程序組件幾乎一毛一樣。在此我不會全部講解，我只講幾個我常用的組件。關于其他的組件大家可以去uni-app官網自行查看
（一）最基礎的視圖容器：view
在uni-app里用view代替div作為基礎視圖容器，如果你在項目中使用了div它也會在編譯的時候幫你編譯成view，
view一共有四種屬性：
hover-class：指定按下去的樣式類，默認為none，當其為none是沒有點擊態效果
hover-stop-propagation：指定是否阻止本節點的祖先節點出現點擊態，其類型為布爾值，默認值為false
hover-start-time：按住后多久出現點擊態，單位為毫秒，默認為400ms
hover-stay-time：手指松開后點擊態保留的時間，單位為毫秒，默認為50ms
（二）最基礎的表單組件：button
button一共有十一種屬性：
size：按鈕的大小，它有兩個有效值：default，mini
type：按鈕的樣式類型，它有三個有效值：primary（app下為藍色，微信小程序下為綠色），default，warn
plain：按鈕是否為鏤空，背景色透明，默認為false
disabled：是否禁用按鈕，默認為false
loading：名稱前是否帶 loading 圖標，默認為false
form-type：用于?<form>?組件，點擊分別會觸發?<form>?組件的 submit/reset 事件，可選值為submit/reset
open-type：開放能力，有效值為feedback（打開“意見反饋”頁面，用戶可提交反饋內容并上傳日志，在app及小程序下可用），share（觸發用戶轉發，微信小程序下可用），getUserInfo（獲取用戶信息，可以從@getuserinfo回調中獲取到用戶信息，在微信小程序下可用）
hover-class：指定按下去的樣式類，默認為button-hover，當其為none是沒有點擊態效果，button-hover?默認為?{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
hover-start-time：按住后多久出現點擊態，單位為毫秒，默認為20ms
hover-stay-time：手指松開后點擊態保留的時間，單位為毫秒，默認為70ms
@getuserinfo：用戶點擊該按鈕時，會返回獲取到的用戶信息，從返回參數的detail中獲取到的值同uni.getUserInfo，只有在微信小程序下好用。
（三）web-view
這個組件是我要重點講的組件，如果你以前做過很多H5頁面想直接把它嵌套到app里，那這個組件便派上用場啦。
它的屬性一共有三種：
src：webview 指向網頁的鏈接
webview-styles：?webview 的樣式
@message：?網頁向應用?postMessage?時，會在特定時機（后退、組件銷毀、分享）觸發并收到消息。
接下來要說的是重點-請拿好小本本記下來。在uni-app項目里，它賦予了web-view嵌套的頁面一些使用uni-appAPI的能力，首先你要改造一下你的H5頁面在，H5頁面中引入以下代碼:
<!-- 微信 JS-SDK 如果不需要兼容微信小程序，則無需引用此 JS 文件。 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- 支付寶的 JS-SDK 防止 404 需要動態加載，如果不需要兼容支付寶小程序，則無需引用此 JS 文件。 --><script type="text/javascript"> if (navigator.userAgent.indexOf('AlipayClient') > -1) { document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>'); }</script>
<!-- 百度 JS-SDK 如果不需要兼容百度小程序，則無需引用此 JS 文件。 -->
<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-1.7.0.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.2.2.js"></script>
待H5觸發?UniAppJSBridgeReady?事件后，即可調用 uni 的 API。
<script>
document.addEventListener('UniAppJSBridgeReady',function(){
uni.postMessage({data:{action:'message'}});uni.getEnv(function(res){
console.log('當前環境：'+JSON.stringify(res));
});
});
</script>
好了，今天先介紹到這里吧，下一講，講一講uni-app的API及我在做uni-app時遇到的坑，以及填坑的經歷（干貨呦），希望大家多多支持噢，一起進步。如果有什么不明白的地方可以在文章下方留言一起討論噢，哈哈。
