Explorar el Código

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

统一使用definePage宏配置页面样式和类型,移除冗余的route标签
更新vscode代码片段模板以匹配新的配置方式
简化pages.json中的页面配置
feige996 hace 8 meses
padre
commit
dbe3e67dfe

+ 5 - 9
.vscode/vue3.code-snippets

@@ -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>",

+ 6 - 9
src/pages-sub/demo/index.vue

@@ -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>

+ 2 - 7
src/pages.json

@@ -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": "分包页面"
           }

+ 5 - 14
src/pages/about/about.vue

@@ -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({

+ 6 - 9
src/pages/about/alova.vue

@@ -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, {

+ 6 - 9
src/pages/about/vue-query.vue

@@ -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()

+ 9 - 11
src/pages/index/index.vue

@@ -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()
 

+ 6 - 9
src/pages/login/login.vue

@@ -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)

+ 6 - 9
src/pages/login/register.vue

@@ -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: '注册成功',

+ 6 - 10
src/pages/me/me.vue

@@ -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