uni 入门

夜雨Gecer

已于 2022-07-13 14:23:14 修改

阅读量3.1k

点赞数 2

分类专栏： uni app 文章标签：前端

于 2022-07-12 17:29:49 首次发布

本文链接：https://blog.csdn.net/weixin_39370093/article/details/125742661

版权

uni app 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文使用的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/qq_37906822/article/details/122704299https://blog.csdn.net/qq_37906822/article/details/122704299

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