uni-app 入坑指南
好多小夥伴可能要問了:哇，一套程式碼可以編譯到那麼多平臺，那是不是我學習起來很麻煩啊，我只會vue
啊，不會小程式，也不會原生開發，能不能學會uni-app
呢。
這個問題問的就很棒，那麼如果要學會uni-app
需要會那些技能呢？答：你如果會vue
，基本上就可以解決大多數問題了。 多讀幾遍文件，你會發現開發起來很順暢 。
但是為了更好的跨端開發，我們肯定是要統一規範的：
- 頁面元件我們要遵循Vue 單檔案元件 (SFC) 規範
- 元件標籤靠近微信小程式規範
- 介面能力（JS API）靠近微信小程式規範
-
資料繫結及事件處理靠近
Vue.js規範，同時補充了App及頁面的生命週期 - 為相容多端執行，建議使用flex佈局進行開發
開發工具
使用官方推出的HBuilderX
編輯器
視覺化的方式比較簡單，HBuilderX
內建相關環境，開箱即用，無需配置node 。
使用Vue.js
幾乎全支援Vue官方文件：模板語法
當然，說的是幾乎，那肯定有不支援的情況下啊， 下面給大家羅列一下不支援的情況 ：
小程式（微信、支付寶、百度、頭條）
當然如果要開發小程式，不可避免的，我們肯定是要知道不同平臺下的小程式規範的 。當然知道了這些規範之後，我們開發起來就比較簡單了。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
之外，其他的地方一摸一樣，是不是這樣開發起來就很一賊了呢 。
App（ios、安卓）
uni-app
不僅可以使用絕大多數的小程式相關的API
，同時也可以使用5+API
很好的補足了小程式上一些還沒有實現的功能，是不是很美好？而且開發方式還是跟上述一樣，沒有變化，是不是更美好了呢。
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 複製程式碼
<!--#ifdef%PLATFORM% --> 平臺特有的元件 <!--#endif --> <!--#ifdefMP-WEIXIN --> <!--只在小程式中生效 --> <view>我是微信小程式</view> <!--#endif --> <!--#ifdefAPP-PLUS --> <!--只在 app 中生效 --> <view>我是 app </view> <!--#endif --> 複製程式碼
/*#ifdef%PLATFORM%*/
平臺特有樣式
/*#endif*/
/* #ifdefMP-WEIXIN */
/*只在小程式中生效*/
.header {
color:red
}
/*#endif*/
/*#ifdefAPP-PLUS*/
/*只在 app 中生效*/
.header {
color:blue
}
<!--#endif*/
複製程式碼
是不是感覺很方便 ？ 這樣就可以很巧妙的去區分不同的平臺了，具體的請詳細看文件，看文件，看文件 。
注意事項
-
非
H5端，不能使用瀏覽器自帶物件，比如document、window、localstorage、cookie等，更不能使用jquery等依賴這些瀏覽器物件的框架。因為各家小程式快應用都不支援這些物件。沒有這些瀏覽器自帶物件並不影響業務開發，uni提供的api足夠完成業務。 -
uni-app的tag同小程式的tag，和HTML的tag不一樣，比如div要改成view，span要改成text、a要改成navigator。
以上，所有內容（除了我自己說的話以外）都來自 [uni-app官方文件](https://uniapp.dcloud.io/README)，請注意多看文件，多看文件，多看文件。
ok，到這裡入坑基本完畢。下篇開始，講述如何使用uni-app
從零開始開發一個完整的音樂應用，敬請期待（其實我正在準備，還沒開始寫呢，預計一兩個月寫完，雖然答應一些小夥伴幾個月以前就要出來的[手動捂臉]）
感謝您的觀看，看到這裡如果您覺得沒用，那麼您大概浪費了2分鐘的時間，對不起您，對您表示歉意。