目录
本文使用的vue3版本
1.页面的生命周期函数
页面的生命周期函数是在vue的生命周期函数基础上进行扩充的合集,组件的生命周期函数还是vue的生命周期函数。
a.常用函数
只在此罗列了,常用的函数,详见生命周期函数。以下函数全平台通用。
onLoad | 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参),参考示例 |
onShow | 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 |
onReady | 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发。如果想执行获取页面高度等操作,在此函数内调用。 |
onHide | 监听页面隐藏 |
onUnload | 监听页面卸载 |
b.执行顺序
2.路由
uni-app的路由与vue-router路由完全不同,uni-app的页面路由是在pages.json中进行配置,在pages.json配置页面路由的同时还可以配置上方导航栏样式。同时到现在为止,我没有发现uni官方提供的路由守卫的写法,如果有人发现了官方的写法请在评论区赐教一下,感谢(✪ω✪)。
a.路由配置
通过HBuilderX在pages目录下面右键后点击新建页面即可创建一个页面,同时就会把路由信息自动创建到pages.json文件当中。
pages.json文件示例
上图中pages就是文件的数组,数组中的第一个元素就是系统的启动页面。详细配置请参考配置项
b.TabBar
tabbar的路由也是在pages.json中配置的。
c.路由跳转
uni.navigateTo | 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack 可以返回到原页面。只能打开非 tabBar 页面。 |
uni.redirectTo | 关闭当前页面,跳转到应用内的某个页面。只能打开非 tabBar 页面。 |
uni.reLaunch | 关闭所有页面,打开到应用内的某个页面。可以打开任意页面。 |
uni.switchTab | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 |
uni.navigateBack | 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。 |
d.路由传参
uni-app的路由传参是直接将参数放在url进行传输,在跳转后的页面中再onLoad钩子函数中获取。
Url传参
A页面跳转到B页面
A页面
function goToBPage(){
uni.navigateTo({
url:'/pages/message/message?name=test&age=18'
})
}
B页面
import {
onLoad
} from '@dcloudio/uni-app'
onLoad(option=>{
console.log(option)
})
输出
uni.$emit传参
如果觉得参数暴露在url中可以使用uni.$emit的方式进行传输(为啥不用事件通道,因为vue3下面不好用)
写了一个帮助类navigateEvent.js
// 此文件用于页面传参
/**
* 给新打开的页面发送参数
* @param {*} eventName 事件名称
* @param {*} data 数据
*/
export function sendToNewPage(eventName, data) {
console.log(eventName + '-handshake-in')
// 原来的页面等待新打开的页面发起握手
uni.$once(eventName + '-handshake', () => {
console.log(eventName + '-handshake')
// 握手成功后发送信息
uni.$emit(eventName, data)
})
}
// 定时器
let _timer
/**
* 新页面接受参数
* @param {*} eventName 事件名称
* @param {*} callBack 处理事件的回调
*/
export function getDataOnNewPage(eventName, callBack) {
console.log('getDataOnNewPage')
uni.$once(eventName, data => {
// 防抖
if (_timer) {
clearTimeout(_timer)
}
_timer = setTimeout(() => {
callBack(data)
_timer = null
}, 100)
})
uni.$emit(eventName + '-handshake')
}
A页面
function goToBPage() {
sendToNewPage('AToB', {
name: 'test',
age: 18
})
uni.navigateTo({
url: '/pages/message/message'
})
}
B页面
<script setup>
import {
onLoad
} from '@dcloudio/uni-app'
import {
getDataOnNewPage
} from '@/utils/navigateEvent.js'
onLoad(() => {
getDataOnNewPage('AToB', data => {
console.log(data)
})
})
</script>
e.路由守卫-调用函数
通过调用函数的方式拉达到路由的拦截
帮助类
/**
* 路由守卫 哪里需要判断就加在哪里,不引入的就是白名单
*/
export function beforeRouterEach() {
const token = uni.getStorageSync('token')
if (token) {
return true
} else {
uni.redirectTo({
url: '/pages/login/login'
})
return false
}
}
首页
import {
beforeRouterEach
} from '@/utils/navigateEvent.js'
onShow(() => {
beforeRouterEach()
})
f.路由守卫-拦截器
拦截器的方式只能拦截以下四种没法实现从地址栏改变url的变化的监听
'navigateTo', 'redirectTo', 'reLaunch', 'switchTab'
3.css
a.选择器
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #firstname | 选择拥有 id="firstname" 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容,仅 vue 页面生效 |
::before | view::before | 在 view 组件前边插入内容,仅 vue 页面生效 |
注意:
- 在
uni-app
中不能使用*
选择器。 - 微信小程序自定义组件中仅支持 class 选择器
page
相当于body
节点
b.内置css变量
CSS 变量 | 描述 | App | 小程序 | H5 |
---|---|---|---|---|
--status-bar-height | 系统状态栏高度 | 系统状态栏高度 | 25px | 0 |
--window-top | 内容区域距离顶部的距离 | 0 | 0 | NavigationBar 的高度 |
--window-bottom | 内容区域距离底部的距离 | 0 | 0 | TabBar 的高度 |