本篇文章給大家談?wù)剈niapp開(kāi)發(fā)的知名項(xiàng)目，以及uniapp哪個(gè)公司開(kāi)發(fā)的對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

uniapp和graceUI介紹

uniapp是一個(gè)跨平臺(tái)的基于Vuejs的前段框架，一次開(kāi)發(fā)，支持包括小程序，APP，H5等等的8個(gè)端。

uni-app官方網(wǎng)站

uni-app如何學(xué)習(xí)

于是我找到一個(gè)基于uniapp的前段樣式庫(kù)框架GraceUI，

使用GraceUI不會(huì)降低使用uniapp的優(yōu)勢(shì)，并補(bǔ)全了關(guān)于樣式和組件方面的教學(xué)和完善，下面是GraceUI我認(rèn)為的優(yōu)點(diǎn)。

graceUI是一款基于uni-app和微信小程序開(kāi)發(fā)的前段樣式庫(kù)，擁有全局樣式表，組件，表單認(rèn)證等等功能。

GraceUI官網(wǎng)

GraceUI免費(fèi)教學(xué)

uni-app 入門(mén)到精通 （二）

18 年時(shí)候有幸接觸到 uniapp , 寫(xiě)了一篇 《uni-app 入門(mén)到精通》 ，由于一些原因，該方案并沒(méi)有執(zhí)行，該項(xiàng)目一系列文章也就沒(méi)有再寫(xiě)下去，所以遭受到了許多人評(píng)論的吐槽，到如今公司項(xiàng)目的需求又要根據(jù) uniapp 寫(xiě) H5 嵌入到 app 中，所以想根據(jù)項(xiàng)目實(shí)際開(kāi)發(fā)分享一下，有興趣的伙伴可以參考和吐槽。

這一篇文章主要分享一下內(nèi)容

uniapp 模板項(xiàng)目有兩種初始化方式

由于無(wú)法舍棄 VSCode ，我們采用 vue-cli 來(lái)初始化項(xiàng)目， HBuilderX 大家可以參照官方文檔

這種方式是可以通過(guò) vue 腳手架命令指定模板，這個(gè)是 dcloudio 的官方提供模板

我們選擇默認(rèn)模板即可，

成功后我們執(zhí)行

打開(kāi)瀏覽器地址，直接運(yùn)行即可。

一般剛接觸前端的小伙伴可能會(huì)對(duì) postcss 不太了解，這里簡(jiǎn)單介紹一下，

當(dāng)然 PostCSS 具體使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具體如何使用大家可以自行參考資料，畢竟這塊知識(shí)還是挺多的就不具體展開(kāi)解釋了。

通常我們?cè)趯?xiě)移動(dòng)端時(shí)候需要做的是頁(yè)面適配方案的確定， uni-app 支持的通用 css 單位包括 px、rpx ， 之前的 upx 方案已經(jīng)被廢棄掉，官方解釋是目前市面上已經(jīng)基本上支持了微信的 rpx 方案，所以 upx 中轉(zhuǎn)方案已經(jīng)意義不大了，不過(guò)還可以繼續(xù)使用，不過(guò)已經(jīng)不再推薦。

rpx 之初是由微信小程序提出一種方案，即根據(jù)寬度來(lái)進(jìn)行適配以 750 寬屏幕為基準(zhǔn)， 750rpx 恰好為屏幕寬度, uni-app 規(guī)定屏幕基準(zhǔn)寬度 750rpx 。所以說(shuō)如果你們的UI 設(shè)計(jì)以 750*1334 iphone 6/6s 為基準(zhǔn)設(shè)計(jì)的話，你只需要將屏幕上 px 寫(xiě)為 rpx 即可，不用做任何換算，如果不是的話，你就需要做如下?lián)Q算：

uniapp 有自己一套路由管理機(jī)制，而未采用 vue-route 方案，個(gè)人認(rèn)為這套方案還是比較成熟和好用的，以及可以滿足我們?nèi)粘５男枨?

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用uni.navigateBack可以返回到原頁(yè)面。

2.uni.redirectTo(OBJECT)

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。

3.uni.reLaunch(OBJECT)

關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。

注意： 如果調(diào)用了 uni.preloadPage(OBJECT)) 不會(huì)關(guān)閉，僅觸發(fā)生命周期 onHide

4.uni.switchTab(OBJECT)

跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面。

注意： 如果調(diào)用了 uni.preloadPage(OBJECT)不會(huì)關(guān)閉，僅觸發(fā)生命周期 onHide

5.uni.navigateBack(OBJECT)

關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面?？赏ㄟ^(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。

5.uni.preloadPage(OBJECT)

預(yù)加載頁(yè)面，是一種性能優(yōu)化技術(shù)。被預(yù)載的頁(yè)面，在打開(kāi)時(shí)速度更快。

以上路由API 已經(jīng)滿足我們的需求，當(dāng)然進(jìn)行路由跳轉(zhuǎn)的前提是我們需要在 pages.json 進(jìn)行路由配置, 包括路由和具體的樣式配置

而進(jìn)行具體路由跳轉(zhuǎn)我們需要如下，需要多加一個(gè) /

需要特別注意的一點(diǎn)是, 利用瀏覽器 在 進(jìn)行 移動(dòng)H5頁(yè)面調(diào)試時(shí)候，會(huì)出現(xiàn)頁(yè)面刷新之后頁(yè)面棧會(huì)消失，此時(shí)navigateBack不能返回，如果一定要返回可以使用history.back()導(dǎo)航到瀏覽器的其他歷史記錄。

uniapp 提供網(wǎng)絡(luò)請(qǐng)求的 api 是 uni.request ，具體支持的請(qǐng)求方法可以參考官網(wǎng) method 有效值

不過(guò)我們通常不會(huì)直接使用，而是進(jìn)過(guò)一系列的封裝以方便我們的使用，具體封裝接口使用會(huì)在隨根據(jù)頁(yè)面數(shù)據(jù)請(qǐng)求一并展示。

uniapp是未來(lái)的趨勢(shì)嗎？

未來(lái)太遙遠(yuǎn)，不想這么多，技術(shù)棧幾年一換才是常態(tài)。目前很多應(yīng)用開(kāi)發(fā)者在嘗試使用uni-app，可以嘗試一下，多學(xué)一點(diǎn)多一個(gè)技術(shù)選擇不是壞事。

想學(xué)一個(gè)長(zhǎng)久可用的技術(shù)，在IT界特別是中國(guó)，并不太現(xiàn)實(shí)。如果選擇了前端，那情況只怕是更糟。

uniapp是未來(lái)趨勢(shì)？NO！NO！

說(shuō)uniapp成為趨勢(shì)感覺(jué)有點(diǎn)好笑。

不懂行的可能不了解，我就換個(gè)說(shuō)法。

我可以說(shuō)手機(jī)行業(yè)小米手機(jī)會(huì)成為未來(lái)的趨勢(shì)嗎？

你認(rèn)為可能性多大？當(dāng)然不可否認(rèn)小米很優(yōu)秀了，當(dāng)然實(shí)話實(shí)說(shuō)，這也是相對(duì)的。想變成趨勢(shì)可謂有點(diǎn)夜郎自大。

uniapp是什么？簡(jiǎn)單點(diǎn)說(shuō)說(shuō)吧

一個(gè)基于vue的跨平臺(tái)開(kāi)發(fā)的框架，有了它你可以寫(xiě)一套代碼打包成安卓、蘋(píng)果安裝包，還可以導(dǎo)出各種小程序，還可以導(dǎo)出h5…，反正功能很強(qiáng)大。

它的出現(xiàn)，只要你懂點(diǎn)前端，只要你會(huì)點(diǎn)vue，OK那你就可以開(kāi)發(fā)APP了。

厲害不厲害？可以說(shuō)在某種程度上確實(shí)很牛逼，很方便，特別又是國(guó)產(chǎn)，文檔、demo之類(lèi)的很多。

平臺(tái)又出有云服務(wù)，支付，廣告等各種插件。小白上手也很快。所以一時(shí)圈了很粉，社區(qū)還算湊合吧。

uniapp之所以被越來(lái)越多的人需要，不得不說(shuō)下跨平臺(tái)。

APP開(kāi)發(fā)跨平臺(tái)確實(shí)是個(gè)剛需，也是一個(gè)真正的趨勢(shì)。畢竟純?cè)_(kāi)發(fā)一個(gè)APP太復(fù)雜了，成本也高。有些APP根本不需要關(guān)心所謂的性能、流暢度之類(lèi)的。所以跨平臺(tái)，一套代碼完全搞定，可謂是個(gè)不錯(cuò)的選擇。

但是跨平臺(tái)可選性的技術(shù)方案太多，與uniapp直接相對(duì)的，apicloud，在國(guó)產(chǎn)圈也是拉了不少粉。

此外rn，lonic，cordova，weex等之類(lèi)的前輩仍然具有一定的地位，還有新起來(lái)flutter也是火的不得了。

所以u(píng)niapp只能說(shuō)在小范圍內(nèi)可以說(shuō)很好，但是和那些成熟，風(fēng)靡海內(nèi)外的技術(shù)框架還是有差距的。

uniapp真的好用嗎？

首先，我感覺(jué)它越來(lái)越廢了。有時(shí)真是感覺(jué)積累！

開(kāi)發(fā)APP就專(zhuān)業(yè)開(kāi)發(fā)APP吧，你還搞的適配一堆小程序，所以造成越來(lái)越臃腫。文檔雜亂。

有時(shí)，選擇你，我就是想僅僅開(kāi)發(fā)APP。壓根不要小程序！

所以，特別是新手，因此會(huì)有一定的煩惱。

另一個(gè) 值得 吐槽的就是不太穩(wěn)定！

架構(gòu)經(jīng)常換，而且之前的很難兼容！

為此估計(jì)不少人想罵人。特別那些已經(jīng)有了成熟運(yùn)營(yíng)的APP。

再次升級(jí)的話，不好意思，很多東西重寫(xiě)吧。

從當(dāng)初非自定義組件、自定義組件，再到今天的v3架構(gòu)?？芍^一步一個(gè)坑，真的嚴(yán)重依賴(lài)它的話，真的花費(fèi)大精力去踩坑了。

當(dāng)然一般的開(kāi)發(fā)拿來(lái)用用還是不錯(cuò)的

我司項(xiàng)目開(kāi)始用的h5+那一套，也用uniapp做過(guò)幾個(gè)項(xiàng)目。反正要求不是很高，效果感覺(jué)還可以。

真的真的去完全適配安卓，蘋(píng)果的話，要做的還是有很多。

OK，就這了。技術(shù)本身無(wú)所謂好壞，只有適合不適合。

有時(shí)基于時(shí)間、項(xiàng)目成本、人員技術(shù)水平，只要合適就是最好的。

uniapp也一樣，希望它快快成長(zhǎng)，快快穩(wěn)定，完善吧！

uniapp目前確實(shí)很火，暫且不說(shuō)uniapp這種框架是不是未來(lái)的趨勢(shì)，但大前端絕對(duì)是未來(lái)的趨勢(shì)。

在計(jì)算機(jī)編程領(lǐng)域，前端近幾年的技術(shù)更新速度達(dá)到了頂峰。

這并不是得益于前端的語(yǔ)言?xún)?yōu)勢(shì)，而是開(kāi)放繁榮的生態(tài)。

uniapp這類(lèi)框架正是前端進(jìn)軍移動(dòng)互聯(lián)網(wǎng)的利刃。

移動(dòng)互聯(lián)網(wǎng)過(guò)時(shí)了嗎？不，移動(dòng)互聯(lián)網(wǎng)正在以新的形態(tài)進(jìn)軍PC。

所以，未來(lái)幾年uniapp這類(lèi)框架還會(huì)繁榮，而前端慢慢融合，PC與移動(dòng)的前端界限越來(lái)越模糊。

serverless是趨勢(shì)，unicloud正好整合了阿里云與騰訊云！

最重要的是unicloud開(kāi)始標(biāo)準(zhǔn)化，uni-id ,unicloud-admin就是苗頭！

聽(tīng)從開(kāi)發(fā)者建議且更新頻繁的框架！兩年左右完善度已經(jīng)非常高！

現(xiàn)在他們需要做的功能太多，所以一些細(xì)節(jié)性并未完善，一旦穩(wěn)定下來(lái)，他們能把一些細(xì)節(jié)做好，這個(gè)框架與開(kāi)發(fā)者工具絕對(duì)不容小噓！

免費(fèi)的服務(wù)器，免費(fèi)的框架，對(duì)于初創(chuàng)團(tuán)隊(duì)，或者個(gè)人創(chuàng)業(yè)者，有想法的開(kāi)發(fā)者，可以省大多成本！

自己獨(dú)立完成的項(xiàng)目(超級(jí)檔案)已上架小米，華為，蘋(píng)果應(yīng)用商店，同時(shí)，各大平臺(tái)小程序也全部上架！

不是。h5類(lèi)的優(yōu)勢(shì)在于開(kāi)發(fā)簡(jiǎn)單，周期短，一套代碼跑多端。適合初創(chuàng)快速迭代。任何一個(gè)成熟的產(chǎn)品在達(dá)到一定規(guī)模后，都會(huì)回歸原生，或者混合。這是性能，用戶(hù)體驗(yàn)，安全等多方面因素決定的。這也是有了rn后，為什么還會(huì)有flutter出現(xiàn)的原因。

何為趨勢(shì)？在互聯(lián)網(wǎng)高速發(fā)達(dá)的時(shí)代，物競(jìng)天擇的規(guī)律同樣適用，這個(gè)開(kāi)發(fā)平臺(tái)的主要目的就是解決了多平臺(tái)重復(fù)，跨平臺(tái)生態(tài)不好，開(kāi)發(fā)和使用用戶(hù)體驗(yàn)不好的問(wèn)題，真正做到了一套代碼全平臺(tái)適用，一勞永逸，同時(shí)還不影響平臺(tái)特色，隨著整個(gè)業(yè)內(nèi)開(kāi)發(fā)者的用戶(hù)數(shù)越來(lái)越多，勢(shì)必會(huì)取代不合時(shí)宜的開(kāi)發(fā)平臺(tái)。從目前的使用廣度和應(yīng)用產(chǎn)品的市場(chǎng)反饋來(lái)看，它是具備這個(gè)能力的。

uniapp還是很多人用的，尤其在現(xiàn)在這個(gè)時(shí)間，用來(lái)開(kāi)發(fā)小程序還是不錯(cuò)的

如果沒(méi)有意外的話，他還會(huì)保持現(xiàn)狀很長(zhǎng)時(shí)間

對(duì)于小型項(xiàng)目或者交互要求不高的項(xiàng)目來(lái)說(shuō)，基本是夠用的，這種項(xiàng)目又普遍對(duì)成本或者開(kāi)發(fā)效率非常敏感，在這點(diǎn)做的比uniapp好的確實(shí)不多，所以他的用戶(hù)群會(huì)非常穩(wěn)定

至于感覺(jué)上沒(méi)人討論的原因也很簡(jiǎn)單

一是有影響力的開(kāi)發(fā)人員幾乎不可能是uniapp的用戶(hù)，uniapp的用戶(hù)多數(shù)也提不出值得討論的內(nèi)容

二是這東西真沒(méi)什么可討論的，上限實(shí)在不高

uniapp目前在國(guó)內(nèi)的生態(tài)很好，因?yàn)榇笄岸耸勤厔?shì)，是uniapp在未來(lái)一段時(shí)間內(nèi)還是很火的，個(gè)人認(rèn)為如果創(chuàng)業(yè)階段如果沒(méi)有原生客戶(hù)端工程師，只有web團(tuán)隊(duì)，uniapp非常適合

目前來(lái)說(shuō)uniapp是 一款很好的開(kāi)發(fā)小程序的編碼工具，

優(yōu)點(diǎn)有

一：簡(jiǎn)單易學(xué)，學(xué)習(xí)成本低。

二:可以跨多個(gè)平臺(tái)，制作一套代碼可以在多個(gè)平臺(tái)發(fā)布

三：運(yùn)行比較流暢，運(yùn)行體驗(yàn)更好，兼容weex,組件·api和微信小程序一致

綜合以上幾點(diǎn)來(lái)看uniapp前景不錯(cuò)。

目前確實(shí)有這個(gè)趨勢(shì)。用uniapp開(kāi)發(fā)了一款app，叫小 時(shí)尚 ，目前已經(jīng)在各大應(yīng)用商店上線。

web前端簡(jiǎn)歷上uni-app開(kāi)發(fā)項(xiàng)目怎么寫(xiě)

web前端簡(jiǎn)歷上uni-app開(kāi)發(fā)項(xiàng)目需要在下載HBuliderX編輯器完成

首先，創(chuàng)建項(xiàng)目，選擇uniapp項(xiàng)目，選擇運(yùn)行方式運(yùn)行，開(kāi)發(fā)完成之后選擇發(fā)行到web前端。

uni-app是一個(gè)使用 Vuejs開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序，微信、支付寶、百度、頭條、QQ、釘釘、淘寶，快應(yīng)用等多個(gè)平臺(tái)。

uni-app開(kāi)發(fā)一個(gè)小視頻應(yīng)用(二)

前情回顧uni-app開(kāi)發(fā)一個(gè)小視頻應(yīng)用(一)上篇文章，我們已經(jīng)實(shí)現(xiàn)了首頁(yè)的頭部導(dǎo)航欄組件、底部的tabBar導(dǎo)航欄組件、中間的視頻列表組件以及視頻列表組件中的視頻播放組件，傳入視頻列表渲染后已經(jīng)可以上下滑動(dòng)進(jìn)行視頻切換和播放，接下來(lái)我們將完成首頁(yè)的剩余部分，左側(cè)信息欄組件、右側(cè)圖標(biāo)欄組件，以及完善視頻切換動(dòng)畫(huà)、播放控制等功能。

左側(cè)的信息欄組件，主要分三塊: 作者名、視頻標(biāo)題名、音樂(lè)名。這個(gè)左側(cè)信息欄信息是和當(dāng)前播放視頻相關(guān)聯(lián)的，所以應(yīng)該在循環(huán)視頻列表的時(shí)候，將左側(cè)信息欄組件一起渲染出來(lái)，所以左側(cè)信息欄組件應(yīng)該加到swiper-item中。

// components/list-left.vue

// components/video-list.vue

右側(cè)圖標(biāo)欄組件，主要分為: 頭像圖標(biāo)(頭像設(shè)置border-radius)、收藏圖標(biāo)(iconfont圖標(biāo))、評(píng)論圖標(biāo)(iconfont圖標(biāo))、分享圖標(biāo)(iconfont圖標(biāo))、音樂(lè)圖標(biāo)(圖片設(shè)置border-radius)，右側(cè)圖標(biāo)欄組件設(shè)置一個(gè)固定寬度，然后讓各種圖標(biāo)依次排列即可，如:

// components/list-right.vue

當(dāng)點(diǎn)擊頭像下部的加號(hào)圖標(biāo)，可以對(duì)該用戶(hù)進(jìn)行關(guān)注，即隱藏加號(hào)圖標(biāo)，還有就是收藏愛(ài)心圖標(biāo)顏色切換，當(dāng)點(diǎn)擊收藏愛(ài)心圖標(biāo)，愛(ài)心圖標(biāo)變成紅色，再次點(diǎn)擊收藏愛(ài)心圖標(biāo)，愛(ài)心圖標(biāo)變回白色，這里先只處理顏色的變化，具體后臺(tái)交互暫不處理。

// 在頭像圖標(biāo)下方通過(guò)絕對(duì)定位添加一個(gè)加號(hào)圖標(biāo)，并定位到頭像底部

所謂滑動(dòng)播放，即向上滑動(dòng)的時(shí)候，暫停當(dāng)前播放視頻并且播放下一個(gè)視頻，向下滑動(dòng)的時(shí)候，暫停當(dāng)前播放視頻，播放上一個(gè)視頻，而這最關(guān)鍵的就是如何判斷是向上滑動(dòng)還是向下滑動(dòng)。swiper組件給我們提供了一個(gè)change事件，我們可以監(jiān)聽(tīng)這個(gè)change事件，拿到滑動(dòng)完成后滑動(dòng)到了第幾頁(yè)，即swiper-item的序號(hào)(從0開(kāi)始)，然后與滑動(dòng)前的當(dāng)前page相比較，就可以知道是向上滑還是向下滑了。

判斷好了是上滑還是下滑后，我們還需要對(duì)上滑和下滑作出正確的處理，我們需要能夠拿到每個(gè)視頻播放組件，然后調(diào)用視頻播放組件上的相關(guān)方法對(duì)播放進(jìn)行控制，這就是涉及到了父組件如何調(diào)用子組件上方法，父組件要想調(diào)用子組件上的方法，關(guān)鍵是父組件要能夠拿到子組件對(duì)象，我們可以通過(guò)ref實(shí)現(xiàn)，因?yàn)槊恳粋€(gè)視頻播放組件是video-list視頻列表組件的一個(gè)子組件，所以我們可以在video-list視頻列表組件中給每一個(gè)video-player視頻播放組件添加上一個(gè)ref="player"，即可拿到對(duì)應(yīng)的視頻播放組件了。

// components/video-list.vue

要想實(shí)現(xiàn)單擊視頻播放組件，視頻可以進(jìn)行播放和暫停切換，那么我們需要給視頻播放組件添加一個(gè)isPlay屬性表示視頻是否處于播放中，如果是播放中，那么點(diǎn)擊就暫停，如果不是播放中，那么點(diǎn)擊就播放，同時(shí)，由于uni-app不支持vue的dblclick事件的，所以我們還需要對(duì)單擊和雙擊操作進(jìn)行判斷，我們需要定義一個(gè)變量用于記錄用戶(hù)點(diǎn)擊次數(shù)，如果300ms內(nèi)用戶(hù)點(diǎn)擊次數(shù)大于等于2，那么就是雙擊，否則就是單擊，如:

雙擊的時(shí)候會(huì)向video-list父組件(視頻列表組件)發(fā)送一個(gè)follow事件，video-list組件監(jiān)聽(tīng)到follow事件后再通知list-right組件調(diào)用其方法讓其愛(ài)心圖標(biāo)變紅即可，如:

之前我們的視頻播放組件接收了一個(gè)index屬性，即當(dāng)前視頻對(duì)應(yīng)的索引號(hào)，我們可以通過(guò)這個(gè)索引號(hào)判斷當(dāng)前視頻是否是第一個(gè)，然后將其video組件的autoPlay設(shè)置為true即可自動(dòng)播放。

至此，首頁(yè)已經(jīng)完成，效果圖如下:

原文地址：

uniapp開(kāi)發(fā)的知名項(xiàng)目的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于uniapp哪個(gè)公司開(kāi)發(fā)的、uniapp開(kāi)發(fā)的知名項(xiàng)目的信息別忘了在本站進(jìn)行查找喔。