# 页面简介

uni-app x 项目中，页面文件的后缀名.uvue文件。

每个uvue文件，都是一个符合Vue SFC规范的 vue 文件。

在 uni-app x 中，后缀名是.uvue文件

uni-app x 只有 .uvue页面，不支持和vue页面并存（因vue是js驱动、webview渲染，uni-app x在app-Android中没有js引擎，app中渲染是原生渲染，无法使用vue页面）。

当然某些组件可以通过条件编译同时适配uni-app和uni-app x，所以在uni-app x的项目中，看到某些组件代码也有vue文件，但这些vue文件并不在uni-app x项目中生效。

另外uts组件插件的入口文件命名是index.vue。因为uts插件在uni-app和uni-app x中均可使用，所以文件后缀名为vue。
但这个vue文件并不是真正的页面，它只是uts组件插件为了尽可能照顾开发者习惯而参考vue规范定义的原生组件入口文件。

uni-app x 在app-android上，每个页面都是一个全屏activity，不支持透明。

# 页面管理

# 新建页面

新建页面，默认保存在工程根目录下的pages目录下。

每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中注册的页面，在编译阶段会被忽略。pages.json的完整配置参考：页面配置。

通过HBuilderX开发 uni-app 项目时，在项目上右键“新建页面”，HBuilderX会自动在pages.json中完成页面注册，开发更方便。 <!-- 同时，HBuilderX 还内置了常用的页面模板，选择这些模板，可以大幅提升开发效率。

--> 新建页面时，可以选择`是否创建同名目录`。创建目录的意义在于：

如果你的页面较复杂，需要拆分多个附属的uts、css、组件等文件，则使用目录归纳比较合适。
如果只有一个页面文件，大可不必多放一层目录。

# 删除页面

删除页面时，需做两件工作：

删除.uvue文件
删除pages.json -> pages列表项中的配置（如使用HBuilderX删除页面，会在状态栏提醒删除pages.json对应内容，点击后会打开pages.json并定位到相关配置项）

# 页面改名

操作和删除页面同理，依次修改文件和 pages.json。

# pages.json

pages.json是工程的页面管理配置文件，包括：页面路由注册、页面style参数配置（原生标题栏、下拉刷新...）、首页tabbar等众多功能。

其篇幅较长，另见 pages.json

# 设置应用首页

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

{
	"pages": [
		{
			"path": "pages/index/index", //名字叫不叫index无所谓，位置在第一个，就是首页
			"style": {
				"navigationBarTitleText": "首页" //页面标题
			}
		},
		{
			"path": "pages/my",
			"style": {
				"navigationBarTitleText": "我的"
			}
		},
	]
}

# 页面内容构成

uvue页面基于 vue 单文件组件规范。一个页面内，有3个根节点标签：

模板区 <template>
脚本区 <script>
样式区 <style>

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

<script setup>
  let title = ref("Hello world") //定义一个响应式变量。类似于选项式的定义data
	const buttonClick = () => { //方法不再需要写在method下面
	  console.log("按钮被点了")
	}
	onReady(() => {
		console.log("页面onReady触发") // 页面生命周期，编写页面加载后的逻辑
	})
</script>

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

页面内容构成，另有详细文档

# 页面生命周期

组合式	选项式	Android	iOS	web	描述
onLoad	onLoad	3.9	4.11	4.0	生命周期回调监听页面加载页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
onPageShow	onShow	3.9	4.11	4.0	生命周期回调监听页面显示页面显示/切入前台时触发。
onReady	onReady	3.9	4.11	4.0	生命周期回调监听页面初次渲染完成页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onPageHide	onHide	3.9	4.11	4.0	生命周期回调监听页面隐藏页面隐藏/切入后台时触发。如 `navigateTo` 或底部 `tab` 切换到其他页面，应用切入后台等。
onUnload	onUnload	3.9	4.11	4.0	生命周期回调监听页面卸载页面卸载时触发。如 `redirectTo` 或 `navigateBack` 到其他页面时。
onPullDownRefresh	onPullDownRefresh	3.9	4.11	4.0	监听用户下拉动作 - 需要在 `pages.json` 的页面配置中开启 `enablePullDownRefresh` 。 - 可以通过 `uni.startPullDownRefresh` 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。 - 当处理完数据刷新后，`uni.stopPullDownRefresh` 可以停止当前页面的下拉刷新。
onReachBottom	onReachBottom	3.9	4.11	4.0	页面上拉触底事件的处理函数 - 可以在 `pages.json` 的页面配置中设置触发距离 `onReachBottomDistance` 。 - 在触发距离内滑动期间，本事件只会被触发一次。
onPageScroll	onPageScroll	3.9	4.13	4.0	页面滚动触发事件的处理函数监听用户滑动页面事件。
onResize	onResize	3.9	4.11	4.0	页面尺寸改变时触发
onBackPress	onBackPress	3.9	4.11	4.0	监听页面返回
onInit	onInit	x	x	x	生命周期回调监听页面初始化页面初始化时触发。一个页面只会调用一次，可以在 onInit 的参数中获取打开当前页面路径中的参数。
onShareAppMessage	onShareAppMessage	x	x	x	用户点击右上角转发监听用户点击页面内转发按钮（`<button>` 组件 `open-type="share"`）或右上角菜单“转发”按钮的行为，并自定义转发内容。
onShareTimeline	onShareTimeline	x	x	x	用户点击右上角转发到朋友圈监听右上角菜单“分享到朋友圈”按钮的行为，并自定义发享内容。
onAddToFavorites	onAddToFavorites	x	x	x	用户点击右上角收藏监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。
onTabItemTap	onTabItemTap	x	x	4.0	当前是 tab 页时，点击 tab 时触发
onNavigationBarButtonTap	onNavigationBarButtonTap	x	x	4.0	监听原生标题栏按钮点击事件
onNavigationBarSearchInputChanged	onNavigationBarSearchInputChanged	x	x	4.0	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	onNavigationBarSearchInputConfirmed	x	x	4.0	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked	onNavigationBarSearchInputClicked	x	x	4.0	监听原生标题栏搜索输入框点击事件

示例代码, 详见

# 页面onLoad生命周期

页面初始化时，会触发onLoad生命周期。此时Dom还未构建渲染完毕（需要等onReady）。

所以onLoad页面常见的用途是开始联网取数，由于联网是异步的，在onLoad发起联网，等到获取到服务器数据后，也就可以更新到data上了。

页面的URL支持参数传递，这个参数也是在onLoad生命周期中获取。

通过uni.navigateTo API 或 <navigator>组件，可跳转到目标页面，比如从list页面跳转到detail页面，如下：

// 发起跳转，并传入post_id参数
uni.navigateTo({
  url: '/pages/template/list-news/detail/detail?post_id=' + post_id
})

// 在detail页面的onLoad中接收URL中传递的参数
export default {
  data() {
    return {
      post_id: ""
    }
  },
  onLoad(event : OnLoadOptions) { // 类型非必填，可自动推导
    this.post_id = event["post_id"] ?? "";
    // 可根据详情页id继续联网请求数据...
  },
}