uniapp目录结构、生命周期、路由跳转

一.目录结构

在这里插入图片描述

pages:存放页面文件的目录
static:存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
App.vue:应用配置,用来配置App全局样式以及监听 应用生命周期
main.js:Vue初始化入口文件
manifest.json:配置应用名称、appid、logo、版本等打包信息
pages.json:配置页面路由、导航条、选项卡等页面类信息
components:uni-app组件目录,可手动创建

:css、less/scss 等不要放在 static 目录下,这些公用的资源放在 common 目录下。

二.生命周期

一.页面生命周期

  • onload 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)
  • onReady 监听页面初次渲染完成
  • onShow 监听页面显示
  • onHide 监听页面隐藏
  • onUnload 监听页面卸载
  • onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新
  • onReachBottom 页面上拉触底事件的处理函数
  • onShareAppMessage 用户点击右上角分享
  • onPageScroll 监听页面滚动,参数为Object
  • onTabItemTap 当前是 tab 页时,点击 tab 时触发,参数为Object
<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad() {
			console.log("页面初始化 执行一次 onload")
		},
		onReady() {
			console.log("页面加载完毕 执行一次 onReady")
		},
		onShow() {
			console.log("页面进入执行 执行多次 onShow")
		},
		onHide() {
			console.lo
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中,可以使用uni.addInterceptor方法来监听路由跳转。具体实现步骤如下: 1. 在App.vue文件的onLaunch方法中添加监听代码。可以参考引用\[1\]中的代码示例。在该方法中,使用uni.addInterceptor方法来拦截路由跳转方法,比如navigateTo、redirectTo、reLaunch、switchTab和navigateBack等。在success回调函数中,调用watchRouter方法来处理路由跳转事件。 2. 在watchRouter方法中,可以编写自己的逻辑来处理路由跳转事件。可以参考引用\[1\]和引用\[2\]中的代码示例。 需要注意的是,监听路由跳转变化的代码应该写在onLaunch方法中,以确保在uni-app初始化完成时触发。同时,也可以在onShow和onHide方法中监听用户进入和离开小程序的事件。具体可以参考引用\[3\]中的说明。 总结起来,要在uniapp中监听路由跳转,可以使用uni.addInterceptor方法,并在App.vue文件的onLaunch方法中添加相应的拦截器来实现。 #### 引用[.reference_title] - *1* [uniapp 监听路由跳转](https://blog.csdn.net/weixin_43743175/article/details/127313441)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp切换路由监听导航跳转(在监听网络状态时非常常用)](https://blog.csdn.net/weixin_53339757/article/details/128475865)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uniapp-生命周期/路由跳转](https://blog.csdn.net/zxc472504515/article/details/125429863)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值