uni-app课程心得
目录
1.uni-app环境搭建
1.下载HBuilderX
2.通过HBuilderX可视化界面创建第一个uni-app应用
3.下载微信小程序
2.全局文件配置
1.pages.json文件
2.manifest.json文件
3.uni-app实际运用中的组件
1.基础组件列表
2.视图组件
2.1swiper
2.2scroll-view
3.表单组件
3.1button
3.2checkbox-group
3.3form
4.在uni-app中使用中必不可少sass插件的使用css的概述：
2、使用步骤：
5.生命周期
1.应用生命周期
2.页面生命周期函数
3.组件生命周期
6.页面路由
什么是路由？
1.哪些会触发页面跳转
2.微信小程序中实现页面路由的几种方式
7.为什么要学习uni-app这一门课程
8.总结
uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
官网：uni-app官网 (dcloud.net.cn)
1.uni-app环境搭建
1.下载HBuilderX
HBuilderX官网下载地址：HBuilderX-高效极客技巧
选择相应的版本就可以了
选择正式版，可以下载Windows版和Mac OS版，其各有两个版本，分别是标准版和APP开发版。其中，标准版可直接用于Web开发、MarkDown、字处理场景、小程序等。如果开发App.则需要手动安装插件。App开发版预置开发App所需的插件，开箱即用。如果只是开发小程序和H5，则安装标准版即可。这里下载的是App开发版。
HBuilder X下载完成后即可安装，Windows版和Mac OS版的安装都很简单，按提示操作即可。
2.通过HBuilderX可视化界面创建第一个uni-app应用
第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目
第二步：选择 uni-app
类型，输入工程名，选择模板，点击创建，即可成功创建
最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。
3.下载微信小程序
第一步：安装微信开发者工具，下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档
选择合适的版本下载，一步步默认安装即可。安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态，如图所示
第二步：安装并配置完毕之后，打开HBuilderX，进入项目，选择“运行”-->"运行到小程序模拟器“-->"微信开发者工具“命令，即可在微信开发者工具中体验uni-app，如图
2.全局文件配置
1.pages.json文件
pages.json文件主要用于对uni-app进行全局配置，可以在配置项设置默认页面的窗口、设置页面路径及窗口、设置组件自动引入规则、设置底部tab及分包加载配置等。
pages.json文件配置的参考文档地址
pages.json 页面路由 | uni-app官网
2.manifest.json文件
manifest.json文件可以配置H5、小程序、App信息，如配置代理，H5模板以及小程序AppID、App的名称、图标、权限等。
manifest.json文件配置的参考文档地址
App Android@android | uni-app官网
3.uni-app实际运用中的组件
uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签元素，但uni-app的组件与HTML不同，而是与小程序相同，更适合手机端使用。虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转换。但为了管理方便、策略统一，写代码时建议使用view等组件。
组件的官方文档地址：组件使用的入门教程 | uni-app官网
1.基础组件列表
基础组件分为以下十几大类：
视图容器（View Container）：
| 组件名 | 说明 |
|---|---|
| view | 视图容器，类似于HTML中的div |
| scroll-view | 可滚动视图容器 |
| swiper | 滑块视图容器，比如用于轮播banner |
| match-media | 屏幕动态适配组件，比如窄屏上不显示某些内容 |
| movable-area | 可拖动区域 |
| movable-view | 可移动的视图容器，在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中 |
| cover-view | 可覆盖在原生组件的上的文本组件 |
| cover-image | 可覆盖在原生组件的上的图片组件 |
表单组件（Form）：
| 标签名 | 说明 |
|---|---|
| button | 按钮 |
| checkbox | 多项选择器 |
| editor | 富文本输入框 |
| form | 表单 |
| input | 输入框 |
| label | 标签 |
| picker | 弹出式列表选择器 |
| picker-view | 窗体内嵌式列表选择器 |
| radio | 单项选择器 |
| slider | 滑动选择器 |
| switch | 开关选择器 |
| textarea | 多行文本输入框 |
路由与页面跳转（Navigation）：
| 组件名 | 说明 |
|---|---|
| navigator | 页面链接。类似于HTML中的a标签 |
以上这些都是日常使用中，使用比较频繁的组件。
2.视图组件
2.1swiper
滑块视图容器。
一般用于左右滑动或上下滑动，比如banner轮播图。
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | |
| active-class | String | swiper-item 可见时的 class | 支付宝小程序 | |
| changing-class | String | acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class | 支付宝小程序 | |
| autoplay | Boolean | false | 是否自动切换 | |
| current | Number | 0 | 当前所在滑块的 index | |
| current-item-id | String | 当前所在滑块的 item-id ，不能与 current 被同时指定 | 支付宝小程序不支持 | |
| interval | Number | 5000 | 自动切换时间间隔 | |
| duration | Number | 500 | 滑动动画时长 | app-nvue不支持 |
| circular | Boolean | false | 是否采用衔接滑动，即播放到末尾后重新回到开头 | |
| vertical | Boolean | false | 滑动方向是否为纵向 | |
| previous-margin | String | 0px | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | app-nvue、抖音小程序、飞书小程序不支持 |
| next-margin | String | 0px | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | app-nvue、抖音小程序、飞书小程序不支持 |
| acceleration | Boolean | false | 当开启时，会根据滑动速度，连续滑动多屏 | 支付宝小程序 |
| disable-programmatic-animation | Boolean | false | 是否禁用代码变动触发 swiper 切换时使用动画。 | 支付宝小程序 |
| display-multiple-items | Number | 1 | 同时显示的滑块数量 | app-nvue、支付宝小程序不支持 |
| skip-hidden-item-layout | Boolean | false | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 | App、微信小程序、京东小程序 |
| disable-touch | Boolean | false | 是否禁止用户 touch 操作 | App 2.5.5+、H5 2.5.5+、支付宝小程序、抖音小程序与飞书小程序（只在初始化时有效，不能动态变更） |
| touchable | Boolean | true | 是否监听用户的触摸事件，只在初始化时有效，不能动态变更 | 抖音小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch） |
| easing-function | String | default | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic | 微信小程序、快手小程序、京东小程序 |
| @change | EventHandle | current 改变时会触发 change 事件，event.detail = {current: current, source: source} | ||
| @transition | EventHandle | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy | App、H5、微信小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序 | |
| @animationfinish | EventHandle | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} | 抖音小程序与飞书小程序不支持 |
change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：
- autoplay 自动播放导致swiper变化。
- touch 用户划动引起swiper变化。
- 其他原因将用空字符串表示。
swiper做左右拖动的长列表的专项问题
- swiper是单页组件，适合做banner图轮播和简单列表左右滑动。
- 因为性能问题，用swiper做复杂长列表，需要较高的优化技巧以及接受一些限制。
- 这是一个范例，插件市场新闻模板示例，它在App端使用了nvue的原生渲染，实现高性能的左右拖动长列表；并支持可自定义的任何形式的下拉刷新。它在非App端使用的模式是只缓存左右一共3列的数据，dom中的数据过多时，它会自动释放。就是说App上，只要看过这一页，再进去时内容是还在的。而在非App上，只能做到缓存3页数据，其他页即便看过，再进去也会重新加载。并且非App的这种情况下，不再提供下拉刷新。虽然插件市场也有其他前端模拟的下拉刷新，但性能不佳。一般小程序的大厂案例里，提供左右拖长列表的，都是这种做法。
Tips
- 如果 nvue 页面
@animationfinish事件不能返回正确的数据，可同时监听@change事件。 - 使用竖向滚动时，需要给
<scroll-view>一个固定高度，通过 css 设置 height。 - 注意：其中只可放置
<swiper-item>组件，否则会导致未定义的行为。 - 如果遇到current、current-item-id属性设置不生效的问题参考：组件属性设置不生效解决办法
- banner图的切换效果和指示器的样式，有多种风格可自定义，可在uni-app插件市场搜索
- 如需banner管理后台，参考uniCloud admin banner插件：云端一体banner - DCloud 插件市场
- swiper在App的vue中、百度支付宝头条QQ小程序中，不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。
- 同时监听 change transition，开始滑动时触发transition, 放开手后，在ios平台触发顺序为 transition... change，Android/微信小程序/支付宝为 transition... change transition...
2.2scroll-view
可滚动视图区域。用于区域滚动。
需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| scroll-x | Boolean | false | 允许横向滚动 | |
| scroll-y | Boolean | false | 允许纵向滚动 | |
| upper-threshold | Number/String | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 | |
| lower-threshold | Number/String | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 | |
| scroll-top | Number/String | 设置竖向滚动条位置 | ||
| scroll-left | Number/String | 设置横向滚动条位置 | ||
| scroll-into-view | String | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | ||
| scroll-with-animation | Boolean | false | 在设置滚动条位置时使用动画过渡 | |
| enable-back-to-top | Boolean | false | iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 | app-nvue，微信小程序 |
| show-scrollbar | Boolean | false | 控制是否出现滚动条 | App-nvue 2.1.5+ |
| refresher-enabled | Boolean | false | 开启自定义下拉刷新 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| refresher-threshold | Number | 45 | 设置自定义下拉刷新阈值 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| refresher-default-style | String | "black" | 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| refresher-background | String | "#FFF" | 设置自定义下拉刷新区域背景颜色 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| refresher-triggered | Boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| enable-flex | Boolean | false | 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 | 微信小程序 2.7.3 |
| scroll-anchoring | Boolean | false | 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 | 微信小程序 2.8.2 |
| @scrolltoupper | EventHandle | 滚动到顶部/左边，会触发 scrolltoupper 事件 | ||
| @scrolltolower | EventHandle | 滚动到底部/右边，会触发 scrolltolower 事件 | ||
| @scroll | EventHandle | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | ||
| @refresherpulling | EventHandle | 自定义下拉刷新控件被下拉 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ | |
| @refresherrefresh | EventHandle | 自定义下拉刷新被触发 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ | |
| @refresherrestore | EventHandle | 自定义下拉刷新被复位 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ | |
| @refresherabort | EventHandle | 自定义下拉刷新被中止 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。
3.表单组件
3.1button
按钮。
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 生效时机 | 平台差异说明 |
|---|---|---|---|---|---|
| size | String | default | 按钮的大小 | ||
| type | String | default | 按钮的样式类型 | ||
| plain | Boolean | false | 按钮是否镂空，背景色透明 | ||
| disabled | Boolean | false | 是否禁用 | ||
| loading | Boolean | false | 名称前是否带 loading 图标 | H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) | |
| form-type | String |
用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
|
|||
| open-type | String | 开放能力 | |||
| hover-class | String | button-hover | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | App-nvue 平台暂不支持 | |
| hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | ||
| hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | ||
| app-parameter | String | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | 微信小程序、QQ小程序 | ||
| hover-stop-propagation | boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | 微信小程序 | |
| lang | string | 'en' | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 | 微信小程序 | |
| session-from | string | 会话来源，open-type="contact"时有效 | 微信小程序 | ||
| send-message-title | string | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | 微信小程序 | |
| send-message-path | string | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | 微信小程序 | |
| send-message-img | string | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | 微信小程序 | |
| show-message-card | boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | 微信小程序 | |
| group-id | String | 打开群资料卡时，传递的群号 | open-type="openGroupProfile" | QQ小程序 | |
| guild-id | String | 打开频道页面时，传递的频道号 | open-type="openGuildProfile" | QQ小程序 | |
| public-id | String | 打开公众号资料卡时，传递的号码 | open-type="openPublicProfile" | QQ小程序 | |
| data-im-id | String | 客服的抖音号 | open-type="im" | 抖音小程序2.68.0版本+ | |
| data-im-type | String | IM卡片类型 | open-type="im" | 抖音小程序2.80.0版本+ | |
| data-goods-id | String | 商品的id，仅支持泛知识课程库和生活服务商品库中的商品 | open-type="im" | 抖音小程序2.80.0版本+ | |
| data-order-id | String | 订单的id，仅支持交易2.0订单 | open-type="im" | 抖音小程序2.80.0版本+ | |
| data-biz-line | String | 商品类型，“1”代表生活服务，“2”代表泛知识。 | open-type="im" | 抖音小程序2.80.0版本+ | |
| @getphonenumber | Handler | 获取用户手机号回调 | open-type="getPhoneNumber" | 微信、支付宝、百度、抖音、快手、京东小程序 | |
| @getuserinfo | Handler | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo | open-type="getUserInfo" | 微信、QQ、百度、快手、京东小程序 | |
| @error | Handler | 当使用开放能力时，发生错误的回调 | open-type="launchApp" | 微信、QQ、快手、京东小程序 | |
| @opensetting | Handler | 在打开授权设置页并关闭后回调 | open-type="openSetting" | 微信、QQ、百度、快手、京东小程序 | |
| @launchapp | Handler | 从小程序打开 App 成功的回调 | open-type="launchApp" | 微信、QQ、快手、京东小程序 | |
| @contact | Handler | 客服消息回调 | open-type="contact" | 微信、QQ、百度、快手小程序 | |
| @chooseavatar | Handler | 获取用户头像回调 | open-type="chooseAvatar" | 微信小程序 | |
| @addgroupapp | Handler | 添加群应用的回调 | open-type="addGroupApp" | QQ小程序 | |
| @chooseaddress | Handler | 调起用户编辑并选择收货地址的回调 | open-type="chooseAddress" | 百度小程序 | |
| @chooseinvoicetitle | Handler | 用户选择发票抬头的回调 | open-type="chooseInvoiceTitle" | 百度小程序 | |
| @subscribe | Handler | 订阅消息授权回调 | open-type="subscribe" | 百度小程序 | |
| @login | Handler | 登录回调 | open-type="login" | 百度小程序 | |
| @im | Handler | 监听跳转IM的成功回调 | open-type="im" | 抖音小程序2.68.0版本+ |
3.2checkbox-group
多项选择器，内部由多个 checkbox 组成。
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| @change | EventHandle |
<checkbox-group>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
|
#checkbox
多选项目。
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String |
<checkbox> 标识，选中时触发 <checkbox-group> 的 change 事件，并携带 <checkbox> 的 value。
|
|
| disabled | Boolean | false | 是否禁用 |
| checked | Boolean | false | 当前是否选中，可用来设置默认选中 |
| color | Color | checkbox的颜色，同css的color |
3.3form
表单，将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。
当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
属性说明
| 属性名 | 类型 | 说明 | 平台差异说明 |
|---|---|---|---|
| report-submit | Boolean | 是否返回 formId 用于发送模板消息 | 微信小程序、支付宝小程序 |
| report-submit-timeout | number | 等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId | 微信小程序2.6.2 |
| @submit | EventHandle | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId | |
| @reset | EventHandle | 表单重置时会触发 reset 事件 |
以上这些表单组件都是日常必不可少的组件
4.在uni-app中使用中必不可少sass插件的使用css的概述：
Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。
菜鸟教程参考链接：链接
2、使用步骤：
一、在hbuilder开发工具安装sass插件，前往插件市场安装，如果需要登录，自己注册一个账号登录即可。
二、在写样式的style的标签添加lang="scss"属性。
三、开始使用scss语法编写样式。
5.生命周期
1.应用生命周期
1、App(Object object)
微信小程序应用生命周期从注册小程序生命周期开始说起，拿Vue.js这比喻，我们要使用Vue就得先new一个Vue对象。而微信小程序通过App(Object object)这个函数来注册小程序，接受一个 Object 参数，其指定小程序的生命周期回调等。
Tip: App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
2、App()参数
App(Object object)也可称为注册程序，这个程序里包含了些关于小程序生命周期相关的函数。或称为App()函数的参数，参数类型是Object object。如下
| 属性 | 类型 | 说明 | 触发时间 |
|---|---|---|---|
| onLaunch | function | 生命周期回调——监听小程序初始化。 | 小程序初始化完成时触发，全局只触发一次。 |
| onShow | function | 生命周期回调——监听小程序启动或切前台。 | 小程序启动，或从后台进入前台显示时触发。 |
| onHide | function | 生命周期回调——监听小程序切后台。 | 小程序从前台进入后台时触发。 |
| onError | function | 错误监听函数。 | 小程序发生脚本错误或 API 调用报错时触发。 |
| onPageNotFound | function | 页面不存在监听函数。 | 小程序要打开的页面不存在时触发。基础库 1.9.90 开始支持 |
| onUnhandledRejection | function | 未处理的 Promise 拒绝事件监听函数。 | 小程序有未处理的 Promise 拒绝时触发。基础库 2.10.0 开始支持。 |
| onThemeChange | function | 监听系统主题变化 | 系统切换主题时触发。基础库 2.11.0 开始支持。 |
| 其他 | any | 开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问 |
3、示例代码
App({onLaunch (options) {// Do something initial when launch.},onShow (options) {// Do something when show.},onHide () {// Do something when hide.},onError (msg) {console.log(msg)},globalData: 'I am global data'
})
这里需要特别说明的是 globalData 这个函数/对象，这里可以写成函数也可以写成一个单独的变量，这个函数的作用通常是存储全局变量。
2.页面生命周期函数
小程序的页面生命周期函数需要在页面.js 中进行声明。如：
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log('本地生活页面加载完毕');},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log("初次渲染完毕！");},/*** 生命周期函数--监听页面显示*/onShow() {console.log("页面显示完成");},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log("页面已被隐藏！");},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log("GG");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {console.log('正在刷新！');},/*** 页面上拉触底事件的处理函数*/onReachBottom() {console.log('正在加载更多！');},/*** 用户点击右上角分享*/onShareAppMessage() {console.log('用户正在分享！');}
})3.组件生命周期
3.1组件全部的生命周期函数
小程序组件可用的全部生命周期如下表所示。
3.2组件主要的生命周期函数
在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached。它们各自的特点如下：
3.2.1组件实例刚被创建好的时候，created 生命周期函数会被触发
此时还不能调用 setData
通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
3.2.2在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发
此时， this.data 已被初始化完毕
这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
3.2.3 在组件离开页面节点树后， detached 生命周期函数会被触发
退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
此时适合做一些清理性质的工作
6.页面路由
什么是路由？
路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程。我们可以理解微信小程序页面路由，根据路由规则（路径）从一个页面跳转到另一个页面的的规则。
1.哪些会触发页面跳转
- 小程序启动，初始化第一个页面
- 跳转新页面，调用
wx.navigateTo或者<navigator /> - 页面重定向，调用
wx.redirectTo或者<navigator /> - 页面返回，调用
wx.navigateBack,页面左上角返回按钮 wx.switchTab实现tabBar页面切换
Tips: 所有页面都必须在app.json中注册,例如
{"pages": ["pages/index/index","pages/classification/classification","pages/start/start","pages/detail/detail", ]
}
2.微信小程序中实现页面路由的几种方式
wx.navigateTo，保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
wx.navigateTo({url: 'pages/detail/detail',success: function(res) {},...
})
wx.redirectTo,关闭当前页面，跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面
wx.redirectTo({url: 'pages/detail/detail',success:function(res){},...
})
<navigator />组件跳转方式
<navigator url=pages/detail/detail">跳转</navigator>
wx.navigateBack返回上一页
wx.navigateBack({delta: 1,
})
Tips: delta为1时表示返回上一页，为2时表示上上一页，以此类推；如果dalta大于已打开的页面总数，则返回到首页。返回后，元界面会销毁
wx.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
app.json:
{"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页",},{"pagePath": "pages/car/car","text": "购物车",},...}
}
index.js:
wx.switchTab({url: 'pages/car/car'
})7.为什么要学习uni-app这一门课程
跨平台开：uni-app是一种基于Vue.js的跨平台开发框架，可以同时开发iOS、Android、H5等多个平台的应用程序。这样可以节省开发人员时间和精力，只需次代码，就可以在多个平台上运行。
开发效率高：使用uni-app可以利用Vue.js的开发模式，开发速度相对较快。通过一套代码实现多个平台的开发，避免了重复的工作，提高了开发效率。
资源共享：uni-app可以共享Vue.js生态系统中的大量插件和组件，这为开发者提供了更多的选择和便利。可以从Vue.js的社区中获取到丰富的资源和支持。
应用范围广：uni-app不仅可以开发移动应用程序，还可以开发桌面应用和小程序等。这样可以扩展应用的范围，满足不同平和场景的需求。
总的来说，学习uni-app可以帮助开发者提高开发效率、拓宽应用范围，更好地适应跨平台开发的需求。同时，uni-app也是当前比较热门的技术之一，掌握这门技术也有助于提升自己的竞争力和就业机会。
8.总结
总的来说，学习uni-app需要有一定的Vue.js基础知识，并要了解各个平台的差异和限制。通过入学习和实践，结合官方文档和社区资源，可以解决遇到的困难，提高uni-app的开发能力。
uni-app课程心得相关推荐
- 切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
- uni app map 地图 漂浮问题及方案
uni app map 地图 漂浮问题及方案 文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
- uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
- 计算机应用课程的体会,计算机课程心得体会
微机课心得2019-11-21 今天上午,我们全班同学去第三教学楼509教室上微机课.这节课上的是报表内容,其实在五一劳动节放假之前就已经讲过了,今天上的这堂课是通过做练习复习一下上次学的 计算机课程 ...
- HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
- uni App+H5 实现人脸识别
uni App+H5 实现人脸识别 通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
- uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等 媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
最新文章
- Spring MVC拦截器+注解方式实现防止表单重复提交
- 史上最简单的git教程搭配Github和Gitee一起食用更佳
- 疯子的算法总结12--倍增
- 用心整理，1000行MySQL命令，很实用，建议收藏
- 【POJ - 1502】MPI Maelstrom（Dijkstra单源最短路--求一点到其余个点的最小值的最大值）
- 两阶段3D目标检测网络 SIENet: Spatial Information Enhancement Network for 3D Object Detection from Point Cloud
- Linux学习之dpkg错误：另外一个进程已为dpkg状态库加锁
- python学习笔记（八）传递任意数量的实参
- macbook air上安装ubuntu双系统
- 【PPT技巧】让PPT背景音乐仅在播放视频时暂停
- IP数据报首部的格式identification
- python检查https过期_Python实现HTTPS网站证书过期监控及更新
- 航空中的QNH QNE QFE分别都是什么
- 【SCA-CNN 解读】空间与通道注意力：Spatial and Channel-wise Attention
- VC编译DLL时，如何不依赖VC运行库
- DSP的GEL文件详解
- sql string转为日期_SQL之变身Excel（二）
- ubuntu20.04官方安装I219-V驱动
- 记录uniapp时间戳转换
- select实现延时函数