本篇文章給大家談?wù)剈niapp開(kāi)發(fā)app準(zhǔn)備，以及uniapp安卓應(yīng)用開(kāi)發(fā)對(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ì)象。

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)題。

七、uni-app 原生插件開(kāi)發(fā)03 - 制作自定義基座

在制作之前，需要做以下準(zhǔn)備工作：

其中，provision profile 的路徑為：

p12 文件在 keychain 中導(dǎo)出。

在 HBuilderX 中，選擇制定自定義 調(diào)試基座 選項(xiàng)。

點(diǎn)擊之后，進(jìn)行 iOS 的相關(guān)配置：

配置完成之后，點(diǎn)擊打包按鈕，查看控制臺(tái)：

此時(shí)，完成了自定義基座 。

我們從控制臺(tái)輸出可以看出：

連接真機(jī)設(shè)備，然后點(diǎn)擊運(yùn)行按鈕，選擇真機(jī)設(shè)備運(yùn)行。

控制臺(tái)輸出如下：

按照控制臺(tái)提示，在手機(jī)上打開(kāi)新安裝的 APP，就可以開(kāi)始調(diào)試了。

uniapp框架開(kāi)發(fā)技巧

//以下摘自官方文檔

/*Vue 在更新 DOM 時(shí)是異步執(zhí)行的。只要偵聽(tīng)到數(shù)據(jù)變化，Vue 將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。例如，當(dāng)你設(shè)置 vm.someData = 'new value'，該組件不會(huì)立即重新渲染。當(dāng)刷新隊(duì)列時(shí)，組件會(huì)在下一個(gè)事件循環(huán)“tick”中更新。多數(shù)情況我們不需要關(guān)心這個(gè)過(guò)程，但是如果你想基于更新后的 DOM 狀態(tài)來(lái)做點(diǎn)什么，這就可能會(huì)有些棘手。雖然 Vue.js 通常鼓勵(lì)開(kāi)發(fā)人員使用“數(shù)據(jù)驅(qū)動(dòng)”的方式思考，避免直接接觸 DOM，但是有時(shí)我們必須要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用。*/

//意思就是vue在更新視圖層得數(shù)據(jù)時(shí)是異步得，可是有時(shí)候我們?cè)诖a中想要等待數(shù)據(jù)完全渲染上去dom節(jié)點(diǎn)之后再進(jìn)行獲取節(jié)點(diǎn)信息操作。比如使用selectorQuery.select(selector) 等相關(guān)api時(shí)，如果直接使用有時(shí)候會(huì)獲取不到正確的數(shù)據(jù)，此時(shí)可以通過(guò)this.$nextTick(callback)的方式在回調(diào)函數(shù)里面進(jìn)行操作dom節(jié)點(diǎn)

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

關(guān)于uniapp開(kāi)發(fā)app準(zhǔn)備和uniapp安卓應(yīng)用開(kāi)發(fā)的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。