第三章：uni-app的生命周期uni-app 的生命周期分为 应用生命周期、页面生命周期 和 组件生命周期 三个部分。
1. 应用生命周期： * 涵盖整个 uni-app 应用的启动、运行和销毁过程。 * 常用的生命周期函数包括 onLaunch、onShow、onHide、onReady 等。 * 这些函数只能在app .vue中监听，在其他页面中无效。 * 注意事项：不建议在 onLaunch 钩子函数中直接进行页面跳转操作，可能会导致白屏或报错，可以使用 setTimeout 进行延迟跳转。2. 页面生命周期： * 这些函数写在 pages 文件夹下的页面文件中，用于处理页面的加载、显示、隐藏等状态变化。 * 常用的页面生命周期函数包括： * onLoad：页面加载时触发。 * onShow：页面显示时触发。 * onHide：页面隐藏时触发。 * onPullDownRefresh：用户下拉时触发。 * onReachBottom：页面触底时触发。3. 组件生命周期： * 定义在 components 文件夹下，Vue 的标准组件生命周期相同。 * 常用的组件生命周期函数包括： * beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
第四章：尺寸单位、Flex 布局与背景图片1. 尺寸单位： * uni-app 支持两种常用的 CSS 单位：px 和 rpx。 * px：屏幕像素单位，用于表示固定尺寸。 * rpx：响应式 px，基于屏幕宽度自适应调整。uni-app 规定以 750px 宽的屏幕为基准，750rpx 刚好等于屏幕宽度。屏幕变宽时，rpx 的显示效果会等比放大，适用于跨平台开发时的布局适配。2. Flex 布局： * uni-app 推荐使用 Flex 布局来实现响应式和自适应的页面布局。 * Flex 布局的默认方向为水平方向，可以通过 justify-content 和 align-items 等属性来控制子元素在主轴和交叉轴上的排列方式： * justify-content：控制子元素在主轴（水平轴）上的对齐方式。 * align-items：控制子元素在交叉轴（垂直轴）上的对齐方式。3. 背景图片： * uni-app 支持在 CSS 中使用背景图片，支持的格式和路径包括： * Base64 格式图片：适用于较小图片。 * 网络路径图片：通过 URL 引用网络图片。 * 本地文件：小程序中不支持直接使用本地图片作为背景，解决方案是将其转换为 Base64 或使用网络路径引用。 * 自动转换：uni-app 会自动将小于 40KB 的本地背景图片转换为 Base64 格式，但超过 40KB 的图片不建议这样处理，因为会影响性能。
总结* 生命周期：uni-app 的生命周期分为应用、页面和组件三个层级，应用生命周期只在 App.vue 中有效，页面和组件分别处理页面与组件的状态变化。* 布局与单位：在移动端开发中，建议使用 rpx 作为尺寸单位，能够自适应屏幕宽度。Flex 布局是推荐的布局方式，具有良好的跨平台兼容性。* 背景图片：小程序不支持本地文件背景图片，可以使用 Base64 格式或网络路径来解决。注意不要使用超过 40KB 的大图片以避免性能问题。
1. 应用生命周期： * 涵盖整个 uni-app 应用的启动、运行和销毁过程。 * 常用的生命周期函数包括 onLaunch、onShow、onHide、onReady 等。 * 这些函数只能在app .vue中监听，在其他页面中无效。 * 注意事项：不建议在 onLaunch 钩子函数中直接进行页面跳转操作，可能会导致白屏或报错，可以使用 setTimeout 进行延迟跳转。2. 页面生命周期： * 这些函数写在 pages 文件夹下的页面文件中，用于处理页面的加载、显示、隐藏等状态变化。 * 常用的页面生命周期函数包括： * onLoad：页面加载时触发。 * onShow：页面显示时触发。 * onHide：页面隐藏时触发。 * onPullDownRefresh：用户下拉时触发。 * onReachBottom：页面触底时触发。3. 组件生命周期： * 定义在 components 文件夹下，Vue 的标准组件生命周期相同。 * 常用的组件生命周期函数包括： * beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
第四章：尺寸单位、Flex 布局与背景图片1. 尺寸单位： * uni-app 支持两种常用的 CSS 单位：px 和 rpx。 * px：屏幕像素单位，用于表示固定尺寸。 * rpx：响应式 px，基于屏幕宽度自适应调整。uni-app 规定以 750px 宽的屏幕为基准，750rpx 刚好等于屏幕宽度。屏幕变宽时，rpx 的显示效果会等比放大，适用于跨平台开发时的布局适配。2. Flex 布局： * uni-app 推荐使用 Flex 布局来实现响应式和自适应的页面布局。 * Flex 布局的默认方向为水平方向，可以通过 justify-content 和 align-items 等属性来控制子元素在主轴和交叉轴上的排列方式： * justify-content：控制子元素在主轴（水平轴）上的对齐方式。 * align-items：控制子元素在交叉轴（垂直轴）上的对齐方式。3. 背景图片： * uni-app 支持在 CSS 中使用背景图片，支持的格式和路径包括： * Base64 格式图片：适用于较小图片。 * 网络路径图片：通过 URL 引用网络图片。 * 本地文件：小程序中不支持直接使用本地图片作为背景，解决方案是将其转换为 Base64 或使用网络路径引用。 * 自动转换：uni-app 会自动将小于 40KB 的本地背景图片转换为 Base64 格式，但超过 40KB 的图片不建议这样处理，因为会影响性能。
总结* 生命周期：uni-app 的生命周期分为应用、页面和组件三个层级，应用生命周期只在 App.vue 中有效，页面和组件分别处理页面与组件的状态变化。* 布局与单位：在移动端开发中，建议使用 rpx 作为尺寸单位，能够自适应屏幕宽度。Flex 布局是推荐的布局方式，具有良好的跨平台兼容性。* 背景图片：小程序不支持本地文件背景图片，可以使用 Base64 格式或网络路径来解决。注意不要使用超过 40KB 的大图片以避免性能问题。
