Uniapp基础学习（三）

1.生命周期

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它可以编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/字节跳动/QQ/京东）等多个平台。理解uni-app的生命周期对于开发高质量的跨平台应用至关重要。uni-app的生命周期主要包括两部分：页面生命周期和应用生命周期。

页面生命周期

页面生命周期是指页面从创建到销毁的整个过程。uni-app页面的生命周期和Vue的类似，但在小程序等环境中会有一些额外的生命周期钩子。主要的生命周期钩子包括：

1. onLoad(options): 页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数。
2. onShow(): 页面显示/切入前台时触发。
3. onReady(): 页面初次渲染完成时触发。只触发一次，代表页面已经准备妥当，可以和视图层进行交互。
4. onHide(): 页面隐藏/切入后台时触发。如navigateTo或底部tab切换到其他页面，小程序切入后台等。
5. onUnload(): 页面卸载时触发。如redirectTo或navigateBack到其他页面时。
6. onResize(size): 页面尺寸变化时触发，仅在小程序端有效。
7. onPullDownRefresh(): 在页面上拉触底事件时触发（前提是当前页面已开启下拉刷新）。可以在pages.json的onPullDownRefresh字段中进行配置。
8. onReachBottom(): 页面滚动到底部的事件（不是整个页面触摸底部，是当前渲染的区域到底部）。可以在pages.json的onReachBottomDistance字段中修改触发距离。
9. onTabItemTap(item): 当前是 tab 页时，点击 tab 时触发。

应用生命周期

应用生命周期主要涉及应用的启动、显示、隐藏、关闭等状态。但需要注意的是，在uni-app中，并非所有平台都支持完整的应用生命周期，如H5就不存在明显的启动和关闭过程。以下是部分平台支持的应用生命周期钩子：

1. onLaunch(): 当uni-app初始化完成时触发（全局只触发一次）。
2. onShow(): 当uni-app启动，或从后台进入前台显示时触发。
3. onHide(): 当uni-app从前台进入后台时触发。
4. onError(err): 当uni-app发生脚本错误，或者 api 调用失败时触发。
5. onUnload(): 当uni-app主动退出，且没有再次打开uni-app时触发。只有部分平台支持，如微信小程序。
6. onPageNotFound(route): 页面不存在时触发。
7. onThemeChange(theme): 监听系统主题变化时触发，目前仅微信小程序支持。

了解并合理利用这些生命周期钩子，可以帮助开发者更好地控制应用的流程和页面的行为，从而提升应用的性能和用户体验。

2.基础组件

uni-app是一个使用Vue.js开发所有前端应用的框架，它允许开发者编写一次代码，然后发布到iOS、Android、H5以及各种小程序等多个平台。在uni-app中，组件是视图层的基本组成单元，用于构建应用的用户界面。以下是一些uni-app中常见的组件及其主要特点：

1. 基础组件

• view：类似于传统HTML的div，用于包裹各种元素。在nvue中，包裹文字应使用<text>组件。
• scroll-view：可滚动视图区域，支持横向（scroll-x）和纵向（scroll-y）滚动。可以设置滚动条位置（scroll-top/scroll-left）等属性。
• swiper：滑块视图容器，一般用于轮播图。可以设置是否显示滑块指示点（indicator-dots）、是否自动切换（autoplay）、切换时间间隔（interval）等。
• text：文本组件，用于显示文本内容。
• rich-text：富文本组件，支持HTML字符串的渲染。

2. 表单组件

• input：输入框组件，支持多种类型（如text、number、password等），可以获取用户输入的数据。
• checkbox：多选组件，用户可以选择多个选项。
• radio：单选组件，用户只能选择一个选项。
• switch：开关选择器组件，用户可以通过点击来切换开关状态。
• textarea：多行输入框组件，用于输入较长的文本。
• picker：滚动选择器组件，用户可以在一个有限的选项集中选择一个或多个选项。
• slider：滑动条组件，用户可以通过滑动来选择一个值。
• form：表单组件，用于收集用户输入的数据，并通过@submit事件提交数据。

3. 导航组件

• navigator：页面跳转组件，类似于HTML的<a>标签，但只能用于应用内的页面跳转。可以设置跳转方式（如navigate、switchTab等）和目标页面的URL。

4. 媒体组件

• audio：音频播放组件，用于播放音频文件。
• image：图片显示组件，用于显示图片。
• video：视频播放组件，用于播放视频文件。

5. 其他组件

• map：地图组件，用于显示地图信息。可以设置经纬度、图标路径等属性。
• canvas：画布组件，用于绘制图形或渲染图片等。
• web-view：网页视图组件，用于嵌套显示网页内容。

6. 视图容器组件

• view：类似于HTML中的<div>，用于包裹其他组件或内容，可以设置样式、布局属性等。它是构建页面布局的基础，支持嵌套使用，以实现复杂的布局效果。
• scroll-view：可滚动的视图容器，允许用户在其中上下或左右滚动内容。使用时需要注意，对于竖向滚动，需要给<scroll-view>设置固定高度；对于横向滚动，需要设置white-space: nowrap;样式。
• swiper/swiper-item：轮播组件，<swiper>用于创建轮播容器，<swiper-item>代表轮播中的每一项内容。常用于展示图片轮播图或滑动切换的视图。
• movable-area/movable-view：用于实现可拖动或缩放的视图容器。<movable-area>指定可拖动的范围，<movable-view>用于指示可拖动的区域。这两个组件通常一起使用，以实现拖拽或缩放的效果。

7. 文本与图片组件

• text：用于显示文本内容，支持基本的样式设置，如字体、颜色、对齐方式等。在uni-app中，文本通常需要使用<text>组件进行包裹。
• image：用于显示图片资源，支持网络图片、本地图片和base64编码的图片。可以设置图片的宽度、高度、缩放模式等属性。

8. 交互组件

• button：按钮组件，用于创建交互按钮。支持点击事件和样式设置，如按钮类型、尺寸、是否禁用等。
• input/textarea：输入框组件，用于接收用户的输入。<input>用于单行文本输入，<textarea>用于多行文本输入。支持文本输入、密码输入等多种类型。
• picker/picker-view：选择器组件，用于从一组选项中选择一个或多个值。<picker>是普通的弹出选择器，而<picker-view>则嵌入页面，支持自定义选择方式和UI表现。
• radio/checkbox：单选按钮和多选框组件，分别用于单选或多选场景。通常将多个<radio>或<checkbox>包裹在<radio-group>或<checkbox-group>下，以实现单选或多选的功能。

4. 其他组件

• navigator：跳转链接组件，点击后可以打开内部或外部页面、小程序、网页等。
• form：表单容器组件，用于组织表单组件，并提交表单数据。当点击<form>表单中formType为submit的<button>组件时，会将表单组件中的值进行提交。
• cover-view/cover-image：覆盖在原生组件上的文本和图片视图组件。由于部分组件（如map、video）通过原生控件实现，层级高于前端组件，因此需要使用<cover-view>和<cover-image>来覆盖这些原生组件。

总结

uni-app的视图组件丰富多样，涵盖了从基础布局到复杂交互的各个方面。通过合理使用这些组件，开发者可以高效地构建出美观、易用、功能丰富的移动应用界面。同时，uni-app的跨平台特性也使得这些组件在不同平台上都能保持良好的兼容性和用户体验。