今天給各位分享uniapp開發(fā)app案例的知識(shí)，其中也會(huì)對(duì)uniapp開發(fā)項(xiàng)目實(shí)例進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

uniapp開發(fā)App，ios發(fā)布流程

? ? ? ?第一步：在? App Store Connect 里，點(diǎn)擊【我的APP】，選擇你的應(yīng)用；

? ? ? ?第二步：添加新版本，然后把升級(jí)信息填完，選擇剛剛上傳的版本作為發(fā)布版本

1）關(guān)于版本信息：填寫版本升級(jí)的描述；

2）app預(yù)覽：讓設(shè)計(jì)做兩種尺寸的圖，關(guān)于app的功能介紹；

3）然后就是構(gòu)建版本了，選擇剛剛上傳的版本；

4）app審核信息備注：登錄流程/主要功能流程;

5)? 版本發(fā)布一般選擇手動(dòng)發(fā)布；

6）廣告標(biāo)識(shí)符通常選擇【是】，標(biāo)識(shí)復(fù)選框通常選后三個(gè)即可；

7)? 最后提交審核就可以了。

uniapp開發(fā)App引導(dǎo)頁

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

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

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

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

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

uni-app 入門到精通 （二）

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

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

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

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

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

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

成功后我們執(zhí)行

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

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

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

通常我們在寫移動(dòng)端時(shí)候需要做的是頁面適配方案的確定， 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è)計(jì)以 750*1334 iphone 6/6s 為基準(zhǔn)設(shè)計(jì)的話，你只需要將屏幕上 px 寫為 rpx 即可，不用做任何換算，如果不是的話，你就需要做如下?lián)Q算：

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

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

2.uni.redirectTo(OBJECT)

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

3.uni.reLaunch(OBJECT)

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

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

4.uni.switchTab(OBJECT)

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

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

5.uni.navigateBack(OBJECT)

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

5.uni.preloadPage(OBJECT)

預(yù)加載頁面，是一種性能優(yōu)化技術(shù)。被預(yù)載的頁面，在打開時(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頁面調(diào)試時(shí)候，會(huì)出現(xiàn)頁面刷新之后頁面棧會(huì)消失，此時(shí)navigateBack不能返回，如果一定要返回可以使用history.back()導(dǎo)航到瀏覽器的其他歷史記錄。

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

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

uni-app小程序開發(fā)踩坑記錄

最近要從零開發(fā)一個(gè)跟后臺(tái)管理系統(tǒng)對(duì)接的小程序，因?yàn)楣δ鼙容^復(fù)雜，時(shí)間短，選擇了比較火的uni-app，因?yàn)樾〕绦虺霈F(xiàn)的時(shí)間較短，各方面并不完善，開發(fā)過程中就是不斷踩坑的過程，特此記錄一小下。

uni-app雖然功能還不完善，但是插件市場里東西還是不少的，在搭建框架中因?yàn)樾枨笠蠼梃b了之前開發(fā)的PC端，所以有一些跟之前開發(fā)VUE相關(guān)的插件 ，可以提高開發(fā)效率，

插件：

坑：

1.覆蓋原生組件，需要用cover-view容器，但是cover-view里可包含的標(biāo)簽有限，類似view等在真機(jī)調(diào)試時(shí)不顯示，需全部替換成cover-view，且icon無法顯示，可以用cover-imaga代替。

2.小程序和小程序之間的跳轉(zhuǎn)（如騰訊云的人機(jī)滑動(dòng)驗(yàn)證），跳轉(zhuǎn)回來時(shí)需要進(jìn)行操作，此時(shí)可以判斷app.vue中的options，如果按小程序文檔中來說當(dāng)options.scene === 1038時(shí)是小程序跳回來的場景，但是部分手機(jī)跳回來是options.scene為1001，只能將這2種都作為跳轉(zhuǎn)判斷的條件。

3.小程序跳轉(zhuǎn)回來app中的onshow有時(shí)不執(zhí)行，這個(gè)原因暫未找到

4.在uniapp的H5版本 ，接入 騰訊云滑動(dòng)驗(yàn)證 ，示例的點(diǎn)擊滑動(dòng)驗(yàn)證元素是通過dom操作的，但是無效，可能跟uniAPP不支持dom操作有關(guān)系，采用定制接入方法一，手動(dòng)調(diào)用。

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

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

左側(cè)的信息欄組件，主要分三塊: 作者名、視頻標(biāo)題名、音樂名。這個(gè)左側(cè)信息欄信息是和當(dāng)前播放視頻相關(guān)聯(lián)的，所以應(yīng)該在循環(huán)視頻列表的時(shí)候，將左側(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))、評(píng)論圖標(biāo)(iconfont圖標(biāo))、分享圖標(biāo)(iconfont圖標(biāo))、音樂圖標(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)，還有就是收藏愛心圖標(biāo)顏色切換，當(dāng)點(diǎn)擊收藏愛心圖標(biāo)，愛心圖標(biāo)變成紅色，再次點(diǎn)擊收藏愛心圖標(biāo)，愛心圖標(biāo)變回白色，這里先只處理顏色的變化，具體后臺(tái)交互暫不處理。

// 在頭像圖標(biāo)下方通過絕對(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)聽這個(gè)change事件，拿到滑動(dòng)完成后滑動(dòng)到了第幾頁，即swiper-item的序號(hào)(從0開始)，然后與滑動(dòng)前的當(dāng)前page相比較，就可以知道是向上滑還是向下滑了。

判斷好了是上滑還是下滑后，我們還需要對(duì)上滑和下滑作出正確的處理，我們需要能夠拿到每個(gè)視頻播放組件，然后調(diào)用視頻播放組件上的相關(guān)方法對(duì)播放進(jìn)行控制，這就是涉及到了父組件如何調(diào)用子組件上方法，父組件要想調(diào)用子組件上的方法，關(guān)鍵是父組件要能夠拿到子組件對(duì)象，我們可以通過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)聽到follow事件后再通知list-right組件調(diào)用其方法讓其愛心圖標(biāo)變紅即可，如:

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

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

原文地址：

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