refactor(pages): 将页面配置从route标签迁移到definePage宏

统一使用definePage宏配置页面样式和类型,移除冗余的route标签
更新vscode代码片段模板以匹配新的配置方式
简化pages.json中的页面配置
This commit is contained in:
feige996
2025-08-28 16:05:25 +08:00
parent 211aef2254
commit dbe3e67dfe
10 changed files with 57 additions and 96 deletions

View File

@@ -19,16 +19,12 @@
"scope": "vue",
"prefix": "v3",
"body": [
"<route lang=\"jsonc\" type=\"page\">",
"{",
" \"layout\": \"default\",",
" \"style\": {",
" \"navigationBarTitleText\": \"$1\"",
" }",
"}",
"</route>\n",
"<script lang=\"ts\" setup>",
"//$2",
"definePage({",
" style: {",
" navigationBarTitleText: '$1',",
" },",
"})",
"</script>\n",
"<template>",
" <view class=\"\">$3</view>",

View File

@@ -1,15 +1,12 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "分包页面"
}
}
</route>
<script lang="ts" setup>
// code here
import RequestComp from './components/request.vue'
definePage({
style: {
navigationBarTitleText: '分包页面',
},
})
</script>
<template>

View File

@@ -58,23 +58,20 @@
{
"path": "pages/about/alova",
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": "Alova 请求演示"
"navigationBarTitleText": "Alova 演示"
}
},
{
"path": "pages/about/vue-query",
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": "Vue Query 请求演示"
"navigationBarTitleText": "Vue Query 演示"
}
},
{
"path": "pages/login/login",
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": "登录"
}
@@ -82,7 +79,6 @@
{
"path": "pages/login/register",
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": "注册"
}
@@ -102,7 +98,6 @@
{
"path": "demo/index",
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": "分包页面"
}

View File

@@ -1,23 +1,14 @@
<route lang="jsonc" type="page">
{
"style": {
"navigationBarTitleText": "关于"
}
}
</route>
<script lang="ts" setup>
import { LOGIN_PAGE } from '@/router/config'
import { tabbarStore } from '@/tabbar/store'
import RequestComp from './components/request.vue'
import VBindCss from './components/VBindCss.vue'
// 奇怪:同样的代码放在 vue 里面不会校验到错误,放在 .ts 文件里面会校验到错误
// const testOxlint = (name: string) => {
// console.log('oxlint')
// }
// testOxlint('oxlint')
console.log('about')
definePage({
style: {
navigationBarTitleText: '关于',
},
})
function toLogin() {
uni.navigateTo({

View File

@@ -1,16 +1,13 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "Alova 请求演示"
}
}
</route>
<script lang="ts" setup>
import { useRequest } from 'alova/client'
import { foo } from '@/api/foo-alova'
definePage({
style: {
navigationBarTitleText: 'Alova 演示',
},
})
const initialData = undefined
const { loading, data, send } = useRequest(foo, {

View File

@@ -1,17 +1,14 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "Vue Query 请求演示"
}
}
</route>
<script lang="ts" setup>
import { useQuery } from '@tanstack/vue-query'
import { foo } from '@/api/foo'
import { getFooQueryOptions } from '@/api/foo-vue-query'
definePage({
style: {
navigationBarTitleText: 'Vue Query 演示',
},
})
// 简单使用
onShow(async () => {
const res = await foo()

View File

@@ -1,14 +1,3 @@
<!-- 使用 type="home" 属性设置首页其他页面不需要设置默认为page -->
<route lang="jsonc" type="home">
{
"style": {
// 'custom' 表示开启自定义导航栏,默认 'default'
"navigationStyle": "custom",
"navigationBarTitleText": "首页"
}
}
</route>
<script lang="ts" setup>
import { LOGIN_PAGE } from '@/router/config'
import { useThemeStore } from '@/store'
@@ -16,6 +5,15 @@ import { useThemeStore } from '@/store'
defineOptions({
name: 'Home',
})
definePage({
// 使用 type: "home" 属性设置首页其他页面不需要设置默认为page
type: 'home',
style: {
// 'custom' 表示开启自定义导航栏,默认 'default'
navigationStyle: 'custom',
navigationBarTitleText: '首页',
},
})
const themeStore = useThemeStore()

View File

@@ -1,12 +1,3 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "登录"
}
}
</route>
<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { tabbarList } from '@/tabbar/config'
@@ -14,6 +5,12 @@ import { isPageTabbar } from '@/tabbar/store'
import { ensureDecodeURIComponent } from '@/utils'
import { parseUrlToObj } from '@/utils/index'
definePage({
style: {
navigationBarTitleText: '登录',
},
})
const redirectUrl = ref('')
onLoad((options) => {
console.log('login options: ', options)

View File

@@ -1,15 +1,12 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "注册"
}
}
</route>
<script lang="ts" setup>
import { LOGIN_PAGE } from '@/router/config'
definePage({
style: {
navigationBarTitleText: '注册',
},
})
function doRegister() {
uni.showToast({
title: '注册成功',

View File

@@ -1,13 +1,3 @@
<route lang="jsonc" type="page">
{
"style": {
// 'custom' 表示开启自定义导航栏,默认 'default'
// "navigationStyle": "custom",
"navigationBarTitleText": "我的"
}
}
</route>
<script lang="ts" setup>
import type { IUploadSuccessInfo } from '@/api/types/login'
import { storeToRefs } from 'pinia'
@@ -16,6 +6,12 @@ import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'
import { useUpload } from '@/utils/uploadFile'
definePage({
style: {
navigationBarTitleText: '我的',
},
})
const userStore = useUserStore()
const tokenStore = useTokenStore()
// 使用storeToRefs解构userInfo