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

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ì)該用戶進(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è)變量用于記錄用戶點(diǎn)擊次數(shù)，如果300ms內(nèi)用戶點(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寫(xiě)出來(lái)的項(xiàng)目需要去商店下載嗎

Un寫(xiě)出來(lái)的項(xiàng)目主要是兩個(gè)校長(zhǎng)垃圾ui APP寫(xiě)出來(lái)的項(xiàng)目是不需要去商店下載的，因?yàn)槟剡@是一個(gè)文件夾，我們只需要保存到U盤(pán)里面，或者說(shuō)是自己的存在電腦里面就可以了，所以格是不需要非常下載了。

uniapp開(kāi)發(fā)出來(lái)的與專業(yè)工具開(kāi)發(fā)出來(lái)的有區(qū)別嗎

有區(qū)別。

uniapp是一個(gè)開(kāi)放的、支持多種開(kāi)發(fā)工具的多端開(kāi)發(fā)框架。HBuilderX和uniapp，同屬一個(gè)公司，即DCloud出品。HBuilderX團(tuán)隊(duì)為uniapp做了大量的優(yōu)化和定制。當(dāng)然uniapp團(tuán)隊(duì)也為其他開(kāi)發(fā)工具提供了良好的支持，尤其是對(duì)vscode，比其他多端框架做的更多。

uniapp是一個(gè)使用Vuejs開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、Web、以及各種小程序、快應(yīng)用等多個(gè)平臺(tái)。

uniapp開(kāi)發(fā)App引導(dǎo)頁(yè)

App的引導(dǎo)頁(yè)是當(dāng)用戶第一次打開(kāi)一款A(yù)pp時(shí)所展示的3-5精美的圖片，用于告知用戶產(chǎn)品的功能及特點(diǎn)。好的引導(dǎo)頁(yè)會(huì)促使用戶對(duì)產(chǎn)品增加更多的興趣，當(dāng)然這是UI設(shè)計(jì)的能力體現(xiàn)了，盡管很多人都會(huì)快速的滑過(guò)。對(duì)于開(kāi)發(fā)人員怎么去添加這幾張圖片只有在用戶第一次打開(kāi)app時(shí)展示呢。

以u(píng)niapp開(kāi)發(fā)的項(xiàng)目為例：在onLaunch函數(shù)中，檢查flag是否為false，如果為false,則跳轉(zhuǎn)到引導(dǎo)頁(yè)面，在引導(dǎo)頁(yè)中可設(shè)置跳轉(zhuǎn)到首頁(yè)。注意，最好用reLaunch，避免，用戶物理按鍵返回；為true，則存儲(chǔ)flag到本地。原理既是如此；但是實(shí)際開(kāi)發(fā)時(shí)，會(huì)發(fā)現(xiàn)，存在閃屏現(xiàn)象，這樣用戶的體驗(yàn)就不太好，所以比較關(guān)鍵的地方就在于這塊，還是以u(píng)niapp為例，需要在uniapp的源碼視圖下將splashscreen的設(shè)置進(jìn)行修改，將autoclose改為false，在onLaunch中通過(guò)設(shè)置延遲時(shí)間調(diào)用plus.navigator.closeSplashscreen方法來(lái)關(guān)閉啟動(dòng)圖。delay設(shè)置為0。這樣啟動(dòng)圖的設(shè)置就ok了。

以下封裝了檢查是否進(jìn)入引導(dǎo)頁(yè)的方法，僅供參考下：

Tip:在多次的應(yīng)用中發(fā)現(xiàn)，如果在手機(jī)本身比較卡的情況下，用戶在第一次開(kāi)啟app時(shí)，還是會(huì)存在首頁(yè)在引導(dǎo)頁(yè)之前出現(xiàn)，這種情況的處理方式是將引導(dǎo)頁(yè)默認(rèn)設(shè)置為主頁(yè)，即在路由管理中，將引導(dǎo)頁(yè)寫(xiě)在第一個(gè)，然后通過(guò)flag去判斷是否跳轉(zhuǎn)到首頁(yè)；

以上的引導(dǎo)頁(yè)開(kāi)發(fā)只是提供一種思路，還有很多其他的方式，比如后端去控制是否展示引導(dǎo)頁(yè)，引導(dǎo)頁(yè)的動(dòng)態(tài)變化。當(dāng)然問(wèn)題本身不難實(shí)現(xiàn)，關(guān)鍵在于實(shí)際應(yīng)用時(shí)所存在的問(wèn)題。

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