前言
hello 小伙伴們，現(xiàn)在我已經(jīng)正式入坑 uni-app 了。uni-app 已經(jīng)發(fā)布好幾個(gè)月了，期間也是踩坑無(wú)數(shù)，但是官方秉承著不拋棄不放棄的精神，積極解決開(kāi)發(fā)者的各種簡(jiǎn)單的、復(fù)雜的問(wèn)題，在此表示感謝。我想還有小伙伴正在持觀望狀態(tài)，還沒(méi)想好要不要使用 uni-app，而且近些日子以來(lái)，許多跨端框架也紛紛出現(xiàn)在了大家的視線當(dāng)中，讓迷茫的我們更加不知道如何對(duì)比選擇了。 uni-app 入坑指南，方便大家更好的了解 uni-app 本篇只講述 uni-app，不與其他類似框架進(jìn)行對(duì)比
一、什么是 uni-app
- uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)跨平臺(tái)應(yīng)用的前端框架，開(kāi)發(fā)者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個(gè)平臺(tái)。詳情點(diǎn)擊 uni-app 官方文檔
- uni-app在跨端數(shù)量、擴(kuò)展能力、性能體驗(yàn)、周邊生態(tài)、學(xué)習(xí)成本、開(kāi)發(fā)成本等6大關(guān)鍵指標(biāo)上擁有極強(qiáng)的競(jìng)爭(zhēng)優(yōu)勢(shì) 。
- 跨端數(shù)量更多
- 平臺(tái)能力不受限
- 性能體驗(yàn)更優(yōu)秀
- 周邊生態(tài)豐富
- 學(xué)習(xí)成本低
- 開(kāi)發(fā)成本低
二、使用 uni-app 的前置條件
好多小伙伴可能要問(wèn)了:哇，一套代碼可以編譯到那么多平臺(tái)，那是不是我學(xué)習(xí)起來(lái)很麻煩啊，我只會(huì)vue啊，不會(huì)小程序，也不會(huì)原生開(kāi)發(fā)，能不能學(xué)會(huì)uni-app呢。
這個(gè)問(wèn)題問(wèn)的就很棒，那么如果要學(xué)會(huì)uni-app需要會(huì)那些技能呢？答：你如果會(huì)vue，基本上就可以解決大多數(shù)問(wèn)題了。多讀幾遍文檔，你會(huì)發(fā)現(xiàn)開(kāi)發(fā)起來(lái)很順暢 。
但是為了更好的跨端開(kāi)發(fā)，我們肯定是要統(tǒng)一規(guī)范的：
- 頁(yè)面組件我們要遵循Vue 單文件組件 (SFC) 規(guī)范
- 組件標(biāo)簽靠近微信小程序規(guī)范
- 接口能力（JS API）靠近微信小程序規(guī)范
- 數(shù)據(jù)綁定及事件處理靠近 Vue.js 規(guī)范，同時(shí)補(bǔ)充了App及頁(yè)面的生命周期
- 為兼容多端運(yùn)行，建議使用flex布局進(jìn)行開(kāi)發(fā)
三、開(kāi)發(fā)工具
使用官方推出的 HBuilderX 編輯器
可視化的方式比較簡(jiǎn)單，HBuilderX 內(nèi)置相關(guān)環(huán)境，開(kāi)箱即用，無(wú)需配置node 。
四、使用Vue.js
幾乎全支持 Vue官方文檔：模板語(yǔ)法
當(dāng)然，說(shuō)的是幾乎，那肯定有不支持的情況下啊， 下面給大家羅列一下不支持的情況 ：
- 不支持純HTML
- 不支持部分復(fù)雜的 JavaScript 渲染表達(dá)式
- 不支持過(guò)濾器
五、小程序（微信、支付寶、百度、頭條）
當(dāng)然如果要開(kāi)發(fā)小程序，不可避免的，我們肯定是要知道不同平臺(tái)下的小程序規(guī)范的 。當(dāng)然知道了這些規(guī)范之后，我們開(kāi)發(fā)起來(lái)就比較簡(jiǎn)單了。uni-app 給我們把不同平臺(tái)的小程序 API 幾乎都封裝了 ，只需要將前綴替換為 uni 即可 舉例說(shuō)明：
我們調(diào)用微信小程序的 request 請(qǐng)求
我們使用 uni-app 的 request 請(qǐng)求
有沒(méi)有發(fā)現(xiàn)什么不一樣的？對(duì)了，除了前綴 wx替換為uni之外，其他的地方一摸一樣，是不是這樣開(kāi)發(fā)起來(lái)就很一賊了呢 。
六、App（ios、安卓）
uni-app 不僅可以使用絕大多數(shù)的小程序相關(guān)的 API，同時(shí)也可以使用 5+API 很好的補(bǔ)足了小程序上一些還沒(méi)有實(shí)現(xiàn)的功能，是不是很美好？而且開(kāi)發(fā)方式還是跟上述一樣，沒(méi)有變化，是不是更美好了呢。
七、H5
h5 就不多說(shuō)了，基本上跟常規(guī) vue 開(kāi)發(fā)沒(méi)有什么區(qū)別， 唯一需要注意的是，有些 API 是不能在 h5 中使用，主要看文檔，看文檔，看文檔 。
八、如何實(shí)現(xiàn)跨端
當(dāng)然雖說(shuō)是跨端，但是肯定是有情況是不支持的，比如遇到有些平臺(tái)特有的 API 怎么辦 ？
不用擔(dān)心，這些問(wèn)題 uni-app 都為你想到了 那就是使用條件編譯 。
九、條件編譯
（詳細(xì)看文檔）在 C 語(yǔ)言中，通過(guò) #ifdef、#ifndef 的方式，為 windows、mac 等不同 os編譯不同的代碼 uni-app 參考這個(gè)思路，為 uni-app 提供了條件編譯手段，在一個(gè)工程里優(yōu)雅的完成了平臺(tái)個(gè)性化實(shí)現(xiàn) 。
條件編譯是利用注釋實(shí)現(xiàn)的，在不同語(yǔ)法里注釋寫法不一樣，js使用 // 注釋、css 使用 / 注釋 /、vue/nvue 模板里使用 ****。
舉個(gè)例子:
是不是感覺(jué)很方便 ？這樣就可以很巧妙的去區(qū)分不同的平臺(tái)了，具體的請(qǐng)?jiān)敿?xì)看文檔，看文檔，看文檔 。
十、注意事項(xiàng)
- 非 H5 端，不能使用瀏覽器自帶對(duì)象，比如 document、window、localstorage、cookie 等，更不能使用 jquery 等依賴這些瀏覽器對(duì)象的框架。因?yàn)楦骷倚〕绦蚩鞈?yīng)用都不支持這些對(duì)象。沒(méi)有這些瀏覽器自帶對(duì)象并不影響業(yè)務(wù)開(kāi)發(fā)，uni 提供的 api 足夠完成業(yè)務(wù)。
- uni-app 的 tag 同小程序的 tag，和 HTML 的 tag 不一樣，比如 div 要改成 view，span 要改成 text、a 要改成 navigator。
以上，所有內(nèi)容（除了我自己說(shuō)的話以外）都來(lái)自 uni-app官方文檔，請(qǐng)注意多看文檔，多看文檔，多看文檔。
結(jié)語(yǔ)
ok，到這里入坑基本完畢。接下會(huì)講述如何使用 uni-app 從零開(kāi)始開(kāi)發(fā)一個(gè)完整的音樂(lè)應(yīng)用，盡情期待！
希望本文能幫助到您！
點(diǎn)贊+轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容（不收藏不點(diǎn)贊，都是耍流氓-_-）
想了解更多前端知識(shí)歡迎評(píng)論區(qū)留言或私信我！
**歡迎關(guān)注公眾號(hào)：fkdcxy 瘋狂的程序員丶 **獲取更多前端教程！
