uniapp -- 笔记

最新推荐文章于 2025-08-20 11:39:57 发布

原创最新推荐文章于 2025-08-20 11:39:57 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#uni-app #前端 #javascript

收录于

本文详细介绍了uniapp中的页面和组件生命周期，包括onLoad、onShow、onReady、onHide和onUnload等阶段，以及父子组件间的传值机制（props）和组件间通信（使用$emit和$on）的方法。

1.生命周期

uniapp中页面的生命周期

1.onLoad=》监听页面加载，初次执行

1.接收页面传递的参数，对象形式

2.请求接口

2.onShow=》监听页面显示，每一次进入都会执行

3.onReady =》监听页面渲染完成

场景：获取dom

4.onHide =》页面隐藏

5.onUnload =》页面卸载

组件的生命周期跟vue的一样

2.传值

1.父传子props：跟vue一样

2.所有组件间通讯：

触发 : uni.$emit('事件名',value);

接收 : uni.$on('事件名',()=>{})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鱼尾uuui

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uni-app基础入门

每天都要努力学习哦~~

01-11

3722

uni-app介绍 uni-app是一个vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到IOS ,Android.H5以及各种小程序(微信/支付宝/百度/头条/qq/钉钉)等多个平台,即使不跨断,uni-app,同时也是更好的小程序开发框架 ...

参与评论您还未登录，请先登录后发表或查看评论

IT廉连看——Uniapp——Uniapp生命周期

weixin_72932310的博客

03-05

5761

Uniapp页面生命周期（全）

uni-app 中实现 onLaunch 异步回调后执行 onLoad 最佳实践

qq_45562973的博客

05-24

3001

🚀 优质资源分享 🚀 学习路线指引（点击解锁）知识定位人群定位 🧡 Python实战微信订餐小程序 🧡 进阶级本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 💛Python量化交易实战💛 入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统前言好久没写博客了，由于公司业务需要，最近接触uiapp比较多，一直想着输出一些相关的文章。正好最近时间富余，有机会来一波输出了。问题描述在使用 uni-app

uniapp的onload()和onshow（）的区别

qq_44980680的博客

12-30

8807

2.如果从一个页面携带参数跳转到另外一个页面，在另一个页面获取参数的方式： onLoad(options){ console.log(options.xxx) },这些参数都挂在在options.1.如果加载列表页，二级页面对一级的列表页面内容有修改，则以及列表函数应该在onShow中加载，否则可以选择onLoad。只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）从二级页面返回该页面时，onLoad不会再次加载，而onshow会重新加载。

uniapp onLoad 注意事项

weixin_43457011的博客

12-14

1万+

onLoad()页面加载执行,因为函数是从上到下执行的,所以调用方法和获取页面传递过来的值时,顺序要注意一下 <script> export default { data() { return { id:0, detail:{} } }, methods: { async getNewsDetail(){ console.log('yyyy'+this.id); const res = await this.$myRuquest({

Uniapp学习笔记

kunge1v5的博客

06-08

1026

经过很长时间学习Uniapp而写下的笔记，快来看看吧

uniapp学习笔记

weixin_65808257的博客

04-02

191

【代码】uniapp学习笔记。

uniapp 学习笔记

光年的博客

01-17

811

vue，uniapp 常规用法，问题等

uni-app项目实战笔记25--uniapp实现分享给微信好友和分享到朋友圈

shenxiaomo1688的博客

06-25

414

【代码】uni-app项目实战笔记25--uniapp实现分享给微信好友和分享到朋友圈。

工作之uniapp笔记（一）

最新发布

qq_57866091的博客

08-20

176

工作之uniapp笔记（一）

UniApp `onShow` 和 `onLoad` 区别以及执行顺序

前端必备小窝

07-01

1万+

生命周期钩子函数在页面加载时触发，表示页面的初始化过程。是在页面展示时触发，用于处理页面显示相关的逻辑，可能会多次执行，包括页面首次展示和从后台切换到前台时。生命周期钩子函数在页面展示时触发，表示页面被显示到前台。在该函数中，可以处理页面显示相关的逻辑，例如刷新数据、更新UI等。函数可能会多次执行，因为页面在切换后台和前台之间多次切换时都会触发。当页面再次被切换到后台，然后再次切换到前台时，会再次触发。是在页面加载时触发，用于页面的初始化操作，只执行一次。页面初始化完成后，页面会被展示到前台，此时会触发。

深入理解 uni-app 页面生命周期（一）：onLoad vs onShow

tutututu12345678的博客

01-29

4406

通过对onLoad和onShow的对比，我们可以更好地理解它们各自的作用。onLoad适用于在页面初次加载时获取参数，而onShow则更适用于监控页面的显示状态，并在页面每次显示时执行相应的操作。在实际开发中，根据业务需求合理使用这两个生命周期函数，能够更有效地管理页面的生命周期。

uniapp

2301_79428107的博客

10-25

2460

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、H5、以及各种小程序等多个平台。

uniapp中组件生命周期函数

MuYuZiBuYan的博客

09-03

2071

监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object(用于页面传参）在上方 scroll 在 onLoad 是拿不到值的所以我们提供了onReady，onReady是等onReady渲染完毕之后才开始执行。onLoad是在页面加载是执行，打开页面上我们在控制台可以看见张三。在demo6页面创建一个跳转标签并且添加参数。注意的是 scroll 在 onLoad 是拿不到值的。在demo7中接收参数并输出。

uni-app的页面的生命周期：onLoad、onShow、onReady

树上骑个猴的博客

01-21

1万+

onLoad:页面加载了，在onLoad中发送请求是比较合适的，即页面一加载就发送请求获取数据。 onShow:页面显示了，会触发多次，只要页面隐藏，然后再显示出来都会触发。这里会重复触发，如果你重复发送请求不合适。 onReady:页面初次渲染完成了，但是渲染完成了，你才发送请求获取数据，就太慢了。综上分析，uni-app首页获取轮播图的请求应该在onLoad中进行。 ...

Uniapp基础学习（三）

警警的博客

09-07

2101

uni-app的视图组件丰富多样，涵盖了从基础布局到复杂交互的各个方面。通过合理使用这些组件，开发者可以高效地构建出美观、易用、功能丰富的移动应用界面。同时，uni-app的跨平台特性也使得这些组件在不同平台上都能保持良好的兼容性和用户体验。

uni-app中的onLoad不执行

qq_44130891的博客

11-27

3030

uni-app除支持页面生命周期还支持 Vue 组件生命周期，所以可以在mounted（vue2）或onMounted（vue3）中执行相应的操作。uni-app的文档也做出了说明，组件是无法使用页面级的onLoad等生命周期的。想在onLoad()中发请求获取数据，却发现onLoad()根本不会执行。这个页面没有在pages.json中配置，不属于uni-app中的页面。

uniapp 必须掌握的细节

制定持续可量化的目标，不断坚持。

10-06

610

uniapp 必须掌握的细节

uni-app中的onLoad为什么有时候不执行

wwwwj的博客

09-09

3494

在一个页面的子组件的onLoad()中发请求获取数据，却发现onLoad()根本不会执行。原因：这个子组件不属于uni-app中的页面（在pages.json中配置的页面），uni-app的文档也做出了说明，组件是无法使用页面级的onLoad等生命周期的。uni-app除支持页面生命周期还支持 Vue 组件生命周期，所以可以在mounted（vue2）或onMounted（vue3）中执行相应的操作。

uniapp中onLoad不执行的解决办法