简体中文
getCurrentPages()
函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,数组中的元素为页面实例,第一个元素为首页,最后一个元素为当前页面。
HBuilderX 4.31+,强化了页面对象,新增了UniPage对象。getCurrentPages()返回值改为UniPage对象数组。
UniPage对象强化了开发者对页面的管理功能,并且支持在uts插件中使用。
getCurrentPages()
获取的是主页面栈,不能直接获取dialogPage页面。拿到主页面UniPage对象后,可以再通过getDialogPages()方法获取这个主页面的子弹窗页面栈。
选项式的vue中通过this.$page
,是另一种快速获取当前页面对象的方式。它得到的不是一个页面数组,而是一个具体的当前页面。并且这种方式支持主页面,也支持dialogPage。组合式写法见下
Web | 微信小程序 | Android | iOS | iOS uni-app x UTS 插件 |
---|---|---|---|---|
4.0 | 4.41 | 3.9 | 4.11 | 4.31 |
类型 |
---|
Array<UniPage> |
Template
Script
<template>
<!-- #ifdef APP -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<view>
<page-head title="getCurrentPages"></page-head>
<view class="uni-padding-wrap">
<button @click="_getCurrentPages">getCurrentPages</button>
<view v-if="pages.length" style="padding: 15px 0px">
<text>当前页面栈中 {{ pages.length }} 个页面,列表如下:</text>
<template v-for="(page, index) in pages" :key="page.route">
<text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
</template>
</view>
<!-- #ifndef MP -->
<button class="uni-common-mt" @click="check$page">check $page</button>
<button class="uni-common-mt" @click="checkGetParentPage">
check getParentPage
</button>
<button class="uni-common-mt" @click="checkGetDialogPages">
check getDialogPages
</button>
<button id="check-get-element-by-id-btn" class="uni-common-mt" @click="checkGetElementById">
check getElementById
</button>
<button class="uni-common-mt" @click="checkGetAndroidView">
check getAndroidView
</button>
<button class="uni-common-mt" @click="checkGetIOSView">
check getIOSView
</button>
<button class="uni-common-mt" @click="checkGetHTMLElement">
check getHTMLElement
</button>
<!-- #endif -->
</view>
<!-- #ifndef MP -->
<page-head title="currentPageStyle"></page-head>
<template v-for="(item, index) in PageStyleArray">
<view class="page-style-item" v-if="currentPageStyle[item.key] != null" :key="index">
<view class="item-text">
<text class="item-text-key">{{ item.key }}:</text>
<text class="item-text-value">{{
currentPageStyle[item.key]
}}</text>
</view>
<view class="set-value" v-if="item.type == 'boolean'">
<switch :checked="currentPageStyle.getBoolean(item.key)"
@change="switchChange(item.key, $event as UniSwitchChangeEvent)">
</switch>
</view>
<view class="set-value" v-else-if="item.type == 'number'">
<slider :value="currentPageStyle.getNumber(item.key)" :show-value="true"
@change="sliderChange(item.key, $event as UniSliderChangeEvent)" />
</view>
<view class="set-value" v-else-if="item.type == 'string'">
<radio-group class="radio-set-value" @change="radioChange(item.key, $event as RadioGroupChangeEvent)">
<radio class="radio-value" v-for="(item2, index2) in item.value" :key="index2" :value="item2">{{ item2 }}
</radio>
</radio-group>
</view>
</view>
</template>
<button style="margin: 10px" @click="goSetDisablePullDownRefresh">
go set disable pullDownRefresh
</button>
<!-- #endif -->
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.page {
flex: 1;
padding: 10px;
}
.page-style {
margin-top: 15px;
}
.page-style-item {
padding: 10px;
margin-top: 10px;
background-color: #ffffff;
border-radius: 5px;
}
.item-text {
flex-direction: row;
}
.item-text-key {
font-weight: bold;
}
.item-text-value {
margin-left: 5px;
}
.set-value {
margin-top: 10px;
}
.radio-set-value {
flex-direction: row;
}
.radio-value {
margin-left: 10px;
}
</style>
UniPage对象上有较多方法,比如获取/修改pageStyle,详见
名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
---|---|---|---|---|---|
errMsg | string | 是 | - | 错误信息 |
4.32
新增选项式通过 this.$page
获取当前 UniPage
实例, 组合式通过getCurrentInstance
,代码示例:// 选项式 API
const dialogPage = this.$page
// 组合式 API
const currentInstance = getCurrentInstance()
const dialogPage = instance?.proxy?.$page