页面元信息

在页面文件中声明标题、布局、页面类型和 TabBar 项

页面元信息用于在页面文件中声明页面级配置。Oiyo 会读取这些配置，并把它们合并进生成的 pages.json。

它解决的问题是：页面配置不再集中堆在一个 JSON 文件里，而是和页面代码放在一起维护。

definePageMeta

在页面中直接使用 definePageMeta()，无需导入：

definePageMeta({
  // 当前页面元信息
})

definePageMeta() 通常放在页面 <script setup> 顶部，让页面配置一眼可见。

了解 definePageMeta 有哪些配置

指定首页

设置页面为首页（即应用首个打开的页面），可以通过 type 添加语义 home 进行标记。设置后，该页面将始终位于 pages.json 中 pages 字段的第一项。

src/pages/home/index.vue

<script setup>
definePageMeta({
  type: 'home',
})
</script>

生成结果：

src/pages.json

{
  "pages": [
    {
      "path": "pages/home/index",
      "type": "home"
    },
    {
      "path": "pages/my/index"
    }
  ]
}

type: 'home' 只允许在主包页面中设置。

声明样式

页面样式通过 style 属性声明。

src/pages/my/index.vue

<script setup>
definePageMeta({
  style: {
    navigationBarTitleText: '我的 - oiyo app',
  },
})
</script>

生成结果：

src/pages.json

{
  "pages": [
    {
      "path": "pages/my/index",
      "style": {
        "navigationBarTitleText": "我的 - oiyo app"
      }
    }
  ]
}

指定布局

页面通过 layout 指定布局。

src/pages/home/index.vue

<script setup>
definePageMeta({
  layout: 'tabbar',
})
</script>

布局名称来自 src/layouts 下的布局文件。比如 src/layouts/tabbar.vue 对应 layout: 'tabbar'。

如果页面不指定布局，通常会使用默认布局。

配置 TabBar 项

页面可以通过 tab 属性声明主包页面作为 TabBar 项。

<script setup>
definePageMeta({
  tab: {
    index: 0,
    text: '首页',
    // iconPath: '/static/x',
    // selectedIconPath: '/static/y'
  },
})
</script>

<script setup>
definePageMeta({
  tab: {
    index: 1,
    text: '我的',
  },
})
</script>

index 用于控制 TabBar 项排序，数值越小越靠前。

tab 只允许在主包页面中设置。

生成结果：

src/pages.json

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/index",
        "index": 0,
        "text": "首页"
      },
      {
        "pagePath": "pages/my/index",
        "index": 1,
        "text": "我的"
      }
    ]
  }
}

组合使用

一个页面可以同时声明页面类型、布局、样式和 TabBar 配置。

src/pages/home/index.vue

<script setup>
definePageMeta({
  type: 'home',
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '首页',
  },
  tab: {
    index: 0,
    text: '首页',
  },
})
</script>

该页面将成为首页，作为 TabBar 项，使用 tabbar 布局，页面标题为“首页”。

与全局页面配置的分工

definePageMeta() 负责单个页面。definePagesConfig() 负责所有页面共享的默认配置。

推荐分工：

页面标题写在 definePageMeta()。
页面布局写在 definePageMeta()。
页面类型写在 definePageMeta()。
TabBar 项配置写在 definePageMeta() 的 tab 字段。
默认背景、默认导航栏颜色、TabBar 样式配置写在 src/pages.config.ts。

使用建议

建议把 definePageMeta() 放在页面脚本顶部：

definePageMeta({
  // 当前页面配置
})

// 更多的业务逻辑

打开页面文件时，可以先看到页面配置，再阅读业务逻辑。

页面注册

基于文件的路由系统，生成主包页面、分包页面、TabBar

全局页面配置

用 definePagesConfig 维护 pages.json 全局性的页面默认配置