現(xiàn)在使用 uni-app 來開發(fā)的人越來越多。是不是許多同學，準備入坑 uni-app，卻無從下手？文檔內(nèi)容太多，不知道怎么看？ 如果有此疑問， 那么我將帶你從零開始入坑 uni-app。

如果本文還不能讓你入坑 uni-app，那么大家可以去慕課網(wǎng)看一下我的視頻教程，也是比較基礎(chǔ)的入門視頻 uni-app 5小時快速入門 ,內(nèi)容不是很深入，是最基礎(chǔ)的內(nèi)容，希望可以幫到大家。

快速了解 uni-app

什么是 uni-app

1. uni-app 是一個使用 Vue.js 開發(fā)跨平臺應用的前端框架，開發(fā)者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺。 詳情點擊 uni-app 官方文檔
2. uni-app在跨端數(shù)量、擴展能力、性能體驗、周邊生態(tài)、學習成本、開發(fā)成本等6大關(guān)鍵指標上擁有極強的競爭優(yōu)勢：

• 跨端數(shù)量更多
• 平臺能力不受限
• 性能體驗更優(yōu)秀
• 周邊生態(tài)豐富
• 學習成本低
• 開發(fā)成本低

使用 uni-app 的前置條件

不要認為 uni-app 可以跨多端，就感覺開發(fā)難度會直線上升。如果說，你開發(fā)過小程序，恰好又會 vue， 那么你的學習成本會非常的低。

如果你原生小程序與 vue 都沒有接觸過的話，我建議你花一些時間，看一看他們的官方文檔。再回來學習 uni-app。

• 微信小程序
• VUE

開發(fā) App 端的話，對于原生開發(fā)了解即可，不需要你有很多的原生開發(fā)經(jīng)驗。

為了更好的跨端開發(fā)， 參考 uni-app 統(tǒng)一規(guī)范：

• 頁面組件我們要遵循Vue 單文件組件 (SFC) 規(guī)范
• 組件標簽靠近微信小程序規(guī)范
• 接口能力（JS API）靠近微信小程序規(guī)范
• 數(shù)據(jù)綁定及事件處理靠近 Vue.js 規(guī)范，同時補充了App及頁面的生命周期
• 為兼容多端運行，建議使用flex布局進行開發(fā)

開發(fā)工具

使用官方推出的 HBuilderX 編輯器
可視化的方式比較簡單，HBuilderX 內(nèi)置相關(guān)環(huán)境，開箱即用，無需配置node 。點擊下載

使用Vue.js

幾乎全支持 Vue官方文檔：模板語法

小程序（微信、支付寶、百度、頭條）

如果要開發(fā)小程序，我們需要知道不同平臺下的小程序規(guī)范的 。規(guī)范了解之后，我們開發(fā)起來就相對來說比較簡單一些。 uni-app 幫我們把不同平臺的小程序 API 幾乎都封裝了 ，只需要將前綴替換為 uni 即可 舉例說明：

我們調(diào)用微信小程序的 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';
    }
});

有沒有發(fā)現(xiàn)什么不一樣的？所以除了前綴 wx 替換為uni之外，其他與原規(guī)范機會保持一致。uni-app 會最大程度的抹平不同小程序平臺之間的差異。

App（ios、安卓）

uni-app 在 App 端不僅可以使用絕大多數(shù)的小程序相關(guān)的 API，同時也可以使用 5+API 很好的補足了小程序上一些還沒有實現(xiàn)的功能。相關(guān)閱讀

同時，App 端內(nèi)置 weex 引擎，提供了原生渲染能力。讓你 App 性能更好。相關(guān)閱讀

H5

h5 基本上跟常規(guī) vue 開發(fā)沒有什么區(qū)別， 唯一需要注意的是，有些 API 是不能在 h5 中使用，注意文檔中標注的平臺差異說明。

如何實現(xiàn)跨端

雖說是跨端，但是肯定是有情況是不支持的，比如遇到有些平臺特有的 API 怎么辦 ？

不用擔心，這些問題 uni-app 都為你想到了，那就是使用條件編譯。

條件編譯

詳細文檔點我
在 C 語言中，通過 #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的代碼 uni-app 參考這個思路，為 uni-app 提供了條件編譯手段，在一個工程里優(yōu)雅的完成了平臺個性化實現(xiàn) 。

條件編譯是利用注釋實現(xiàn)的，在不同語法里注釋寫法不一樣，js使用 // 注釋、css 使用 /* 注釋 */、vue/nvue 模板里使用 ``。

舉個例子:

// #ifdef  %PLATFORM%
平臺特有的API實現(xiàn)
// #endif


// #ifndef H5
// 表示只有 h5 不使用這個 api
uni.createAnimation(OBJECT)
// #endif

<!--  #ifdef  %PLATFORM% -->
平臺特有的組件
<!--  #endif -->

<!--  #ifdef  MP-WEIXIN -->
<!--  只在小程序中生效 -->
<view>我是微信小程序</view>
<!--  #endif -->

<!--  #ifdef  APP-PLUS -->
<!--  只在 app 中生效 -->
<view>我是 app </view>
<!--  #endif -->

/*  #ifdef  %PLATFORM%  */
平臺特有樣式
/*  #endif  */

/* #ifdef  MP-WEIXIN */
/*  只在小程序中生效  */
.header {
    color:red
}
/*  #endif  */

/*  #ifdef  APP-PLUS  */
/*  只在 app 中生效  */
.header {
    color:blue
}
<!--  #endif  */

注意事項

• 非 H5 端，不能使用瀏覽器自帶對象，比如 document、window、localstorage、cookie 等，更不能使用 jquery 等依賴這些瀏覽器對象的框架。因為各家小程序快應用都不支持這些對象。沒有這些瀏覽器自帶對象并不影響業(yè)務開發(fā)，uni 提供的 api 足夠完成業(yè)務。
• uni-app 的 tag 同小程序的 tag，和 HTML 的 tag 不一樣，比如 div 要改成 view，span 要改成 text、a 要改成 navigator。

您對于 uni-app 有任何疑問，歡迎評論回復，我看到的話，會第一時間回復你，感謝。

Tips ： 請理性對待，可以不喜歡，但是不要噴。問題可以討論，但是對噴子零容忍。