UniPage

uni-app x中，每个页面都对应一个UniPage对象。

如果是dialogPage，也可以通过UniPage的getDialogPage方法获取。

通过UniPage对象，可以获取/修改页面的pageStyle，让pages.json中的页面设置可以动态修改；可以继续获取原生页面对象，如activity；可以继续获取页面的vue示例，通过vm属性。

UniPage在App和Web平台较完善，在小程序端受小程序未开放，很多功能无法实现。具体见兼容性表格。

UniPage 的属性值

名称	类型	必备	默认值	兼容性	描述
route	string	是	-	Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.31 x 4.31 4.31 4.31	页面的路由地址
options	UTSJSONObject	是	-	Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.31 x 4.31 4.31 4.31	页面的路由参数信息
vm	VueComponent	否	-	Web 微信小程序 Android iOS 4.31 x 4.31 4.31	UniPage vue 实例对象
名称 类型 必备 默认值 兼容性 描述 $data Map<string, any> 是 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.0 4.41 √ 4.11 x $props Map<string, any> 是 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.0 4.41 √ 4.11 x $attrs Map<string, any> 是 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.0 4.41 √ 4.11 x $slots Map<string, any> 是 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.0 4.41 √ 4.11 x $refs Map<string, any> 是 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.0 4.41 √ 4.11 x $parent VueComponent 是 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.0 4.41 √ 4.11 x $root VueComponent 是 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.0 4.41 √ 4.11 x $options VueComponentOptions 是 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.0 4.41 √ 4.11 x $el UniElement 是 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.0 4.41 √ 4.11 x $page UniPage 是 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 4.31 - 4.31 4.31 x
pageBody	UniPageBody	是	-	Web 微信小程序 Android iOS 4.51 x 4.51 4.51	UniPage pageBody 位置及宽高信息，单位为px
名称 类型 必备 默认值 兼容性 描述 top number 是 - - pageBody 距离顶部的距离 right number 是 - - pageBody 距离右侧的距离 bottom number 是 - - pageBody 距离底部的距离 left number 是 - - pageBody 距离左侧的距离 width number 是 - - pageBody 的宽度 height number 是 - - pageBody 的高度
safeAreaInsets	UniSafeAreaInsets	是	-	Web 微信小程序 Android iOS 4.51 x 4.51 4.51	UniPage 安全区域插入位置（与屏幕边界的距离）信息
名称 类型 必备 默认值 兼容性 描述 left number 是 - Web 微信小程序 Android iOS - - 4.51 4.51 安全区域左侧插入位置（距离左边边界距离） right number 是 - Web 微信小程序 Android iOS - - 4.51 4.51 安全区域右侧插入位置（距离右边边界距离） top number 是 - Web 微信小程序 Android iOS - - 4.51 4.51 安全区顶部插入位置（距离顶部边界距离） bottom number 是 - Web 微信小程序 Android iOS - - 4.51 4.51 安全区域底部插入位置（距离底部边界距离）
$vm	VueComponent	否	-	Web 微信小程序 Android iOS 4.31 x 4.31 4.31	UniPage vue 实例对象

UniPage 兼容性

Web	微信小程序	Android	iOS
-	-	-	-

UniPage 的方法

getPageStyle(): UTSJSONObject

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

getPageStyle 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件
4.31	x	4.31	4.31	4.31

返回值

类型
UTSJSONObject

setPageStyle(style: UTSJSONObject): void

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

setPageStyle 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件
4.31	x	4.31	4.31	4.31

参数

名称	类型	必填	默认值	兼容性	描述
style	UTSJSONObject	是	-	-	-

注意

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

PageStyle

支持当前页面 style 节点属性（注意并非所有pages.json的pageStyle都可以动态修改）

属性	类型	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 中设置页面 enablePullDownRefresh 为 false 时，无法通过 $setPageStyle 方法动态开启页面下拉刷新。新版已修复该问题。

getParentPage(): UniPage | null

用于 dialogPage 获取所属父页面

getParentPage 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件
4.31	x	4.31	4.31	4.31

返回值

类型	必备
UniPage	否

getDialogPages(): UniPage[]

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

getDialogPages 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件
4.31	x	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	x	4.31	4.31

参数

名称	类型	必填	默认值	兼容性	描述
id	string.IDString | string	是	-	-	-

返回值

类型	必备
UniElement	否

getAndroidView(): View | null

返回 android 平台页面根 view

getAndroidView 兼容性

Web	微信小程序	Android	iOS
x	x	4.31	x

返回值

类型	必备
View	否

getIOSView(): UIView | null

返回 ios 平台页面根 view

getIOSView 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件
x	x	x	x	4.33

返回值

类型	必备
UIView	否

getHTMLElement(): UniElement | null

返回页面 HTML Element 对象

getHTMLElement 兼容性

Web	微信小程序	Android	iOS
4.31	x	x	x

返回值

类型	必备
UniElement	否

$setPageStyle(style: UTSJSONObject): void

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

$setPageStyle 兼容性

Web	微信小程序	Android	iOS
4.13	x	4.13	4.13

参数

名称	类型	必填	默认值	兼容性	描述
style	UTSJSONObject	是	-	-	-

$getPageStyle(): UTSJSONObject

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

$getPageStyle 兼容性

Web	微信小程序	Android	iOS
4.13	x	4.13	4.13

返回值

类型
UTSJSONObject

示例

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>
        <!-- #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>