uni-app学习笔记

最新推荐文章于 2024-10-09 17:23:56 发布

King.139

最新推荐文章于 2024-10-09 17:23:56 发布

阅读量636

点赞数

分类专栏：笔记文章标签： uni-app

本文链接：https://blog.csdn.net/qq_55910050/article/details/121193927

版权

笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue和小程序的生命周期钩子函数差异，重点解析了小程序的onLoad、onShow、onReady、onHide和onUnload等关键钩子。在数据请求方面，指出小程序通常在onLoad或onShow中进行。此外，还探讨了uni-app的两种路由跳转方式：navigator标签和事件绑定方法。最后，总结了不同生命周期的应用场景。

摘要由CSDN通过智能技术生成

vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。

onLoad: 页面加载
一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。
数据请求

在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据。

关于uni-app的路由跳转的两种方式

1.navigator 标签

<navigator url="demo">  //跳转地址
    <view class="xixi">标签跳转</view>
</navigator>

2.通过@tap时间绑定方法

<view class="menu-item" @tap="toDemo">
    <image src="/static/xixi.png"></image>
    <view class="title">嘻嘻嘻</view>
</view>

复制代码

methods:{
　　toDemo() {
    　　uni.navigateTo({
  　　  // url: 'new-page/new-vue-page-1?data=Hello'
  　　     url: 'demo' //跳转地址
  　　  })
　　}
}

生命周期函数

三、生命周期总结

beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory：你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容