# getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,数组中的元素为页面实例,第一个元素为首页,最后一个元素为当前页面。

HBuilderX 4.31+,强化了页面对象,新增了UniPage对象。getCurrentPages()返回值改为UniPage对象数组。

UniPage对象强化了开发者对页面的管理功能,并且支持在uts插件中使用。

# getCurrentPages 兼容性

Web Android iOS iOS uni-app x UTS 插件
4.0 3.9 4.11 4.31

# 返回值

类型
Array<UniPage>
名称 类型 必备 默认值 兼容性 描述
route string -
页面的路由地址
options UTSJSONObject -
页面的路由参数信息
vm ComponentPublicInstance -
UniPage vue 实例对象
$vm ComponentPublicInstance -
UniPage vue 实例对象 已废弃,仅为了向下兼容保留

# UniPage 的方法

# getPageStyle(): UTSJSONObject

获取当前页面样式。详细属性配置请参考PageStyle

# getPageStyle 兼容性
Web Android iOS iOS uni-app x UTS 插件
4.31 4.31 4.31 4.31
# 返回值
类型
UTSJSONObject

# setPageStyle(style: UTSJSONObject): void

设置当前页面样式。详细属性配置请参考PageStyle

# setPageStyle 兼容性
Web Android iOS iOS uni-app x UTS 插件
4.31 4.31 4.31 4.31
# 参数
名称 类型 必填 默认值 兼容性 描述
style UTSJSONObject - - -

# getParentPage(): UniPage | null

用于 dialogPage 获取所属父页面

# getParentPage 兼容性
Web Android iOS iOS uni-app x UTS 插件
4.31 4.31 4.31 4.31
# 返回值
类型 必备
UniPage

# getDialogPages(): UniPage[]

获取当前页面的 dialog 子页面集合

# getDialogPages 兼容性
Web Android iOS iOS uni-app x UTS 插件
4.31 4.31 4.31 4.31
# 返回值
类型
Array<UniPage>

# getElementById(id: string.IDString | string): UniElement | null

返回一个匹配特定 ID 的元素, 如果不存在,返回 null。
如果需要获取指定的节点类型,需要使用 as 进行类型转换。
ID 区分大小写,且应该是唯一的。如果存在多个匹配的元素,则返回第一个匹配的元素。

# getElementById 兼容性
Web Android iOS
4.31 4.31 4.31
# 参数
名称 类型 必填 默认值 兼容性 描述
id string.IDString | string - - -
# 返回值
类型 必备
UniElement

# getAndroidView(): View | null

返回 android 平台页面根 view

# getAndroidView 兼容性
Web Android iOS
x 4.31 x
# 返回值
类型 必备
View

# getIOSView(): UIView | null

返回 ios 平台页面根 view

# getIOSView 兼容性
Web Android iOS iOS uni-app x UTS 插件
x x x 4.33
# 返回值
类型 必备
UIView

# getHTMLElement(): UniElement | null

返回页面 HTML Element 对象

# getHTMLElement 兼容性
Web Android iOS
4.31 x x
# 返回值
类型 必备
UniElement

# $setPageStyle(style: UTSJSONObject): void

设置当前页面样式。详细属性配置请参考PageStyle 已废弃,仅为了向下兼容保留

# $setPageStyle 兼容性
Web Android iOS
4.13 4.13 4.13
# 参数
名称 类型 必填 默认值 兼容性 描述
style UTSJSONObject - - -

# $getPageStyle(): UTSJSONObject

获取当前页面样式。详细属性配置请参考PageStyle 已废弃,仅为了向下兼容保留

# $getPageStyle 兼容性
Web Android iOS
4.13 4.13 4.13
# 返回值
类型
UTSJSONObject

注意

  • HBuilderX 4.31+,$getPageStyle和$setPageStyle不再需要加前缀$。
  • 使用选项式 API 时,不可创建 routeoptions 同名响应式变量,否则会覆盖当前 page 实例 的同名属性。
  • 4.31 前仅 WebiOS(非 uts 插件) 端支持通过 page.$vm 获取 vue 实例。
    4.31+ 仅 iOS uts 插件 环境不支持通过 page.vm 获取 vue 实例。

PageStyle

支持当前页面 style 节点属性

属性 类型 Android iOS web 默认值
enablePullDownRefresh Boolean 4.13 4.13 4.13 false
backgroundColorContent String 4.15 4.15 4.18 #ffffff
navigationBarBackgroundColor String 4.18 4.18 4.18 #007AFF
navigationBarTextStyle String 4.18 4.18 4.18 white
navigationBarTitleText String 4.18 4.18 4.18
navigationStyle String x x 4.18 default
backgroundColor String 4.18 4.18 x #ffffff
backgroundTextStyle String 4.31 4.31 x dark
onReachBottomDistance Number x x 4.18 50
pageOrientation String 4.18 4.25 x auto
disableSwipeBack Boolean x 4.18 x false
hideStatusBar Boolean 4.31 x x false
hideBottomNavigationIndicator Boolean 4.31 x x false

注意事项

  • web端由于会自动摇树优化未使用的特性,如果整个项目中都没有使用到下拉刷新enablePullDownRefresh,那么下拉刷新功能会被摇掉,此时设置打开下拉刷新将无效。
  • app-android平台的页面是activity,不支持backgroundColorContent设为透明。
  • 4.15版本前,app-ios平台在page.json 中设置页面 enablePullDownRefreshfalse 时,无法通过 $setPageStyle 方法动态开启页面下拉刷新。新版已修复该问题。

# 示例

hello uni-app x

扫码体验(手机浏览器跳转到App直达页)

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>
        <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>
      </view>

      <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>
    </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>

# 参见

# 通用类型

# GeneralCallbackResult

名称 类型 必备 默认值 兼容性 描述
errMsg string - - 错误信息

# Tips

  • 4.32 新增支持通过 this.$page 获取当前 UniPage 实例, 代码示例:
// 选项式 API
const dialogPage = this.$page
// 组合式 API
const currentInstance = getCurrentInstance()
const dialogPage = instance?.proxy?.$page