uni-app简单页面操作-创建与跳转

TOC/TOC更多详细内容，请前端爱好者。

braden

542人浏览 · 2023-07-31 02:45:00

braden · 2023-07-31 02:45:00 发布

页面简单操作
组合式 API（Composition API）

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

页面简单操作

创建页面

在页面目录（pages），鼠标右键点击 新建页面（P）,即可进入新建页面面板。

详细界面如下：

页面创建成功后，会自动创建页面信息到页面配置文件 (pages.json

创建底部导航栏

页面效果如下：

uni-app 的 底部导航栏 和微信小程序的配置很类似查看微信小程序tabbar配置

具体操作：

在 pages.json文件 下引入如下配置即可


...


"tabBar": {
    "color": "#333",
    "selectedColor": "#f90",
    "list": [
        {
            "text": "首页",
            "pagePath": "pages/index/index", 
            "iconPath": "static/c1.png",
            "selectedIconPath": "static/c3.png"
        },
        {
            "text": "个人中心",
            "pagePath": "pages/personalCenter/index/index",
            "iconPath": "static/c2.png",
            "selectedIconPath": "static/c4.png"
        }
    ],
}

...

页面跳转

navigator标签

该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在 pages.json 中注册。

navigateto api

uni.navigateTo(OBJECT)
uni.redirectTo(OBJECT)
uni.reLaunch(OBJECT)
uni.switchTab(OBJECT)
uni.navigateBack(OBJECT)

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});


// 在test.vue页面接收参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

组合式 API（Composition API）

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。

这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。

比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

从 vue 包内导入并使用基础的组合式API，具体 API 可以参考：Vue 官网

从 @dcloudio/uni-app 包内导入 uni-app 应用生命周期及页面的生命周期。

应用生命周期

文档地址：https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是 页面入口文件。

但 App.vue本身不是页面，这里不能编写视图元素 ，也就是没有<template>。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

uni-app 支持如下应用生命周期函数：

示例代码

<script>
	// 只能在App.vue里监听应用的生命周期
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

页面生命周期

文档地址：https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

uni-app会将 pages.json -> pages配置项中的第一个页面，作为当前工程的首页（启动页）。

uni-app 页面除 支持 Vue 组件生命周期 外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档和 Vue3 组合式 API 使用文档。

使用组合式 API

使用 Setup

<template>
	<view class="container">
		<button @click="setNum">{{num}}</button>
	</view>
</template>

<script>
	import { defineComponent,ref } from 'vue'
	export default defineComponent({
		setup(props, context) {
			const num = ref(2)
			const setNum = () => { 
				let temValue = num.value + 5
				num.value = temValue
			}
			return {
				num,
				setNum
			}
		}
	})
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

使用 Script Setup

<template>
	<view class="container">
		<button @click="setNum">{{num}}</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue'  
	const num = ref(2)
	const setNum = () => { 
		let temValue = num.value + 5
		num.value = temValue
	}  
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

参考文档

https://uniapp.dcloud.net.cn/component/navigator.html
https://uniapp.dcloud.net.cn/api/router.html#navigateto
https://uniapp.dcloud.net.cn/tutorial/vue3-composition-api.html#%E4%BD%BF%E7%94%A8-script-setup