首页 > 其他分享 >UniApp生命周期

UniApp生命周期

时间:2023-12-09 18:44:05浏览次数:30  
标签:UniApp 生命周期 default 代码 export 组件 执行 页面

当使用UniApp开发框架时,你可以利用一些生命周期钩子函数来控制页面和组件的初始化、加载和销毁过程。以下是UniApp中的所有生命周期钩子函数以及使用方法和注释解析:

一、应用生命周期钩子
onLaunch(options):应用初始化时触发,全局只触发一次。
App({
onLaunch: function(options) {
// 应用初始化时执行的代码
}
})
onShow(options):应用启动或从后台进入前台时触发。
App({
onShow: function(options) {
// 应用从后台进入前台时执行的代码
}
})
onHide():应用从前台进入后台时触发。
App({
onHide: function() {
// 应用从前台进入后台时执行的代码
}
})
二、页面生命周期钩子
onLoad(options):页面加载时触发,可以获取页面参数。
export default {
onl oad(options) {
// 页面加载时执行的代码,可以使用options参数获取页面参数
}
}
onShow():页面显示时触发。
export default {
onShow() {
// 页面显示时执行的代码
}
}
onReady():页面初次渲染完成时触发。
export default {
onReady() {
// 页面初次渲染完成时执行的代码
}
}
onHide():页面隐藏时触发。
export default {
onHide() {
// 页面隐藏时执行的代码
}
}
onUnload():页面卸载时触发。
export default {
onUnload() {
// 页面卸载时执行的代码
}
}
三、组件生命周期钩子
beforeCreate():组件实例刚刚被创建,属性计算和方法定义之前触发。
export default {
beforeCreate() {
// 组件实例被创建时执行的代码
}
}
created():组件实例已经创建完成,属性已经绑定,但尚未替换真实的DOM之前触发。
export default {
created() {
// 组件实例创建完成时执行的代码
}
}
beforeMount():组件挂载开始之前执行。
export default {
beforeMount() {
// 组件挂载开始之前执行的代码
}
}
mounted():组件挂载到页面之后执行。
export default {
mounted() {
// 组件挂载到页面之后执行的代码
}
}
beforeUpdate():组件更新开始之前执行。
export default {
beforeUpdate() {
// 组件更新开始之前执行的代码
}
}
updated():组件更新完成之后执行。
export default {
updated() {
// 组件更新完成之后执行的代码
}
}
beforeDestroy():组件销毁前执行。
export default {
beforeDestroy() {
// 组件销毁前执行的代码
}
}
destroyed():组件销毁后执行。
export default {
destroyed() {
// 组件销毁后执行的代码
}

标签:UniApp,生命周期,default,代码,export,组件,执行,页面
From: https://www.cnblogs.com/record-100/p/17891314.html

相关文章

  • uniapp 微信小程序使用canvas
    微信小程序基础库大于2.9.0后,canvas(画布)支持一套新Canvas2D接口(需指定type属性),同时支持同层渲染,原有接口不再维护。在这种情况下使用原有接口会报错,报错例如:1、使用ctx.draw()会报错:drawisnotafunction,原因:新版Canvas2D接口没有draw方法2、使用ctx.setfillStyle......
  • 记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言大家好,今天聊一下在做uniapp多端适配项目,需要用到自定义导航时,如何解决状态栏塌陷及导航栏安全区域多端适配问题,下文只针对H5、APP、微信小程序三端进行适配,通过封装一个通用高阶组件包裹自定义导航栏内容,主......
  • uniapp滑动页面时警告Unable to preventDefault inside passive event listener due t
    翻译:没有添加被动事件监听器来阻止’touchstart‘事件,请考虑添加事件管理者’passive’,以使页面更加流畅。原因:由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault(),这就导致了浏览器不能及时响应滚动,略有延迟。所以为了让页面滚动的效果如丝般顺滑......
  • 【UniApp】-uni-app-全局数据和局部数据
    前言好,经过上个章节的介绍完毕之后,了解了一下uni-app-全局样式和局部样式那么了解完了全局样式和局部样式之后,这篇文章我再来给大家介绍一下UniApp中全局数据和局部数据搭建演示环境创建一个全新的项目:然后在配置一下,微信小程序的AppId,直接去之前的项目中拷贝一下即......
  • 【UniApp】-uni-app概述
    前言好,经过我们前面文章的编写,大家可以了解到微信小程序开发相关的知识,了解完了这个微信小程序开发和云开发之后,从这篇文章开始,我再来给大家写一下关于Uniapp的知识。好,开始,那什么是Uniapp呢?这个时候我们不管三七二十一,先打开我们Uniapp官方文档,它官方地址也很简单,叫做d......
  • 【Nginx/IIS】解决uniapp/Vue history模式下页面刷新404
    uniapp/Vue开启History模式本地开发:二级页面刷新或者通过链接进入二级页面是正常的打包部署后:二级页面刷新或者通过链接进入二级页面会报错404页面找不到 解决方案:Nginx配置:在nginx.conf的对应location里配置一行代码try_files$uri$uri//index.html;location/h5{......
  • uniapp 配置 基座调试指定页面
    在用hbuildx时,用自定义基座,调试程序时,有的页面因为基座缺少组件而进不去,这个时候就可以用指定页面的方式,我们只需要把进入页面的入参传进去,这个时候打开页面就是指定要调试的页面了。就在page.json文件最后加入"condition":{//模式配置,仅开发期间生效"current":0......
  • uniapp 图片懒加载的一种方式
    如果是列表页,可以采用前端分页,通过scroll-view下拉,在绑定图片地址信息,这样就能下拉部分,加载部分图片了。pageQuery(){letcurrentPage=this.pQuery.page;letpageSize=this.pQuery.size;constindex=(......
  • uniapp---wap2app去掉系统自带的导航栏
    在用uniapp进行将wap站转化为app的时候,默认打包后的文件,带有系统的导航栏,下面是去除的办法:第一步:找到sitemap.json 设置titleNView为false: 第二步:在pages加入{"webviewId":"common","matchUrls":[{"hostname":"R:.*","pa......
  • Spring入门04Bean的配置、Bean的实例化、Bean的生命周期、依赖注入方式、依赖自动装配
    bean配置bean基础配置 bean别名配置 bean作用范围配置  bean实例化bean是如何创建的bean实例化bean本质上就是对象,创建bean使用构造方法完成 实例化bean的三种方式 bean生命周期bean生命周期控制   依赖注入方式依赖注入的两种方式......