什么是 uni-app
uni-app 是一個使用vue的語法 + 微信小程序的標簽和API的跨平台前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平台，幾乎覆蓋所有流量端。
uni-app 具有跨端數量更多、性能體驗更優秀、學習成本低、開發成本低等幾大關鍵優勢。
使用 uni-app 的前置條件
不要認為uni-app 可以跨多端，就感覺開發難度會直線上升。如果說，你開發過小程序，恰好又會vue， 那么你的學習成本會非常的低。如果你原生小程序與vue 都沒有接觸過的話，我建議你花一些時間，看一看他們的官方文檔。再回來學習uni-app。
為了更好的跨端開發， 參考uni-app 統一規范：
頁面組件我們要遵循Vue 單文件組件 (SFC) 規范
組件標簽靠近微信小程序規范
接口能力（JS API）靠近微信小程序規范
數據綁定及事件處理靠近Vue.js 規范，同時補充了App及頁面的生命周期
為兼容多端運行，建議使用flex布局進行開發
開發工具
毫無疑問，首選使用官方推出的HBuilderX 編輯器
可視化的方式比較簡單，HBuilderX 內置相關環境，開箱即用，無需配置node 。
框架目錄見下:
┌─components uni-app組件目錄
│ └─comp-a.vue 可復用的a組件
├─hybrid 存放本地網頁的目錄，詳見
├─platforms 存放各平台專用頁面的目錄，詳見
├─pages 業務頁面文件存放的目錄
│ ├─index
│ │ └─index.vue index頁面
│ └─list
│ └─list.vue list頁面
├─static 存放應用引用靜態資源（如圖片、視頻等）的地方，注意：靜態資源只能存放於此
├─main.js Vue初始化入口文件
├─App.vue 應用配置，用來配置App全局樣式以及監聽
├─manifest.json 配置應用名稱、appid、logo、版本等打包信息
└─pages.json 配置頁面路由、導航條、選項卡等頁面類信息
小程序（微信、支付寶、百度、頭條、QQ、360）
如果要開發小程序，我們需要知道不同平台下的小程序規范的 。規范了解之后，我們開發起來就相對來說比較簡單一些。uni-app 幫我們把不同平台的小程序API 幾乎都封裝了 ，只需要將前綴替換為uni 即可 例如：
我們調用微信小程序的request 請求
wx.request({
url: 'https://www.example.com/request', //僅為示例，並非真實接口地址
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定義請求頭信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
我們使用uni-app 的request 請求
uni.request({
url: 'https://www.example.com/request', //僅為示例，並非真實接口地址
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定義請求頭信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
除了前綴wx 替換為uni之外，其他與原規范機會保持一致。uni-app 會最大程度的抹平不同小程序平台之間的差異。
App（ios、安卓）
uni-app 在App 端不僅可以使用絕大多數的小程序相關的API，同時也可以使用5+API 很好的補足了小程序上一些還沒有實現的功能。同時，App 端內置weex 引擎，提供了原生渲染能力。讓你 App 性能更好。
H5
h5 基本上跟常規vue 開發沒有什么區別， 唯一需要注意的是，有些API 是不能在h5 中使用，注意文檔中標注的平台差異說明。
如何實現跨端
雖說是跨端，但是肯定是有情況是不支持的，比如遇到有些平台特有的API 怎么辦 ？不用擔心，這些問題uni-app 都為你想到了，那就是使用條件編譯。
條件編譯
在C 語言中，通過#ifdef、#ifndef 的方式，為windows、mac 等不同os 編譯不同的代碼，uni-app 參考這個思路，為uni-app 提供了條件編譯手段，在一個工程里優雅的完成了平台個性化實現 。
條件編譯是利用注釋實現的，在不同語法里注釋寫法不一樣，js使用// 注釋、css 使用、vue/nvue 模板里使用 ``。
舉個例子：
// #ifdef %PLATFORM%
平台特有的API實現
// #endif
// #ifndef H5
// 表示只有 h5 不使用這個 api
uni.createAnimation(OBJECT)
// #endif
注意事項
非H5 端，不能使用瀏覽器自帶對象，比如document、window、localstorage、cookie 等，更不能使用jquery 等依賴這些瀏覽器對象的框架。因為各家小程序快應用都不支持這些對象。沒有這些瀏覽器自帶對象並不影響業務開發，uni 提供的api 足夠完成業務。
uni-app 的tag 同小程序的tag，和HTML 的tag 不一樣，比如div 要改成view，span 要改成text、a 要改成navigator。