uni-page-generator

uni-app Page Generator

Quickly create uni-app pages that conform to the wot-starter project conventions.

Use Cases

• Create main package page (src/pages/)
• Create subpackage page (src/subPages/, src/subEcharts/ etc.)
• Automatically configure routes and layout

Page Templates

Basic page

<script setup lang="ts">
definePage({
  name: '页面名称',           // 路由 name，用于编程式导航
  layout: 'default',         // 布局：'default' | 'tabbar'
  style: {
    navigationBarTitleText: '页面标题',
  },
})

const router = useRouter()
</script>

<template>
  <view class="p-3">
    <!-- 页面内容 -->
  </view>
</template>

TabBar page

<script setup lang="ts">
definePage({
  name: 'home',
  layout: 'tabbar',          // 使用 tabbar 布局
  style: {
    navigationBarTitleText: '首页',
  },
})
</script>

<template>
  <view class="box-border py-3">
    <!-- TabBar 页面内容 -->
  </view>
</template>

Directory Structure

src/
├── pages/              # 主包页面（TabBar 页面）
│   ├── index/
│   │   └── index.vue
│   └── about/
│       └── index.vue
├── subPages/           # 分包页面
│   ├── router/
│   ├── request/
│   └── ...
└── subEcharts/         # ECharts 分包

Creation Steps

1. Determine the page location

   • TabBar page → src/pages/{name}/index.vue
   • Regular page → src/subPages/{name}/index.vue

2. Use the definePage macro

   • Configure name for programmatic navigation
   • Configure layout to select the layout
   • Configure style to set the navigation bar

3. Page Navigation

const router = useRouter()

// 使用 name 跳转
router.push({ name: 'detail' })

// 使用 path 跳转
router.push('/subPages/detail/index')

// 带参数跳转
router.push({ name: 'detail', query: { id: '123' } })

Notes

• Subpackage directories must be in vite.config.ts the subPackages register in
• The page file name is fixed as index.vue
• Use UnoCSS atomic styles