definePage

使用 definePage 宏定义页面

更多信息请参考什么是宏

definePage 宏，用于动态生成 pages.json。

`definePage` 全局类型声明

将类型添加到 tsconfig.json 中的 compilerOptions.types 下

tsconfig.json

{
  "compilerOptions": {
    "types": ["@uni-helper/vite-plugin-uni-pages"]
  }
}

使用

vue SFC 文件内 `definePage` 宏使用方式

更多使用方式请参考 playground/pages/define-page

注意：

以下代码需要写在 script 内
definePage 宏和当前 SFC 不同域，且先于 SFC 生成，SFC 内部变量无法使用。
页面 path url 将会自动根据文件路径生成，如无须配置其他项目，definePage可省略
同一个页面内仅可使用一个 definePage

定义页面

对象形式

pages/index.vue

<script setup lang="ts">
definePage({
  style: {
    navigationBarTitleText: 'hello world',
  },
  middlewares: [
    'auth',
  ],
})
</script>

函数形式

pages/index.vue

<script setup lang="ts">
import type { HelloWorld } from './utils'

definePage(() => {
  const words: HelloWorld = {
    hello: 'hello',
    world: 'world',
  }

  return {
    style: {
      navigationBarTitleText: [words.hello, words.world].join(' '),
    },
    middlewares: [
      'auth',
    ],
  }
})
</script>

嵌套函数

pages/index.vue

<script setup lang="ts">
definePage(() => {
  function getTitle(): string {
    const hello = 'hello'
    const world = 'world'

    return [hello, world].join(' ')
  }

  return {
    style: {
      navigationBarTitleText: getTitle(),
    },
    middlewares: [
      'auth',
    ],
  }
})
</script>

异步数据获取

pages/index.vue

<script setup lang="ts">
definePage(async () => {
  function fetchTitle(): Promise<string> {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('hello world from async')
      }, 100)
    })
  }

  const title = await fetchTitle()

  return {
    style: {
      navigationBarTitleText: title,
    },
    middlewares: [
      'auth',
    ],
  }
})
</script>

引入外部函数、变量

引入外部函数、变量。需要注意的是，仅支持引入：

纯 JavaScript 代码（如 node_modules 中的第三方库）
TypeScript 类型声明（因为会被自动忽略）

pages/index.vue

<script setup lang="ts">
import { parse as parseYML } from 'yaml'

definePage(() => {
  const yml = `
style:
  navigationBarTitleText: "yaml test"
`
  return parseYML(yml)
})
</script>

条件编译

更多信息请参考 uni-env

npm

pnpm

bun

yarn

npm i @uni-helper/uni-env

pages/index.vue

<script setup lang="ts">
import { isH5 } from '@uni-helper/uni-env'

definePage(() => {
  const title = isH5 ? 'H5 环境' : '非 H5 环境'

  return {
    style: {
      navigationBarTitleText: title,
    },
    middlewares: [
      'auth',
    ],
  }
})
</script>

选项式 API

pages/index.vue

<script>
definePage({
  style: {
    navigationBarTitleText: 'Option API 内使用 definePage',
  },
  middlewares: [
    'auth',
  ],
})

export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>