网站策划方案目标,大学生做家教比较好的网站,旅游网站的导航怎么做,东莞阳光网招聘官网uniapp生命周期包括应用生命周期、页面生命周期和组件生命周期#xff1b;
1、应用生命周期
app.vue/uvue是uni-app的朱组件。所有页面都是在app.vue下进行切换#xff0c;是应用入口文件。但app.vue本身不是页面#xff0c;这里补鞥编写视图元素#xff0c;也就没有。 这…uniapp生命周期包括应用生命周期、页面生命周期和组件生命周期
1、应用生命周期
app.vue/uvue是uni-app的朱组件。所有页面都是在app.vue下进行切换是应用入口文件。但app.vue本身不是页面这里补鞥编写视图元素也就没有。 这个文件的作用监听应用生命周期、配置全局样式、配置全局的存储globalData 应用生命周期仅可在app.vue中监听在页面监听无效 官网参考应用生命周期详解
//app.vue页面
script// 只能在App.vue里监听应用的生命周期export default {onLaunch: function(options) {console.log(App Launch)console.log(应用启动路径, options.path)},onShow: function(options) {console.log(App Show)console.log(应用启动路径, options.path)},onHide: function() {console.log(App Hide)}}
/script全局存储globalData
//app.vue页面
script// 只能在App.vue里监听应用的生命周期export default {globalData: { text: 测试,selectedColor#1281c1},onLaunch: function(options) {this.globalData 测试2;},onShow: function(options) {getApp().globalData.text test;}}
/scriptjs中设置方式getApp().globalData.text ‘test’ 在应用onLaunch时getApp对象还未获取暂时可以使用this.globalData获取globalData 如果需要把globalData的数据绑定到页面上可在页面的onShow页面生命周期里进行变量重赋值
//index.vue页面
templateview classcontainer/view
/template
script
export default {data(){return {selectedColor: getApp().globalData.selectedColor}},onShow(){getApp().globalData.text test;},
}
/script
style langscss scoped
/style全局样式
style/* #ifndef APP-PLUS-NVUE */import ./common/uni.css;/* #endif*/
/style2、页面生命周期
函数名说明onInit监听页面初始化其参数同 onLoad 参数为上个页面传递的数据参数类型为 Object用于页面传参触发时机早于 onLoadonLoad监听页面加载该钩子被调用时响应式数据、计算属性、方法、侦听器、props、slots 已设置完成其参数为上个页面传递的数据参数类型为 Object用于页面传参onShow监听页面显示页面每次出现在屏幕上都触发包括从下级页面点返回露出当前页面onReady监听页面初次渲染完成此时组件已挂载完成DOM 树($el)已可用注意如果渲染速度快会在页面进入动画完成前触发onHide监听页面隐藏onUnload监听页面卸载onResize监听窗口尺寸变化onPullDownRefresh监听用户下拉动作一般用于下拉刷新onReachBottom页面滚动到底部的事件不是scroll-view滚到底常用于下拉下一页数据。具体见下方注意事项onTabItemTap点击 tab 时触发参数为Object具体见下方注意事项onShareAppMessage用户点击右上角分享onPageScroll监听页面滚动参数为ObjectonNavigationBarButtonTap监听原生标题栏按钮点击事件参数为ObjectonBackPress监听页面返回返回 event {from:backbutton、 navigateBack} backbutton 表示来源是左上角返回按钮或 android 返回键navigateBack表示来源是 uni.navigateBackonNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件用户点击软键盘上的“搜索”按钮时触发。onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件pages.json 中的 searchInput 配置 disabled 为 true 时才会触发onShareTimeline监听用户点击右上角转发到朋友圈onAddToFavorites监听用户点击右上角收藏
页面加载顺序 注意事项
可接收上个页面传参的声明周期onInit、onload经常使用的为onloadA页面使用navigateTo()页面跳转到B页面A页面会触发onHide生命周期B页面触发onShowB页面返回会触发A页面onShowB页面onUnload这是一个会重复触发的事件A页面使用redirectTo()跳转时A页面会触发onUnload页面生命周期、beforeDestory组件生命周期、destoryed组件生命周期B页面触发onshowonInit仅百度小程序基础库3.260以上支持其他版本或平台可使用onload兼容。 navigateTo()保留当前页面跳转到应用内的某个页面使用uni.navigateBack可以返回到原页面 redirectTo(OBJECT)关闭当前页面跳转到应用内的某个页面 onbackpress使用场景参考 官网详情
3、组件生命周期
uniapp的组件生命周期与vue标准组件的生命周期相同
4、生命周期的执行顺序
app.vue 单个页面
//app.vue页面
scriptexport default {onLaunch: function(options) {console.log(App onLaunch)},onShow: function(options) {console.log(App onShow)}}
/script//pages文件中index.vue页面
templateview classcontainer/view
/template
script
export default {onLoad() {console.log(首页onLoad);},onShow() {console.log(首页onshow);},onHide() {console.log(首页onhide);},beforeCreate() {console.log(首页beforeCreate);},created() {console.log(首页created);},beforeMount() {console.log(首页beforeMount);},mounted() {console.log(首页mounted);},onReady() {console.log(首页onReady);},onUnload() {console.log(首页onUnload);},data(){return {}}
}
/script
style langscss scoped
/style//执行顺序
App onLaunch
App onShow
首页beforeCreate
首页onLoad
首页onshow
首页created
首页beforeMount
首页onReady
首页mounted包含组件的页面
//pages文件中index.vue页面
templateview classcontaineruni-badge classuni-badge-left-margin textuni组件 /....../view
/template
script
export default {data(){return {}}
}
/script
style langscss scoped
/style//执行顺序
首页beforeCreate
首页onLoad
首页onshow
首页created
首页beforeMount
组件beforeCreate
组件created
组件beforeMount组件2 beforeCreate 》 组件2 created 》 组件2 beforeMount组件3 beforeCreate 》 组件3 created 》 组件3 beforeMount
组件mounted
组件2 mounted
组件3 mounted
首页onReady
首页mounted一般使用场景
page onload接收页面传参page mounted配合后端接口获取数据
