uni-app入門(mén)

uni, 從這個(gè)單詞的意思，就能看的出來(lái)，Dcoud社區(qū)的野心 這個(gè)試圖統(tǒng)治整個(gè)前端界的技術(shù)，到底有沒(méi)有那么好呢？

科普

Dcloud是干嘛的？ 著名的國(guó)產(chǎn)開(kāi)源開(kāi)發(fā)工具，Hbuilder，就是他們家的產(chǎn)品之一 他們家另外一款重量級(jí)產(chǎn)品，就是H5+App技術(shù)

簡(jiǎn)單的說(shuō)，一個(gè)前端，可以利用他們提供的開(kāi)發(fā)環(huán)境，以及【MUI】 框架
輕輕松松的就可以用JS寫(xiě)出 安卓 和 IOS應(yīng)用
（好吧，其實(shí)也沒(méi)那么輕松，學(xué)習(xí)成本還是挺高的）
盡管現(xiàn)在已經(jīng)有了 react-native 和Flutter這樣的 優(yōu)秀的技術(shù)

但個(gè)人認(rèn)為H5+技術(shù)，更加接近手機(jī)端原生規(guī)范。

H5+并沒(méi)能滿(mǎn)足他們的野心，于是又推出了uni-app這是一個(gè)多端的開(kāi)發(fā)框架。簡(jiǎn)單的說(shuō)： 你寫(xiě)出一套代碼，然后可以根據(jù)需要 打包出 web應(yīng)用、安卓app、IOSapp、微信小程序、支付寶小程序、頭條小程序、百度小程序......

趕緊去官網(wǎng)看一下介紹，感受一下它牛逼的氣息。

https://uniapp.dcloud.io/

關(guān)于uni-app的由來(lái)建議大家去看一下這個(gè)鏈接 https://uniapp.dcloud.io/history關(guān)于小程序，微信并不是鼻祖，Dcloud才是

學(xué)習(xí)成本高嗎

如果你熟悉微信小程序開(kāi)發(fā)
如果你熟悉vue框架
那么學(xué)習(xí)成本 ~~ 基本等于0 因?yàn)樗捎昧诵〕绦虻捻?xiàng)目架構(gòu)，同時(shí)結(jié)合vue框架技術(shù)來(lái)編寫(xiě)參考這個(gè)鏈接即可 （mpvue） http://mpvue.com/

注意事項(xiàng)

為了實(shí)現(xiàn)多端兼容，綜合考慮編譯速度、運(yùn)行性能等因素，uni-app 約定了如下開(kāi)發(fā)規(guī)范：

• 頁(yè)面文件遵循 Vue 單文件組件 (SFC)，也就是必須單文件組件的形式編寫(xiě)頁(yè)面組件
• 標(biāo)簽靠近小程序規(guī)范，詳見(jiàn)uni-app 文檔也就是用小程序的組件寫(xiě)頁(yè)面標(biāo)簽
• 接口能力（JS API）靠近微信小程序規(guī)范，詳見(jiàn)文檔例如 uni.request(...)
• 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時(shí)補(bǔ)充了App及頁(yè)面的生命周期例如 onLoad、onShow、onHide等
• 為兼容多端運(yùn)行，建議使用flex布局進(jìn)行開(kāi)發(fā)

一個(gè)uni-app工程，默認(rèn)包含如下目錄及文件：

uni-app 在發(fā)布到H5時(shí)支持所有vue的語(yǔ)法；

發(fā)布到App和小程序時(shí)，由于平臺(tái)限制，無(wú)法實(shí)現(xiàn)全部vue語(yǔ)法，但uni-app仍是是對(duì)vue語(yǔ)法支持度最高的跨端框架。

相比Web平臺(tái)， Vue.js 在 uni-app 中使用差異主要集中在兩個(gè)方面：

• 新增：uni-app除了支持Vue實(shí)例的生命周期，還支持應(yīng)用啟動(dòng)、頁(yè)面顯示等生命周期
• 受限：相比web平臺(tái)，在小程序和App端部分功能受限，具體參見(jiàn)文檔。

https://uniapp.dcloud.io/use

---

uni-app App 端內(nèi)置 HTML5+ 引擎

我們用 js 可以直接調(diào)用豐富的手機(jī)端原生能力。
使用H5+ API的時(shí)候，需要注意一些內(nèi)容，詳見(jiàn)文檔https://uniapp.dcloud.io/use-html5plus

---

作為一個(gè)跨了這么多端的集大成者，沒(méi)有點(diǎn)坑是不可能的

詳情參見(jiàn)文檔，實(shí)際的坑，尤其是app端，其實(shí)遠(yuǎn)不止這么多
不過(guò)uni-app發(fā)展迅速，相信這些問(wèn)題很快會(huì)得到解決https://uniapp.dcloud.io/matter

動(dòng)手嘗試一下

1、下載hubuildX工具

2、在點(diǎn)擊工具欄里的文件 -> 新建 -> 項(xiàng)目：

3、選擇uni-app，輸入工程名，如：hello-uniapp，點(diǎn)擊創(chuàng)建，即可成功創(chuàng)建 uni-app。點(diǎn)擊模板里的 Hello uni-app 即可體驗(yàn)官方示例。

4、運(yùn)行方式一，瀏覽器運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到瀏覽器 -> 選擇瀏覽器，即可在瀏覽器里面體驗(yàn)uni-app 的 H5 版。

5、運(yùn)行方式二，真機(jī)運(yùn)行：連接手機(jī)，開(kāi)啟USB調(diào)試，進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 真機(jī)運(yùn)行 -> 選擇運(yùn)行的設(shè)備，即可在該設(shè)備里面體驗(yàn)uni-app。

6、運(yùn)行方式三，在微信開(kāi)發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開(kāi)發(fā)者工具，即可在微信開(kāi)發(fā)者工具里面體驗(yàn)uni-app。

7、在HBuilderX工具欄，點(diǎn)擊發(fā)行，選擇原生app-云端打包，如下圖：

8、發(fā)布為H5網(wǎng)頁(yè)應(yīng)用

在 manifest.json 的可視化界面，進(jìn)行如下配置（發(fā)行在網(wǎng)站根目錄可不配置應(yīng)用基本路徑），此時(shí)發(fā)行網(wǎng)站路徑是 http://www.xxx.com/h5，如：https://uniapp.dcloud.io/h5。

在HBuilderX工具欄，點(diǎn)擊發(fā)行，選擇網(wǎng)站-H5手機(jī)版，如下圖，點(diǎn)擊即可生成 H5 的相關(guān)資源文件，保存于 unpackage 目錄。

這里是一些官方示例和第三方案例

https://uniapp.dcloud.io/case千鋒HTML5學(xué)院：微信小程序?qū)W習(xí)筆記（五）-- 小程序UI組件庫(kù)?zhuanlan.zhihu.com千鋒HTML5學(xué)院：uni-app學(xué)習(xí)筆記（二）-- uni-app詳解?zhuanlan.zhihu.com

總結(jié)

以上是生活随笔為你收集整理的5地图组件 uni_uni-app学习笔记（一）-- uni-app简介的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。