快速过一遍uni-app基础知识

应用生命周期

• onLanuch: 应用启动时触发。
• onShow: 应用显示时触发。
• onHide: 应用隐藏时触发。

<script>
export default {
    onLaunch: function() {
        console.log('App Launch')
    },
        
    onShow: function() {
        console.log('App Show')
    },

    onHide: function() {
        console.log('App Hide')
    }
}
</script>

页面生命周期

• onLoad:
  • 描述：页面初始化时调用一次，可以接收其他页面传递的参数。响应式数据、方法、计算属性、侦听器等已经设置完成，可以在 onLoad() 中访问这些数据，但是DOM尚未构建渲染完成。
  • 应用场景：发起网络请求、接受页面传递的参数、初始化页面数据。
• onReady:
  • 描述：页面初次渲染完成调用，DOM已经构建渲染完成。
  • 应用场景：可以自由操作页面元素，比如ref获取节点。
• onShow:
  • 描述：页面显示时调用，可以触发多次，包括从其他页面返回到当前页面。
  • 应用场景：刷新页面数据、重置页面状态。
• onHide:
  • 描述：页面隐藏时调用。
  • 应用场景：暂停操作，如暂停视频播放或停止轮播图的自动切换。
• onUnload:
  • 描述：页面卸载时调用。
  • 应用场景：清理资源，如清理定时器、取消网络请求。

组件生命周期

• uni-app组件的生命周期和项目中vue版本的生命周期一致。

页面路由配置

需要在pages.json里配置每个路由页面的路径及页面样式 ``

    {
	"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页", // 导航标题
				"navigationBarBackgroundColor": "#F8F8F8", // 导航背景颜色
				"navigationBarTextStyle": "black", // 导航字体颜色
				"enablePullDownRefresh": true, // 下拉刷新
				"app-plus": { // App节点配置项
					"titleNView": {},
					"animationType": "fade-in",
					"animationDuration": 300
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black", // 导航字体颜色
		"navigationBarTitleText": "uni-app", // 导航标题
		"navigationBarBackgroundColor": "#F8F8F8", // 导航背景颜色
		"backgroundColor": "#F8F8F8" // 页面背景颜色
	},
	"tabBar": {
		"color": "#333333",
		"borderStyle": "black",
		"backgroundColor": "#FFFFFF",
		"selectedColor": "#333333",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "",
				"selectedIconPath": "",
				"text": "首页"
			},
			{
				"pagePath": "pages/my/my",
				"iconPath": "",
				"selectedIconPath": "",
				"text": "我的"
			}
		]
	}
}

页面路由跳转

• 使用<navigator> 组件：

  • url属性：跳转的页面路径，可以使用？拼接页面传递参:/pages/home/home?id=xxx>
  • open-type: 路由跳转方式。
  • 注意: 跳转tabbar页面，必须设置open-type="switchTab"。

• 编程式导航:

  • uni.navigateTo: 保留当前页面，跳转到应用内的某个页面。
  • uni.redirectTo: 关闭当前页面，跳转到应用内的某个页面。
  • uni.navigateBack: 关闭当前页面，返回上一页面或多级页面。
  • uni.switchTab: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
  • 注意: uni.navigateTo 和 uni.redirectTo 只能打开非tabBar页面，uni.switchTab 只能打开 tabBar 页面。