1.生命周期
1.1應(yīng)用的生命周期
1.onLaunch ——當(dāng)uni-app 初始化完成時(shí)觸發(fā)(全局只觸發(fā)一次)
2.onShow——當(dāng) uni-app 啟動(dòng),或從后臺(tái)進(jìn)入前臺(tái)顯示
3.onHide——當(dāng) uni-app 從前臺(tái)進(jìn)入后臺(tái)
4.onError——當(dāng) uni-app 報(bào)錯(cuò)時(shí)觸發(fā)
5.onUniNViewMessage——對(duì) nvue 頁(yè)面發(fā)送的數(shù)據(jù)進(jìn)行監(jiān)聽(tīng),可參考 nvue 向 vue 通訊
6.onUnhandledRejection——對(duì)未處理的 Promise 拒絕事件監(jiān)聽(tīng)函數(shù)(2.8.1+)
7.onPageNotFound——頁(yè)面不存在監(jiān)聽(tīng)函數(shù)
8.onThemeChange——監(jiān)聽(tīng)系統(tǒng)主題變化?
? ?1.2頁(yè)面的生命周期
1.onInit——監(jiān)聽(tīng)頁(yè)面初始化,其參數(shù)同 onLoad 參數(shù),為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù),參數(shù)類型為Object(用于頁(yè)面?zhèn)鲄ⅲ?,觸發(fā)時(shí)機(jī)早于 onLoad
2.onLoad——監(jiān)聽(tīng)頁(yè)面加載,其參數(shù)為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù),參數(shù)類型為Object(用于頁(yè)面?zhèn)鲄ⅲ?,參考示?/p>
3.onShow——監(jiān)聽(tīng)頁(yè)面顯示。頁(yè)面每次出現(xiàn)在屏幕上都觸發(fā),包括從下級(jí)頁(yè)面點(diǎn)返回露出當(dāng)前頁(yè)面4.onReady——監(jiān)聽(tīng)頁(yè)面初次渲染完成。注意如果渲染速度快,會(huì)在頁(yè)面進(jìn)入動(dòng)畫(huà)完成前觸發(fā)
5.onHide——監(jiān)聽(tīng)頁(yè)面隱藏
6.onUnload——監(jiān)聽(tīng)頁(yè)面卸載
7.onResize——監(jiān)聽(tīng)窗口尺寸變化
1.3組件的生命周期
1.beforeCreate——在實(shí)例初始化之后被調(diào)用。
2.created——在實(shí)例創(chuàng)建完成后被立即調(diào)用。
3.beforeMount——在掛載開(kāi)始之前被調(diào)用。
4.mounted——掛載到實(shí)例上去之后調(diào)用。詳見(jiàn) 注意:此處并不能確定子組件被全部掛載,如果需要子組件完全掛載之后在執(zhí)行操作可以使用$nextTickVue官方文檔
5.beforeUpdate——數(shù)據(jù)更新時(shí)調(diào)用,發(fā)生在虛擬DOM打補(bǔ)丁之前。
6.updated——由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁,在這之后會(huì)調(diào)用該鉤子。
7.beforeDestroy——實(shí)例銷毀之前調(diào)用。在這一步,實(shí)例仍然完全可用。
8.destroyed——Vue實(shí)例銷毀后調(diào)用。調(diào)用后,Vue實(shí)例指示的所有東西都會(huì)解綁定,所有的事件監(jiān)聽(tīng)器會(huì)被移除,所有的子實(shí)例也會(huì)被銷毀。
?2.Uniapp中的本地緩存
同步存儲(chǔ):uni.setStorageSync獲取:uni.getStorageSync異步存儲(chǔ):uni.setStorage獲?。簎ni.getStorage
3.Uniapp 中的路由跳轉(zhuǎn)
uni.navigateTo({url:})保留當(dāng)前頁(yè)面,只能打開(kāi)非 tabBar 頁(yè)面。
uni.redirectTo({})關(guān)閉卸載當(dāng)前頁(yè)面,只能打開(kāi)非 tabBar 頁(yè)面
uni.switchTab打開(kāi) tabBar 頁(yè)面,不能url傳參
uni.reLaunch({})關(guān)閉卸載所有頁(yè)面,可以打開(kāi)任意頁(yè)面
4.條件編譯
#ifdef:ifdefined 僅在某平臺(tái)存在
#ifndef:ifnot defined 除了某平臺(tái)均存在
%PLATFORM%:平臺(tái)名稱
5.uniapp的配置文件、入口文件、主組件、頁(yè)面管理部
pages.json
配置文件,全局頁(yè)面路徑配置,應(yīng)用的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色設(shè)置等
main.js
入口文件,主要作用是初始化vue實(shí)例、定義全局組件、使用需要的插件如 vuex,注意uniapp無(wú)法使用vue-router,路由須在pages.json中進(jìn)行配置。如果開(kāi)發(fā)者堅(jiān)持使用vue-router,可以在插件市場(chǎng)找到轉(zhuǎn)換插件。
App.vue
是uni-app的主組件,所有頁(yè)面都是在App.vue下進(jìn)行切換的,是頁(yè)面入口文件。但App.vue本身不是頁(yè)面,這里不能編寫(xiě)視圖元素。除此之外,應(yīng)用生命周期僅可在App.vue中監(jiān)聽(tīng),在頁(yè)面監(jiān)聽(tīng)無(wú)效。
pages
頁(yè)面管理部分用于存放頁(yè)面或者組件
manifest.json
文件是應(yīng)用的配置文件,用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等。HBuilderX 創(chuàng)建的工程此文件在根目錄,CLI 創(chuàng)建的工程此文件在 src 目錄。
package.json
配置擴(kuò)展,詳情內(nèi)容請(qǐng)見(jiàn)官網(wǎng)描述package.json概述
全局變量globalData的理解
globalDate和微信小程序中一樣,是定義在全局上的對(duì)象,他類似于vuex,用來(lái)共享全局狀態(tài),在組件和頁(yè)面中可以使用getApp().globalData來(lái)獲取和修改全局變量。
//app.vue
<script>
? ? export default {
? ? ? ? globalData: {
? ? ? ? ? ? msg: 'hello world'
? ? ? ? }
? ? }
</script>
//在其他頁(yè)面調(diào)用/修改全局變量
getApp().globalData.msg= 'hello world'
6.rpx、px、em、rem、%、vh、vw的區(qū)別是什么?
rpx 相當(dāng)于把屏幕寬度分為750份,1份就是1rpxpx 絕對(duì)單位,頁(yè)面按精確像素展示em 相對(duì)單位,相對(duì)于它的父節(jié)點(diǎn)字體進(jìn)行計(jì)算rem 相對(duì)單位,相對(duì)根節(jié)點(diǎn)html的字體大小來(lái)計(jì)算% 一般來(lái)說(shuō)就是相對(duì)于父元素vh 視窗高度,1vh等于視窗高度的1%vw 視窗寬度,1vw等于視窗寬度的1%
7.頁(yè)面樣式兼容
1.在ios鍵盤(pán)中首字母大寫(xiě)的問(wèn)題??
<input type="text" autocapitalize='off'>
2. ios日期轉(zhuǎn)換NAN問(wèn)題
? ? ? ? 具體就是,new Date('2020-11-12 00:00:00')在ios中會(huì)為NAN
? ? ? ? 解決方案:用new Date('2020/11/12 00:00:00')的日期格式,或者寫(xiě)個(gè)正則轉(zhuǎn)換
3. 在移動(dòng)端使用click事件有300ms延遲的問(wèn)題
? ? ? ? 禁止雙擊縮放===》meta:user-scalabel=no
4. 移動(dòng)端touch事件有穿透(點(diǎn)透)的問(wèn)題,怎么解決?
? ? ? ? 4.1 阻止默認(rèn)行為 : e.preventDefault();
? ? ? ? 4.2 fastclick.js
5. 安卓部分版本input的placeholder偏上
? ? ? ? input{
? ? ? ? ? ? ? line-height:normal;
? ? ? ? }
2. ios日期轉(zhuǎn)換NAN問(wèn)題? ? ? ? 具體就是,new Date('2020-11-12 00:00:00')在ios中會(huì)為NAN? ? ? ? 解決方案:用new Date('2020/11/12 00:00:00')的日期格式,或者寫(xiě)個(gè)正則轉(zhuǎn)換
3. 在移動(dòng)端使用click事件有300ms延遲的問(wèn)題? ? ? ? ?禁止雙擊縮放===》meta:user-scalabel=no4. 移動(dòng)端touch事件有穿透(點(diǎn)透)的問(wèn)題,怎么解決?? ? ? ??
?7 阻止默認(rèn)行為 : e.preventDefault();? ? ? ? ?4.2 fastclick.js5. 安卓部分版本input的placeholder偏上? ? ? ? input{? ? ? ? ? ? ? ?line-height:normal;? ? ? ? }
8.uniapp獲取地理位置的API是什么?
uni.getLocation
16.請(qǐng)簡(jiǎn)要介紹一下UniApp中的導(dǎo)航欄組件。
在UniApp中,導(dǎo)航欄組件用于實(shí)現(xiàn)頁(yè)面的頂部導(dǎo)航欄,并提供了一些常用的配置選項(xiàng)。
UniApp中常見(jiàn)的導(dǎo)航欄組件是uni-navigator,它可以在頁(yè)面中嵌入導(dǎo)航欄,并通過(guò)屬性進(jìn)行配置。以下是uni-navigator組件的一些常用屬性:
title:指定導(dǎo)航欄標(biāo)題文字。
color:設(shè)置導(dǎo)航欄文字顏色。
background-color:設(shè)置導(dǎo)航欄背景顏色。
back-icon:設(shè)置返回按鈕的圖標(biāo)樣式。
home-icon:設(shè)置首頁(yè)按鈕的圖標(biāo)樣式。
float:設(shè)置導(dǎo)航欄是否浮動(dòng)(懸浮模式),用于實(shí)現(xiàn)下拉時(shí)導(dǎo)航欄顯示或隱藏。
除了uni-navigator組件,UniApp還提供了其他導(dǎo)航相關(guān)的組件,如:
uni-NavBar:適用于App端的導(dǎo)航欄組件,提供了更多的定制化和交互功能。
uni-tab-bar:底部導(dǎo)航欄組件,用于實(shí)現(xiàn)多個(gè)頁(yè)面之間的切換。
uni-segmented-control:分段器組件,用于實(shí)現(xiàn)頁(yè)面內(nèi)的切換導(dǎo)航。
通過(guò)使用這些導(dǎo)航欄組件,可以在UniApp中輕松地創(chuàng)建和配置導(dǎo)航功能,提升應(yīng)用程序的用戶體驗(yàn)。
uniapp 中的路由是怎樣實(shí)現(xiàn)的?請(qǐng)介紹基本用法。
Uniapp 中的路由是由框架自帶的 Vue Router 實(shí)現(xiàn)的?;居梅ㄈ缦拢?/p>
在 pages.json 文件中配置頁(yè)面路徑和需要加載的頁(yè)面組件。
在頁(yè)面組件中使用 <template>、<script> 和 <style> 標(biāo)簽,其中 <template> 標(biāo)簽中是頁(yè)面的內(nèi)容,<script> 標(biāo)簽中定義頁(yè)面組件的相關(guān)屬性,<style> 標(biāo)簽中定義頁(yè)面的樣式。
使用 uni.navigateTo() 或 uni.redirectTo() 方法進(jìn)行頁(yè)面跳轉(zhuǎn)。
uni.navigateTo() 方法用于從當(dāng)前頁(yè)面跳轉(zhuǎn)到新頁(yè)面,并向新頁(yè)面?zhèn)鬟f數(shù)據(jù),即保留當(dāng)前頁(yè)面,跳轉(zhuǎn)到新頁(yè)面。新頁(yè)面可以通過(guò) uni.getOpenerEventChannel() 獲取當(dāng)前頁(yè)面的 EventChannel 對(duì)象,以便進(jìn)行數(shù)據(jù)傳遞。
uni.redirectTo() 方法用于關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到新頁(yè)面,即不保留當(dāng)前頁(yè)面。
在頁(yè)面組件中使用 this.$route.params 獲取上一個(gè)頁(yè)面?zhèn)鬟f的參數(shù),并使用 this.$route.query 獲取頁(yè)面跳轉(zhuǎn)時(shí)傳遞的參數(shù)。
使用 uni.navigateBack() 方法返回上一個(gè)頁(yè)面,可以通過(guò) delta 參數(shù)設(shè)置返回的層數(shù)。
除了基本用法,還可以通過(guò)路由守衛(wèi)實(shí)現(xiàn)一些高級(jí)用法,例如頁(yè)面訪問(wèn)權(quán)限控制、頁(yè)面訪問(wèn)記錄等。
9.分包
因小程序有體積和資源加載限制,各家小程序平臺(tái)提供了分包方式,優(yōu)化小程序的下載和啟動(dòng)速度。所謂的主包,即放置默認(rèn)啟動(dòng)頁(yè)面及TabBar頁(yè)面,而分包則是根據(jù) pages.json的配置進(jìn)行劃分。在小程席啟動(dòng)時(shí),默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面,當(dāng)用戶進(jìn)入分包內(nèi)某個(gè)頁(yè)面時(shí),會(huì)把對(duì)應(yīng)分包自動(dòng)下載下來(lái),下載完成后再進(jìn)行展示,此時(shí)終端界面會(huì)有等待提示。subPackages":[
"root":"news"
"pages":[(
"path":"index"
style":"navigationBarTitleText":“新聞中心"
"navigationBarBackgroundColor":“#FFFFFF""navigationBarTextStyle":"black","backgroundColor":"#FFFFFF"
10.獲取當(dāng)前用戶的手機(jī)信息
uni-app提供了異步( uni.getsystemInfo)和同步( unigetsystemInfosync )的2個(gè)API獲取系統(tǒng)信息。系統(tǒng)信息返回的內(nèi)容非常多,各操作系統(tǒng)、各家小程序、各瀏覽器對(duì)它們的定義也不相同。un-app里重新梳理了這些念,同時(shí)為了向下兼容也保留了這些平臺(tái)原來(lái)的概念,但不推薦使用。按照運(yùn)行環(huán)境層級(jí)排序,從底層向上,uni-app有6個(gè)概念: device(抵歪絲) : 運(yùn)行應(yīng)用的設(shè)備,如iphone、huawei os : 設(shè)備的操作系統(tǒng),如 ios、andriod、windows、 mac、 linux rom : 基于操作系統(tǒng)的定制,Android系統(tǒng)特有概念,如miui、鴻蒙 host :運(yùn)行應(yīng)用的宿主程序,即OS和應(yīng)用之間的運(yùn)行環(huán)境,如瀏覽器、微信等小程序宿主、集成uniMPSDK的App,un-app直接開(kāi)發(fā)的app沒(méi)有host概念 uni : uniapp框架相關(guān)的信息,如uni-app框架的編譯器版本、運(yùn)行時(shí)版本 app : 開(kāi)發(fā)者的應(yīng)用相關(guān)的信息,如應(yīng)用名稱、版本
12.監(jiān)聽(tīng)到下拉刷新的動(dòng)作
需要用到uni.onPullDownRefresh和uni.stopPullDownRefresh這兩個(gè)函數(shù),函數(shù)與生命周期同等級(jí)可以監(jiān)聽(tīng)頁(yè)面下拉動(dòng)作
13.uniapp實(shí)現(xiàn)上拉加載
uniapp中的上拉加載是通過(guò)onReachBottom()這個(gè)生命周期函數(shù)實(shí)現(xiàn),當(dāng)下拉觸底時(shí)就會(huì)觸發(fā)。我們可以在此函數(shù)內(nèi)調(diào)用分頁(yè)接口請(qǐng)求數(shù)據(jù),用以獲取更多的數(shù)據(jù)
14. 在Uniapp中,如何使用原生SDK以及插件?
在Uniapp中,可通過(guò)uni-app plus的方式來(lái)集成原生SDK和插件。具體實(shí)現(xiàn)方式是,在manifest.json文件中添加對(duì)應(yīng)的插件設(shè)置,并在代碼中調(diào)用相關(guān)API使用內(nèi)置的SDK和插件。15. 描述一下在Uniapp中如何實(shí)現(xiàn)動(dòng)態(tài)路由。在Uniapp中,可通過(guò)vue-router實(shí)現(xiàn)動(dòng)態(tài)路由。具體實(shí)現(xiàn)方式是,在定義路由時(shí),使用動(dòng)態(tài)路由參數(shù)設(shè)置路由的路徑,然后在組件中通過(guò)$route.params來(lái)獲取路由參數(shù),以便進(jìn)行頁(yè)面的動(dòng)態(tài)渲染。
15.小程序的發(fā)布流程(開(kāi)發(fā)流程)
1.申請(qǐng)注冊(cè)微信小程序賬號(hào),注意:注冊(cè)賬號(hào)之后會(huì)有一個(gè)AppID,下載微信開(kāi)發(fā)者工具,新建項(xiàng)目的時(shí)候需要填上,否則很多功能用不了,比如不能預(yù)覽、不能上傳代碼等問(wèn)題。
2.通過(guò)微信開(kāi)發(fā)工具新建項(xiàng)目。
3.根據(jù)業(yè)務(wù)需求配置小程序,并進(jìn)行業(yè)務(wù)代碼的開(kāi)發(fā)。
4.如果涉及到發(fā)送請(qǐng)求,需要在小程序后臺(tái)管理頁(yè)面配置服務(wù)器合法域名,或者關(guān)閉域名校驗(yàn)(部署則必須配置合法域名,域名必須是https協(xié)議的,并且已經(jīng)備案了)(這里有可能問(wèn)http和https的區(qū)別)
5.開(kāi)發(fā)完成之后點(diǎn)擊上傳代碼可以將小程序發(fā)不到體驗(yàn)版
6.體驗(yàn)版確定無(wú)誤后提交審核,審核通過(guò)后就可以正式上線了。