uni-app life cycle (small program, single page, component)

The entire application of the applet is written in the App.vue file

	export default {
		// onLaunch
		// 当uni-app初始化完成触发,只触发一次,也就是刚打开应用或者小程序会运行
		// option作用:获取用户进入小程序或退出小程序的场景值
		onLaunch: function(option) {
			console.log('App Launch'+ JSON.stringify(option))
		},
		// onShow
		// 当 uni-app 启动后显示,或从后台进入前台显示 ,监听用户进入小程序
		onShow: function() {
			console.log('App Show')
		},
		// onHide
		// 当 uni-app 从前台进入后台,但是没有退出,这是被挂起,监听用户离开小程序
		onHide: function() {
			console.log('App Hide')
		},
		// onError
		// 当 uni-app 报错时触发,没试过
		onError: function() {
			console.log('App Error')
		},
		// onUniNViewMessage 
		// 对 nvue 页面发送的数据进行监听,没试过
		onUniNViewMessage : function() {
			console.log('App UniNViewMessage ')
		},
	}

        When entering the page for the first time, both the onLaunch life cycle and the onShow life cycle will be executed. When the close button in the upper right corner is clicked, only the onHide life cycle will be executed to hide the applet. When entering from the main entry of the applet in the discovery bar again, the onShow life cycle will be executed again

 Page-level life cycle: the life cycle of each page in the applet, add it in your own page

(1)onLoad (监听页面加载)
(2)onShow (监听页面显示)
(3)onReady (监听页面初次渲染完成)
(4)onHide (监听页面隐藏)
(5)onUnload :监听页面卸载
(6)onResize :监听窗口尺寸变化
(7)onPullDownRefresh :监听用户下拉动作,一般用于下拉刷新
(8)onReachBottom :页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据
(9)onTabItemTap :点击 tabBar 时触发
(10)onShareAppMessage :用户点击右上角分享
(11)onPageScroll :监听页面滚动
(12)onNavigationBarButtonTap :监听原生标题栏按钮点击事件
(13)onBackPress :监听页面返回
(14)onNavigationBarSearchInputChanged :监听原生标题栏搜索输入框输入内容变化事件
(15)onNavigationBarSearchInputConfirmed :监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发
(16)onNavigationBarSearchInputClicked :监听原生标题栏搜索输入框点击事件
		// 可以在对应的生命周期中调用所需要的方法,以下为常用到的方法(和data同级)
		// 如 我在打开首页需要显示首页的一些数据,所以我要调用获取商品列表数据的方法
		onLoad(options) {
			console.log("页面加载");
			// 调用获取商品列表数据的方法
			this.getGoodsList()
		},
		onShow() {
			console.log("页面显示");
		},
		onHide() {
			console.log("页面隐藏");
		},
		onUnload() {
			console.log("页面卸载");
		},
		onResize() {
			console.log("尺寸变化");
		},
		onPageScroll() {
			console.log("页面滚动");
		},
		onReachBottom() {
			console.log("触底,上拉加载");
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
			uni.stopPullDownRefresh()
		},

        Entering the product list page will execute the onLoad life cycle and onShow life cycle. When clicking on a product in the list, it will enter the product details page. At this time, the product list page will execute the onHide life cycle to hide the page;

        When clicking the return button in the upper left corner of the product details page, it will return to the product list page and execute the onShow life cycle again;

        When clicking the back button in the upper left corner of the product list page, the onUnload life cycle will be executed to unload this page

 

 

     Swipe down to execute the onPullDownRefresh life cycle, pull down to refresh the data list

     Swipe up to execute the onReachBottom life cycle, and pull up to load data

     The scroll bar slides to execute the onPageScroll life cycle, page scrolling

 Component life cycle (same as the life cycle of vue standard components)

(1)beforeCreate :在实例初始化之后被调用
(2)created :在实例创建完成后被立即调用
(3)beforeMount :在挂载开始之前被调用
(4)mounted :挂载到实例上去之后调用(该钩子在服务器端渲染期间不被调用),注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,
可以在 mounted 内部使用vm.$nextTick:
  mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}
(5)beforeUpdate :数据更新时调用,发生在虚拟 DOM 打补丁之前(该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行)
(6)updated :由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子(该钩子在服务器端渲染期间不被调用。)
(7)beforeDestroy :实例销毁之前调用。在这一步,实例仍然完全可用(该钩子在服务器端渲染期间不被调用。)
(8)destroyed :Vue 实例销毁后调用(该钩子在服务器端渲染期间不被调用。)
 

 routing jump

 
1.navigateTo(保留当前页面,跳转到其他页面,使用navigateTo可以返回上一页)
 
uni.navigateTo({
	url:'./straSettings'
});
 
2.reLaunch(关闭所有页面,跳转到其他页面)
 
uni.reLaunch({
	url:'./straSettings'
})
 
3.redirectTo(关闭当前页面,跳转到其他页面)
 
 
uni.redirectTo({
	url:'./straSettings'
})
 
4.switchTab(适用于底部导航栏之间的跳转,或者跳转到底部导航栏)
 
uni.switchTab({
	url: '../strategy/strategy'
});
 
5.location.href(适用于跳转到外部链接)
 
location.href ='https://blog.csdn.net/weixin_50606255/article/details/118391274';
 
6.注意
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
不能在 App.vue 里面进行页面跳转
 <navigator url="../hello/hello" open-type="navigate">
     <view class="struct">
         I am {
   
   {student.age}} yeas old </br>
         I have skills such as {
   
   {student.skill[0]}},{
   
   {student.skill[1]}}
     </view>
 </navigator>

 

 

 

Guess you like

Origin blog.csdn.net/weixin_66556453/article/details/125433537