유니앱의 라이프사이클에 대한 심층 분석

이 글은 uniapp 선언 주기에 대한 관련 지식을 주로 소개하며, 애플리케이션 선언 주기, 페이지 수명 주기 및 구성 요소 수명 주기와 관련된 내용을 소개합니다.

권장: "uniapp tutorial"

애플리케이션 수명주기

uni-app는 다음과 같은 애플리케이션 수명주기 기능을 지원합니다: uni-app 支持如下应用生命周期函数：

函数名

说明

onLaunch

当uni-app 初始化完成时触发（全局只触发一次）

onShow

当 uni-app 启动，或从后台进入前台显示

onHide

当 uni-app 从前台进入后台

onError

当 uni-app 报错时触发

onUniNViewMessage

对 nvueonLaunchuni-app 초기화가 완료되면 트리거됩니다(전역 한 번만 트리거됨) onShowuni-app이 실행될 때 또는 uni-app이 실행될 때 onHide을 표시하기 위해 백그라운드에서 포그라운드로 들어갑니다. code>가 포그라운드에서 입력됩니다. 배경 onError

함수 이름	설명

🎜은 uni-app이 nvue 페이지는 nvue to vue Communication🎜🎜🎜🎜onUnhandledRejection🎜🎜처리되지 않은 Promise에 대한 이벤트 리스닝 기능 거부(2.8.1+)🎜🎜🎜🎜onPageNotFound🎜🎜페이지에 리스닝 기능이 없습니다🎜🎜🎜을 참조하세요. 🎜onThemeChange🎜🎜리스닝 시스템 테마 변경🎜🎜🎜🎜<p><strong>Note</strong></p> <ul> <li>애플리케이션 라이프사이클은 <code>App.vue에서만 모니터링 가능하며, 다른 페이지에서의 모니터링은 무효입니다. App.vue中监听，在其它页面监听无效。

onlaunch里进行页面跳转，如遇白屏报错，请参考onlaunch生命周期内navigateto跳转页面注意 - DCloud问答

onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

页面生命周期

uni-appOnlaunch 페이지 점프, 흰색 화면 오류가 발생하는 경우 onlaunch 라이프 사이클의 점프 페이지 참고 탐색을 참조하세요 - DCloud Q&A

onPageNotFound 페이지가 실제로 열렸습니다(예: 카드, 미니 프로그램 코드를 공유하여 페이지가 존재하지 않는 것으로 확인되면 존재하지 않는 페이지로의 API 점프가 트리거되지 않습니다(예: uni.navigateTo)

페이지 수명 주기

uni-app는 다음 페이지 수명 주기 기능을 지원합니다: 최소 버전3.1.0+onResizeonPullDownRefresh사용자 풀다운 동작을 모니터링합니다. 일반적으로 풀다운 새로 고침에 사용됩니다. 예제를 참조하세요.onReachBottom페이지가 아래쪽으로 스크롤될 때(스크롤이 아님) -하단 보기), 데이터의 다음 페이지를 아래로 내리는 데 자주 사용됩니다. 자세한 내용은 아래 참고 사항을 참조하세요onTabItemTapWeChat 애플릿, Alipay 애플릿, Baidu 애플릿, H5, AppWeChat 애플릿, QQ 애플릿, Alipay 애플릿, 바이트 애플릿, Feishu 애플릿, Kuaishou 애플릿페이지 스크롤을 듣습니다. 매개변수는 Object입니다.onNavigationBarButtonTap기본 제목 표시줄 버튼 클릭 이벤트를 듣습니다. 매개변수는 Object입니다. onBackPress리턴 이벤트 = {from:backbutton, NavigateBack}, 백버튼은 소스가 왼쪽 상단 모서리에 있는 리턴 버튼이거나 NavigationBack이 소스임을 의미합니다. uni.navigateBack; 자세한 설명 및 사용: onBackPress 자세한 설명. Alipay 애플릿은 실제 시스템에 의해서만 트리거될 수 있고, NavigateBack으로 인해 발생하지 않은 반품만 모니터링할 수 있으며 기본 동작을 방지할 수 없습니다. onNavigationBarSearchInputChanged 기본 제목 표시줄 검색 입력 상자1.6.01.6.0onNavigationBarSearchInputClicked기본 제목 표시줄 검색 입력 상자 클릭 이벤트를 수신합니다(pages.json에서 비활성화된 searchInput 구성이 true인 경우에만 트리거됨)App, H5

함수 이름

description

플랫폼 차이 설명

onInit

청취 페이지 초기화, 해당 매개변수는 이전 페이지에서 전달된 데이터인 onLoad 매개변수와 동일합니다. 매개변수 유형은 Object(페이지 매개변수에 사용됨)입니다. . 트리거 시간은 onLoad

Baidu Mini Program

onLoad

이전 페이지에서 전달된 데이터입니다. 페이지 매개변수) 페이지 표시를 모니터링하려면

onShow

예시를 참조하세요. 페이지의 초기 렌더링 완료를 듣는 현재 페이지

onReady

를 노출하기 위해 하위 수준 페이지에서 돌아오는 것을 포함하여 페이지가 화면에 나타날 때마다 트리거됩니다. 렌더링 속도가 빠르면 페이지 항목 애니메이션이 완료되기 전에 트리거됩니다. 페이지 제거

창 크기 변경

앱, WeChat 애플릿

탭을 클릭하면 트리거됩니다. 자세한 내용은 아래 참고 사항을 참조하세요.

onShareAppMessage

사용자는 오른쪽 상단을 클릭하여 공유합니다

onPageScroll

nvue는 아직 지원되지 않습니다

App, H5

app, H5, Alipay 애플릿

App의 입력 내용 변경 이벤트를 모니터링합니다. H5

onNavigation BarSearchInput확인됨

사용자가 소프트 키보드에서 "검색" 버튼을 클릭할 때 트리거되는 기본 제목 막대 검색 입력 상자 검색 이벤트를 수신합니다.

App, H5

1.6 .0

onShareTimeline

사용자가 오른쪽 상단을 클릭하여 Moments

WeChat 애플릿

2.8.1+

onAddToFavorites

으로 전달하도록 모니터링합니다. 사용자가 오른쪽 상단을 클릭하는지 모니터링합니다. 컬렉션 코너

WeChat 애플릿

2.8 .1+

onInit 사용 참고 사항onInit使用注意

• 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
• 其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑
• 不依赖页面传参的逻辑可以直接使用 created 生命周期替代

onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档

onPageScroll （监听滚动、滚动监听、滚动事件）参数说明：

属性	类型	说明
scrollTop	Number	页面在垂直方向已滚动的距离（单位px）

注意

• onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。
• 如果想实现滚动时标题栏透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent，参考。
• 如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考插件市场。插件市场也有其他js实现的吸顶插件，但性能不佳，需要时可自行搜索。
• 在App、微信小程序、H5中，也可以使用wxs监听滚动，参考；在app-nvue中，可以使用bindingx监听滚动，参考。
• onBackPress上不可使用async，会导致无法阻止默认返回

onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
    console.log("滚动距离为：" + e.scrollTop);
},

onTabItemTap 返回的json对象说明：

属性	类型	说明
index	String	被点击tabItem的序号，从0开始
pagePath	String	被点击tabItem的页面路径
text	String	被点击tabItem的按钮文字

注意

• onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。
• 如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一个区块盖住原先的tabitem，并拦截点击事件。
• 支付宝小程序平台onTabItemTap表现为点击非当前tabitem后触发，因此不能用于实现点击返回顶部这种操作

onTabItemTap : function(e) {
    console.log(e);
    // e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
},

onNavigationBarButtonTap 参数说明：

属性	类型	说明
index	Number	原生标题栏按钮数组的下标

onNavigationBarButtonTap : function (e) {
    console.log(e);
    // e的返回格式为json对象：{"text":"测试","index":0}
}

onBackPress

• Baidu Mini Program Basic Library 3.260 이상에서만 onInit 수명 주기를 지원합니다.
• 다른 버전이나 플랫폼에서는 onLoad 수명 주기를 사용할 수 있습니다. 동시에 호환성을 위해 동일한 로직을 반복적으로 실행하지 않도록 주의하세요.
• 페이지 매개변수에 의존하지 않는 로직은 생성된 라이프 사이클로 직접 대체될 수 있습니다.

onReachBottom사용 참고 사항은 페이지에서 확인할 수 있습니다. json의 특정 페이지 하단에 onReachBottomDistance 트리거 거리를 정의합니다. 예를 들어 50으로 설정하면 페이지가 50px로 스크롤됩니다. 하단에서는 onReachBottom 이벤트가 트리거됩니다. 스크롤뷰를 사용하고 페이지가 스크롤되지 않으면 하단 이벤트가 발생하지 않습니다. 스크롤뷰가 하단으로 스크롤되는 이벤트는 스크롤뷰 속성 TypeDescription Number페이지가 세로 방향으로 스크롤된 거리(단위 px)

onPageScroll 문서를 참조하세요. (스크롤링 청취, 스크롤링 청취, 스크롤링 이벤트) 매개변수 설명:
		scrollTop

🎜🎜🎜🎜🎜Note🎜🎜

• Do 아니 onPageScroll에 쓰기 페이지를 자주 수정하는 등 복잡한 js와 상호작용합니다. 이 라이프사이클은 렌더링 레이어에서 트리거되기 때문에 h5가 아닌 쪽에서는 js가 로직 레이어에서 실행되고 두 레이어 간의 통신이 끊어집니다. 스크롤 과정에서 두 레이어 간의 데이터 교환이 자주 발생하면 지연이 발생할 수 있습니다.
• 스크롤할 때 제목 표시줄의 투명한 그라데이션을 얻으려면 App 및 H5에서 참조용으로 Pages.json의 titleNView 아래 유형을 투명하게 구성할 수 있습니다.
• 특정 요소를 수정하기 위해 천장을 스크롤해야 하는 경우 CSS 고정 레이아웃을 사용하고 플러그인 마켓을 참조하는 것이 좋습니다. 플러그인 시장에는 다른 js 구현 천장 플러그인도 있지만 성능이 좋지 않습니다. 필요할 때 직접 검색할 수 있습니다.
• App, WeChat 애플릿 및 H5에서는 참조용으로 wxs를 사용하여 스크롤을 모니터링할 수 있습니다. app-nvue에서는 바인딩x를 사용하여 참조용으로 스크롤을 모니터링할 수 있습니다.
• async는 onBackPress에서 사용할 수 없으며 이로 인해 기본 반환을 방지하지 못하게 됩니다.

export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

🎜onTabItemTap 반환된 json 개체 설명: 🎜🎜🎜🎜🎜Attribute🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜index🎜🎜String🎜🎜클릭한 tabItem의 일련 번호, 0🎜🎜부터 시작 🎜 🎜pageP ath🎜🎜String🎜🎜 클릭한 tabItem의 페이지 경로🎜🎜🎜🎜text🎜🎜String🎜🎜클릭한 tabItem의 버튼 텍스트🎜🎜🎜🎜🎜🎜Note🎜🎜

• onTabItemTap 종종 현재 탭 항목을 클릭하거나 현재 페이지를 스크롤하거나 새로 고치는 데 사용됩니다. 다른 탭 항목을 클릭하면 페이지 전환이 반드시 실행됩니다.
• 페이지로 이동하지 않고 앱 측에서 탭 항목을 클릭하려면 onTabItemTap을 사용할 수 없습니다. plus.nativeObj.view를 사용하여 원래 탭 항목을 덮고 클릭을 차단할 수 있습니다. 이벤트.
• Alipay 애플릿 플랫폼 onTabItemTap은 현재 존재하지 않는 탭 항목을 클릭한 후 실행되므로 다시 위로 클릭하는 동작을 구현하는 데 사용할 수 없습니다.

rrreee🎜onNavigationBarButtonTap 매개변수 설명: 🎜🎜🎜🎜🎜Attribute🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜index🎜🎜Number🎜🎜기본 제목 표시줄 버튼 배열의 아래 첨자🎜🎜🎜 🎜rrreee🎜on BackPress 콜백 매개변수 개체 설명: 🎜🎜🎜🎜🎜Attributes🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜from🎜🎜String🎜🎜트리거 반환 동작 소스: 'backbutton' - 왼쪽 위 모서리 탐색 바 버튼 및 Android 반환 키;' NavigateBack'——uni.navigateBack() 메서드. 🎜Alipay 애플릿은 이 필드 반환을 지원하지 않습니다🎜🎜🎜🎜🎜

export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

注意

• nvue 页面weex编译模式支持的生命周期同weex，具体参考：weex生命周期介绍。
• 支付宝小程序真机可以监听到非navigateBack引发的返回事件（使用小程序开发工具时不会触发onBackPress），不可以阻止默认返回行为

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

推荐：《uniapp教程》

위 내용은 유니앱의 라이프사이클에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!