uniapp -- 笔记

最新推荐文章于 2024-08-14 11:24:34 发布
最新推荐文章于 2024-08-14 11:24:34 发布
阅读量466 收藏
点赞数 3
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yydemo1/article/details/136925919
版权
本文详细介绍了uniapp中的页面和组件生命周期，包括onLoad、onShow、onReady、onHide和onUnload等阶段，以及父子组件间的传值机制（props）和组件间通信（使用$emit和$on）的方法。
摘要由CSDN通过智能技术生成

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('事件名',()=>{})

鱼尾uuui
关注
初识uniapp---uniapp一次开发_小程序_Android_IOS_快应用通用工作笔记001
添柴程序猿的专栏
02-04 460
先来认识一下uniapp,之前也有写过,uniapp的介绍博客,但是没有说 具体的开发步骤. 用uniapp开发的话可以实现微信小程序,支付宝小程序,抖音小程序,web版,Android程序,ios程序,qq小程序,360小程序,百度小程序 通用. 技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】：170933152 开通了个人技术微信公众号:credream,有需要的朋友可以添加相互学习 ...
uniapp---为什么使用uniapp_以及uniapp开发的app展示_使用hbuilderx简单搭建一个uniapp_一次开发_小程序_Android_IOS_快应用通用工作笔记002
添柴程序猿的专栏
02-04 358
使用uniapp原因 用uniapp开发的程序 可以看到Android的程序 h5的,以及右边ios的程序 然后下载开发工具 下载app开发板 点击打开 然后新建uniapp 可以看一下他的结构非常简单 ...
uniapp组件里的onLoad和onShow里的方法不执行
m0_68683769的博客
03-28 2988
uniapp生命周期函数不生效、uniapp中onShow的应用、this.$router.push onShow、uniapp页面生命周期、uniapp路由守卫、uniapp中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 onload里调接口，接口还未加载完成页面就已经渲染了
最新发布
soryetong
08-14 426
一次接口和页面的优化之路，最后才想起来是接口没有分页，一次传输的数据量较大导致的数据未渲染。后续还需要进行深度分页的优化
uniapp组件onload函数没用
weixin_52601258的博客
03-21 1084
uniapp开发时问题
uni-app 中实现 onLaunch 异步回调后执行 onLoad 最佳实践
江阳小道的专栏
05-23 3823
在使用 uni-app 开发项目时，会遇到需要在 onLaunch 中请求接口返回结果，并且此结果在项目各个页面的 onLoad 中都有可能使用到的需求，比如微信小程序在 onLaunch 中进行登录后取得 openid 并获得 token，项目各页面需要带上该 token 请求其他接口。
uni-app组件 子组件onLoad、onReady事件无效
肥晨开发的学习之路
07-05 913
最终将onLoad，onReady换成mounted/created 替代解决了问题。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。在uni-app的组件中可以直接使用Vue的生命周期函数对逻辑进行处理。突然发现在项目中，组件 子组件的onLoad、onReady事件无效。打印也出不来值 怎么处理呢？
uni-app中App.vue的onLaunch函数和页面的onLoad函数异步问题的解决方案（Vue2/Vue3）
ironprosper的博客
10-31 3849
在页面的 onLoad 中增加代码 await this.$onLaunched，注意onload要添加async。在 App.vue 的 onLaunch 所有业务逻辑执行完毕后增加代码 this.$isResolve()1 修改 main.js。2 修改 App.vue。
miniprogram-to-uniapp-master 小程序代码转换成uniapp代码笔记
weixin_45688398的博客
09-26 1298
公司一个项目，需要开发一个和小程序一样的APP。功能不多懒得自己写。废话不多说，上正题。 准备工作 开发工具 HBuilder X 转换工具源码 miniprogram-to-uniapp(附上作者的使用指南) 小程序代码一份 解压下载好的miniprogram-to-uniapp，打开文件夹然后打开命令窗口，运行【 npm install miniprogram-to-uniapp -g 】进行...
uniapp优购项目----完整学习笔记（附录项目完整源码）
tigerhhzz的博客
01-23 2865
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的uni-app 官方文档，请翻阅。
uniapp学习实战笔记uniapp学习实战笔记
01-19
uniapp学习实战笔记uniapp学习实战笔记
深入理解 uni-app 页面生命周期（一）：onLoad vs onShow
tutututu12345678的博客
01-29 3589
通过对onLoad和onShow的对比，我们可以更好地理解它们各自的作用。onLoad适用于在页面初次加载时获取参数，而onShow则更适用于监控页面的显示状态，并在页面每次显示时执行相应的操作。在实际开发中，根据业务需求合理使用这两个生命周期函数，能够更有效地管理页面的生命周期。
uni-app中的onLoad为什么有时候不执行
wwwwj的博客
09-09 1746
在一个页面的子组件的onLoad()中发请求获取数据，却发现onLoad()根本不会执行。原因：这个子组件不属于uni-app中的页面（在pages.json中配置的页面），uni-app的文档也做出了说明，组件是无法使用页面级的onLoad等生命周期的。uni-app除支持页面生命周期还支持 Vue 组件生命周期，所以可以在mounted（vue2）或onMounted（vue3）中执行相应的操作。
uni-app子组件onLoad、onReady事件无效
qq_42516774的博客
08-29 3683
经过一番尝试后还是不行，看文档发现uni-app 支持的页面生命周期函数是包含onLoad的，但有时却不起作用。使用uniapp开发组件时用到页面初始化参数，于是在封装的子组件上写了onload方法，发现始终无法调用。开发项目，页面上的onLoad，onReady方法是可以起作用的，但是组件中使用却没有起作用。在uni-app的组件中可以直接使用Vue的生命周期函数对逻辑进行处理。最终将onLoad，onReady换成mounted解决了问题。这是因为组件中并不能使用页面生命周期函数。
UniApp `onShow` 和 `onLoad` 区别以及执行顺序
我们好像在哪见过~
07-01 7993
生命周期钩子函数在页面加载时触发，表示页面的初始化过程。是在页面展示时触发，用于处理页面显示相关的逻辑，可能会多次执行，包括页面首次展示和从后台切换到前台时。生命周期钩子函数在页面展示时触发，表示页面被显示到前台。在该函数中，可以处理页面显示相关的逻辑，例如刷新数据、更新UI等。函数可能会多次执行，因为页面在切换后台和前台之间多次切换时都会触发。当页面再次被切换到后台，然后再次切换到前台时，会再次触发。是在页面加载时触发，用于页面的初始化操作，只执行一次。页面初始化完成后，页面会被展示到前台，此时会触发。
vue/uniapp - 返回上一页并onLoad刷新数据
mossbaoo的博客
04-21 1万+
在uni中，返回页面是不会触发onLoad方法的； 如果我们只想在特定情况下返回上一页才需要刷新数据，那么用onShow的话，那刷新就太频繁了； 这时候，可以用$emit和$on去解决。 比如说，从详情页(detail.vue) 回到 列表页(list.vue)： 详情页(detail.vue)： methods:{ back() { uni.$emit('refreshData'); uni.navigateBack({ delta: 1 }) } } 列表页(list.vu
uniapp的onload()和onshow（）的区别
qq_44980680的博客
12-30 8287
2.如果从一个页面携带参数跳转到另外一个页面，在另一个页面获取参数的方式： onLoad(options){ console.log(options.xxx) },这些参数都挂在在options.1.如果加载列表页，二级页面对一级的列表页面内容有修改，则以及列表函数应该在onShow中加载，否则可以选择onLoad。只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）从二级页面返回该页面时，onLoad不会再次加载，而onshow会重新加载。
uniapp.md-typora
09-09
"uniapp.md-typora"并不是我所拥有的引用资料中的一部分。但是从你提到的文件名来看，它可能是一个关于Uni-App的Markdown文档或笔记。Uni-App是一个使用Vue语法的跨平台前端框架，可以编译到iOS、Android、H5、小...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值