什麼是 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。