2025年uni 入门

大家好，我是讯享网，很高兴认识大家。

1.页面的生命周期函数

a.常用函数

b.执行顺序

2.路由

a.路由配置

pages.json文件示例

b.TabBar

c.路由跳转

d.路由传参

Url传参

uni.$emit传参

e.路由守卫-调用函数

f.路由守卫-拦截器

3.css

a.选择器

b.内置css变量

本文使用的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.路由守卫-拦截器

请看这篇博客 https://blog.csdn.net/_/article/details/https://blog.csdn.net/_/article/details/

拦截器的方式只能拦截以下四种没法实现从地址栏改变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 的高度

1.页面的生命周期函数

a.常用函数

b.执行顺序

2.路由

a.路由配置

pages.json文件示例

b.TabBar

c.路由跳转

d.路由传参

Url传参

uni.$emit传参

e.路由守卫-调用函数

f.路由守卫-拦截器

3.css

a.选择器

b.内置css变量

相关推荐