本篇文章給大家談?wù)剈niapp開發(fā)的知名項(xiàng)目，以及uni app項(xiàng)目對應(yīng)的知識點(diǎn)，希望對各位有所幫助，不要忘了收藏本站喔。

uni-app 入門到精通 （二）

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

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

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

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

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

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

成功后我們執(zhí)行

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

一般剛接觸前端的小伙伴可能會對 postcss 不太了解，這里簡單介紹一下，

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

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

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

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

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

2.uni.redirectTo(OBJECT)

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

3.uni.reLaunch(OBJECT)

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

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

4.uni.switchTab(OBJECT)

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

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

5.uni.navigateBack(OBJECT)

關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當(dāng)前的頁面棧，決定需要返回幾層。

5.uni.preloadPage(OBJECT)

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

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

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

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

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

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

uniapp和graceUI介紹

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

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

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

于是我找到一個基于uniapp的前段樣式庫框架GraceUI，

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

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

GraceUI官網(wǎng)

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

uniapp是未來的趨勢嗎？

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

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

uniapp是未來趨勢？NO！NO！

說uniapp成為趨勢感覺有點(diǎn)好笑。

不懂行的可能不了解，我就換個說法。

我可以說手機(jī)行業(yè)小米手機(jī)會成為未來的趨勢嗎？

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

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

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

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

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

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

uniapp之所以被越來越多的人需要，不得不說下跨平臺。

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

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

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

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

uniapp真的好用嗎？

首先，我感覺它越來越廢了。有時真是感覺積累！

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

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

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

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

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

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

再次升級的話，不好意思，很多東西重寫吧。

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

當(dāng)然一般的開發(fā)拿來用用還是不錯的

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

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

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

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

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

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

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

這并不是得益于前端的語言優(yōu)勢，而是開放繁榮的生態(tài)。

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

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

所以，未來幾年uniapp這類框架還會繁榮，而前端慢慢融合，PC與移動的前端界限越來越模糊。

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

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

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

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

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

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

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

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

uniapp還是很多人用的，尤其在現(xiàn)在這個時間，用來開發(fā)小程序還是不錯的

如果沒有意外的話，他還會保持現(xiàn)狀很長時間

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

至于感覺上沒人討論的原因也很簡單

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

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

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

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

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

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

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

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

綜合以上幾點(diǎn)來看uniapp前景不錯。

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

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

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

左側(cè)的信息欄組件，主要分三塊: 作者名、視頻標(biāo)題名、音樂名。這個左側(cè)信息欄信息是和當(dāng)前播放視頻相關(guān)聯(lián)的，所以應(yīng)該在循環(huán)視頻列表的時候，將左側(cè)信息欄組件一起渲染出來，所以左側(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))、評論圖標(biāo)(iconfont圖標(biāo))、分享圖標(biāo)(iconfont圖標(biāo))、音樂圖標(biāo)(圖片設(shè)置border-radius)，右側(cè)圖標(biāo)欄組件設(shè)置一個固定寬度，然后讓各種圖標(biāo)依次排列即可，如:

// components/list-right.vue

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

// 在頭像圖標(biāo)下方通過絕對定位添加一個加號圖標(biāo)，并定位到頭像底部

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

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

// components/video-list.vue

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

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

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

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

原文地址：

【uni-app】Vuex介紹和使用

無論你是使用 HX 還是使用 vue-cl i創(chuàng)建的uniapp項(xiàng)目,都已內(nèi)置 Vuex ,無需再進(jìn)行安裝

uni-app也像小程序一樣有 globalData ，這是一種簡單的 全局變量 機(jī)制

globalData 是簡單的全局變量，如果使用狀態(tài)管理，請使用 vuex

項(xiàng)目文件結(jié)構(gòu)

1.在 main.js 中導(dǎo)入store文件。

2.組裝模塊并導(dǎo)出 store

3.定義cart.js模塊(這里以購物車為例)

4.定義根級別的getters

5.使用

查看下效果

點(diǎn)擊添加按鈕

web前端簡歷上uni-app開發(fā)項(xiàng)目怎么寫

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

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

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

關(guān)于uniapp開發(fā)的知名項(xiàng)目和uni app項(xiàng)目的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。