本文共 4044 字,大约阅读时间需要 13 分钟。
写下博客主要用来分享知识内容,便于自我复习和总结。 如有错误之处,望各位指出。
生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数。
uni-app
支持如下应用生命周期函数:
函数名 | 说明 |
---|---|
onLaunch | 当uni-app 初始化完成时触发(全局只触发一次) |
onShow | 当 uni-app 启动,或从后台进入前台显示 |
onHide | 当 uni-app 从前台进入后台 |
onError | 当 uni-app 报错时触发 |
这部分应该很好理解。(通常写在App.vue)
uni-app
支持如下页面生命周期函数:
函数名 | 说明 | 平台差异说明 | 最低版本 |
---|---|---|---|
onLoad | 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考 | ||
onShow | 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 | ||
onReady | 监听页面初次渲染完成。 | ||
onHide | 监听页面隐藏 | ||
onUnload | 监听页面卸载 |
演示:
这里需要注意:详情页
生命周期到底有什么用?接下来介绍一个重要的用法:导航跳转。
navigator详细文档:
跳转到普通页面
但是如果我们想跳转到tabbar的页面,上面的方式是跳转不过去的,必须要添加一个open-type:
这种方式还是很简单的。更多内容参考文档即可。
需要补充的是,open-type里的属性值redirect,会触发onUnload。
利用navigateTo进行导航跳转
通过navigateTo方法进行跳转到普通页面
methods: { goAbout () { uni.navigateTo({ url: '/pages/about/about', }) }}
同样地,我们不能用这种方式跳转到tabbar页面。
通过switchTab跳转到tabbar页面
跳转到tabbar页面
通过switchTab方法进行跳转
methods: { goMessage () { uni.switchTab({ url: '/pages/message/message' }) }}
这部分就是关键了。我们在导航进行跳转到下一个页面的同时,可以给下一个页面传递相应的参数,接收参数的页面可以通过onLoad生命周期进行接收。
传递参数的页面
详情页
接收参数的页面
about页面
此时我们点击按钮进行跳转,我们可以发现参数已经传递过来了。
不知道各位还记不记之前在介绍condition启动模式配置的时候,我们也传递了参数。现在就可以用这种方式来接收参数了。
如果是动态传参,我们可以这样:也可以这样:
在页面的生命周期中,有一个onPullDownRefresh
对于下拉刷新,之前的时候说过,要开启下拉刷新需要在page.json中配置enablePullDownRefresh为true:"globalStyle": { // 全局配置:如果页面配置有同名配置,全局配置将失效 "navigationBarTextStyle": "white", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#007AFF", "backgroundColor": "#70B575", // 窗口背景色,当页面下拉时才能看到 "enablePullDownRefresh": true, // 开启下拉(只有在小程序开发工具才能看到效果) "backgroundTextStyle": "light" },
当然下拉刷新不必放在全局配置中,也可以放在指定的页面配置中。
页面中是转圈效果,小程序中是下拉刷新。
除此以外,其实还可以通过API方式去下拉刷新:
无论用那种方式去下拉刷新,它都会去触发下拉生命周期:如果我们在页面中使用下拉刷新,我们会发现转圈效果不会消失。
但我们其实可以为其设置什么时候停止当前页面下拉刷新:对于上拉加载,我们依然先要去page.json中进行配置。
"globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#007AFF", "backgroundColor": "#70B575", "enablePullDownRefresh": true, "backgroundTextStyle": "light", "onReachBottomDistance": 50 // 上拉触底事件触发时距页面底部距离 },
然后页面中有一个生命周期onReachBottom,它就会在触底的时候触发。通常用于下拉下一页数据。
{ {item}}
虽然之前提到不会再赘述Vue内容,但是uni-app中确实不可忽略组件的使用。组件部分内容需要有Vue基础,所以如果没学过Vue,再次推荐先去系统地学习一下Vue。这里为了整体内容完整性,简单的回顾一下,不详细说明。
在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可。
组件的作用简单来说就是将多个组件共用的内容提取出来或者将未来可能改变的内容提取出来,方便之后的维护和管理。
创建login组件,在component中创建login目录,然后新建login.vue文件
这是一个自定义组件
在其他组件中导入该组件并注册
import login from "@/components/login/login.vue"
注册组件
components: { login}
使用组件
知道以上内容后,我们就可以用这种方式使用uni-ui。
简单举例:
1、导入组件
import uniGrid from "@/components/uni-grid/uni-grid.vue"import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
2、注册组件
components: { uniGrid,uniGridItem}
3、使用组件
文本 文本 文本
不在这里详细演示了,感兴趣的可以参考官方文档,或者我的文章
beforeCreate | 在实例初始化之后被调用。 | ||
---|---|---|---|
created | 在实例创建完成后被立即调用。 | ||
beforeMount | 在挂载开始之前被调用。 | ||
mounted | 挂载到实例上去之后调用。 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick | ||
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前。 | 仅H5平台支持 | |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 | 仅H5平台支持 | |
beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用。 | ||
destroyed | Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 |
Vue里的组件通信:
简单回顾常用用法:
通过props来接受外界传递到组件内部的值
这是一个自定义组件 { {msg}}
其他组件在使用login组件的时候传递值
通过$emit触发事件进行传递参数
这是一个自定义组件 { {msg}}
父组件定义自定义事件并接收参数
转载地址:http://pmyki.baihongyu.com/