uni-app基础文件说明以及生命周期介绍

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

接上篇，使用uni-app搭建好项目后，接下来就是对项目初始进行配置和使用，这里从几个方面对uni-app做一下整体的介绍。

一、样式和布局

1. 可以在根目录app.vue定义全局样式，也可以在每个页面进行单独样式设置；
2. 导入外联样式和使用内联样式;
3. .class #id element选择器;
4. 基准宽度为750px，建议设计宽度为750px.

二、相关配置

page.json文件用来对 uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。主要包括：

• pages 进行每个页面的生命及窗口的表现

• globalStyle 默认窗口的样式配置，可以在pages里进行单独的页面样式配置

• tabBar 进行导航栏的设置

- condition 启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面

其他配置详见uni-app 官网说明。

三、生命周期

1. 应用生命周期

• onLaunch：应用初始化完成触发，全局只触发一次，可做登录判断...

• onShow: 应用启动的时候，或者从后台进入前台就会触发

• onHide ：应用从前台进入后台就会触发

页面生命周期

• onLoad 监听页面加载，在开始加载的时候触发，元素还未开始渲染 -- 页面只执行一次 tab页面不加载；
• onShow 监听页面显示，每次页面出现的时候，就会触发这个钩子。
• onReady 监听页面渲染完成， 如果页面渲染速度快(元素太少)，会在页面翻页动画完成前就触发了 -- 页面只执行一次
• onHide 监听页面隐藏，每次页面隐藏的时候，就会触发这个钩子。 页面跳转会触发
• onUnload 监听页面卸载 重定向跳转页面会触发

组件主要用到的生命周期

component 组件中使用

• beforeCreate： 在实例初始化之后被调用
• created： 实例创建完成后被立即调用--调函数
• beforeMount： 在挂载开始之前被调用
• mounted： 挂载到实例上去之后调用
• destroyed：Vue 实例销毁后调用

生命周期执行顺序

进入应用

• App Launch
• App Show
• page onLoad
• page onShow
• component beforeCreate
• component created
• component mounted
• page onReady

应用后台

• App Hide
• page onHide

应用关闭

• page onUnload
• component destory

后台重新进入

• App Show
• page onLoad
• page onShow