uni-app 入坑指南

hello 小伙伴們，現在我已經正式入坑 uni-app 了。 uni-app 已經發布大概八個月了，期間也是踩坑無數，但是官方秉承着不拋棄不放棄的精神，積極解決開發者的各種簡單的、復雜的問題，在此表示感謝。我想還有小伙伴正在持觀望狀態，還沒想好要不要使用 uni-app，而且近些日子以來，許多跨端框架也紛紛出現在了大家的視線當中，讓迷茫的我們更加不知道如何對比選擇了。所以本人不才,寫了一篇 uni-app 入坑指南，方便大家更好的了解 uni-app 本篇只講述 uni-app，不與其他類似框架進行對比

什么是 uni-app

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

跨端數量更多
平台能力不受限
性能體驗更優秀
周邊生態豐富
學習成本低
開發成本低

使用 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 --> <!-- #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 等依賴這些瀏覽器對象的框架。因為各家小程序快應用都不支持這些對象。沒有這些瀏覽器自帶對象並不影響業務開發，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分鍾的時間，對不起您，對您表示歉意。