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

混合開(kāi)發(fā)之uni-app

uni-app App端內(nèi)置weex渲染引擎，提供原生渲染能力

然而， Weex并不是一個(gè)前端框架 。實(shí)際上，前端框架僅僅是 Weex 的語(yǔ)法層或稱之為 DSL (Domain-specific Language)，它們與原生渲染引擎是分離的。換句話說(shuō)，Weex 并不依賴于特定的前端框架，隨著前端技術(shù)的發(fā)展，Weex 也可以集成更多廣泛使用的前端框架。

以往的 weex ，有個(gè)很大的問(wèn)題是它只是一個(gè)高性能的渲染器，沒(méi)有足夠的API能力，使得開(kāi)發(fā)時(shí)非常依賴原生工程師協(xié)作，開(kāi)發(fā)者本來(lái)想節(jié)約成本，結(jié)果需要前端、iOS、Android 3撥人開(kāi)發(fā)，適得其反。而 nvue 解決了這個(gè)大問(wèn)題，讓前端工程師可以直接開(kāi)發(fā)完整 App，并提供原生插件的市場(chǎng)交易和云打包。這些組合方案，開(kāi)發(fā)者切實(shí)的提高效率、降低成本。

如果你是web前端，不熟悉 weex，那么建議你仍然以使用 vue 為主，在App端某些 vue 表現(xiàn)不佳的場(chǎng)景下使用 nvue 作為強(qiáng)化補(bǔ)充：

uni-app App 端內(nèi)置 HTML5+ 引擎，讓 js 可以直接調(diào)用豐富的原生能力。

小程序及 H5 等平臺(tái)是沒(méi)有 HTML5+ 擴(kuò)展規(guī)范的，因此在 uni-app 調(diào)用 HTML5+ 的擴(kuò)展規(guī)范時(shí)，需要注意使用條件編譯。否則運(yùn)行到h5、小程序等平臺(tái)會(huì)出現(xiàn) plus is not defined錯(cuò)誤。

在普通的 H5+ 項(xiàng)目中，需要使用 document.addEventListener 監(jiān)聽(tīng)原生擴(kuò)展的事件。

uni-app 中，沒(méi)有 document?？梢允褂?plus.globalEvent.addEventListener 來(lái)實(shí)現(xiàn)（注意manifest中需開(kāi)啟新編譯器，即自定義組件模式"usingComponents":true）。

同理，在 uni-app 中使用 Native.js 時(shí)，一些 Native.js 中對(duì)于原生事件的監(jiān)聽(tīng)同樣需要按照上面的方法去實(shí)現(xiàn)。

注意：舊編譯器（非自定義組件模式）不支持 plus.globalEvent 這個(gè)對(duì)象。

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)求一并展示。

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開(kāi)發(fā)App，ios發(fā)布流程

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

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

1）關(guān)于版本信息：填寫(xiě)版本升級(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)? 最后提交審核就可以了。

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

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

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

插件：

坑：

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

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

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

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

uniapp開(kāi)發(fā)app的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于uniapp開(kāi)發(fā)app支持安卓版本4、uniapp開(kāi)發(fā)app的信息別忘了在本站進(jìn)行查找喔。