uniapp的页面 - 技术栈

首页

pages.json -> pages配置项中的第一个页面就是应用启动后的首页

新建页面

点击 " 文件->新建->3.uni-app页面" , 会弹出下面的页面创建对话框，里面有相当多的模板可供选择

页面构成

uni-app 页面基于 vue 规范。一个页面内，有3个根节点标签：

模板组件区 <template>

vue 的 template 中写的全都是 vue 组件，每个组件支持属性、事件、 vue 指令，还可以绑定 vue 的 data 数据

在vue2中，template 的二级节点只能有一个节点，一般是在一个根 view 下继续写页面组件

html 复制代码

<template>
	<view class="content">
		<button @click="buttonClick">{{title}}</button>
	</view>
</template>

但在vue3中，template可以有多个二级节点，省去一个层级，如下：

html 复制代码

<template>
	<view>
		<text>标题</text>
	</view>
	<scroll-view>

	</scroll-view>
</template>

脚本区 <script>

script中编写脚本，可以通过lang属性指定脚本语言。

在vue和nvue中，默认是js，可以指定ts。

在uvue中，仅支持uts，不管script的lang属性写成什么，都按uts编译。

在vue的选项式（option）规范中，script下包含 export default {}。除了选项式，还有组合式写法。

页面级的代码大多写在 export default {} 中。写在里面的代码，会随着页面关闭而关闭

写在 export default {} 外面的代码，一般有几种情况：

1.引入第三方 js/ts 模块

2.引入非 easycom 的组件（一般组件推荐使用easycom，无需导入注册）

3.在 ts/uts 中，对 data 进行类型定义

4.定义作用域更大的变量

html 复制代码

<script lang="ts">
	const TAB_OFFSET = 1; // 外层静态变量不会跟随页面关闭而回收
	import charts from 'charts.ts'; // 导入外部js/ts模块
	import swiperPage from 'swiper-page.vue'; //导入非easycom的组件
	type GroupType = {
		id : number,
		title : string
	} // 在ts中，为下面data数据的 groupList 定义类型
	export default {
		components: {
		    swiperPage
		}, // 注册非easycom组件
		data() {
			return {
				groupList: [
					{ id: 1, title: "第一组" },
					{ id: 2, title: "第二组" },
				] as GroupType[], // 为数据groupList定义ts类型
			}
		},
		onLoad() {},
		methods: {}
	}
</script>

开发者应谨慎编写 export default {} 外面的代码，这里的代码有2个注意事项：

1.影响应用性能。这部分代码在应用启动时执行，而不是页面加载。如果这里的代码写的太复杂，会影响应用启动速度，占用更多内存。

2.不跟随组件、页面关闭而回收。在外层的静态变量不会跟随页面关闭而回收。如果必要你需要手动处理。比如 beforeDestroy 或 destroyed 生命周期进行处理。

export default {} 里的内容，是页面的主要逻辑代码。包括几部分：

1.data：template模板中需要使用的数据。具体另见

2.页面生命周期：如页面加载、隐藏、关闭，具体见下

3.methods方法，如按钮点击、屏幕滚动

html 复制代码

<template>
	<view>
		<button @click="buttonClick">{{title}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "点我", // 定义绑定在页面上的data数据
				// 多个data在这里继续定义。逗号分隔
			}
		},
		onLoad() {
			// 页面启动的生命周期，这里编写页面加载时的逻辑
		},
		// 多个页面生命周期监听，在这里继续写。逗号分隔
		methods: {
			buttonClick: function () {
				this.title = "被点了"
			},
			// 多个方法，在这里继续写。逗号分隔
		}
	}
</script>

样式区 <style>

html 复制代码

<template>
	<view class="content">
		<button @click="buttonClick">{{title}}</button>
	</view>
</template>


<style>
	.content {
		width: 750rpx;
		background-color: white;
	}
</style>

Vue2和Vue3

2022年11月，DCloud 官方发布了 HBuilderX 3.6.0 版本，这是一个重要的里程碑。从这个版本开始：

创建工具升级：

推出了全新的项目脚手架 create-uni（替代之前基于 vue-cli 的方式）。

create-uni 生成的默认模板就是 Vue 3 版本。

IDE 默认设置变更：

在 HBuilderX 的图形化创建项目界面中，"默认模板（Vue3）" 被放置在了模板列表的第一个位置，成为最显眼、最易选的推荐选项。

虽然仍保留"默认模板"（Vue2）供选择，但官方引导已明确倾向 Vue 3

页面生命周期

Vue2的页面生命周期

Vue3的页面生命周期

页面传值

html 复制代码

//接收页面  
onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},
  
onUnload() {  
    // 移除监听事件  
    uni.$off('login');  
},

html 复制代码

// 发送页面
onLoad() {
    uni.$emit('login', {
       userinfo:'A'
    });
}

页面路由

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转

打开新页面

javascript 复制代码

recordedData(){
	console.log(5896)
	uni.navigateTo({
		url: "./recorded?nameData=" + this.titleName
	})
},

重定向页面

使用uni.navigateTo打开页面的时候，A打开B，B打开C，C又打开A，会创建4个不同的页面实例,并不会复用之前的A，为控制页面栈的深度避免无限增长，此时应使用uni.redirectTo，而不是 uni.navigateTo

javascript 复制代码

BackPage() {
	if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
		let url = '/' + __wxConfig.pages[0]
		return uni.redirectTo({url})
	}
}

切换TAB页

javascript 复制代码

uni.switchTab({
	url: "../list/list"
})
console.log("登录成功")

页面返回

javascript 复制代码

confirm() {
	if (this.selectListData == null || this.selectListData.size == 0) {
		uni.showToast({
			title: "您还没选择司机呢？",
			icon: "none"
		})
		return;
	}

	// console.log(JSON.stringify(_this.selectListData))
	var item = this.selectListData[0];
	var pages = getCurrentPages();
	var currPage = pages[pages.length - 1]; //当前页面
	var prevPage = pages[pages.length - 2]; //上一个页面

	prevPage.$vm.driverData = item;
	uni.navigateBack({});
},