wip: pages

src/App.vue

@@ -2,10 +2,13 @@
   import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
   import { useAuthStore } from '@/state/modules/auth';
   import { setupInterceptors } from '@/utils/interceptors';
+  import { useAppStore } from '@/state/modules/app';
 
   onLaunch(() => {
     console.log('App Launch');
     setupInterceptors();
+    const appStore = useAppStore();
+    appStore.initialize();
   });
   onShow(() => {
     const authStore = useAuthStore();

src/components/AppProvider/inedx.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup name="AppProvider">
+  import { useAppStore } from '@/state/modules/app';
+
+  const appStore = useAppStore();
+  console.log('getPages', appStore.getPages);
+  // eslint-disable-next-line no-undef
+  let currentPages = getCurrentPages();
+  console.log('currentPages', currentPages);
+</script>
+<template>
+  <view>
+    <slot></slot>
+  </view>
+</template>
+<style scoped></style>

src/manifest.json

@@ -18,6 +18,9 @@
         },
         /* 模块配置 */
         "modules" : {},
+        "optimization": {
+            "subPackages": true
+        },
         /* 应用发布信息 */
         "distribute" : {
             /* android打包配置 */
@@ -58,10 +61,16 @@
             "minified" : true
         },
         "usingComponents" : true,
-        "permission" : {}
+        "permission" : {},
+        "optimization": {
+            "subPackages": true
+        }
     },
     "mp-alipay" : {
-        "usingComponents" : true
+        "usingComponents" : true,
+        "optimization": {
+            "subPackages": true
+        }
     },
     "mp-baidu" : {
         "usingComponents" : true
@@ -81,6 +90,6 @@
         "devServer" : {
             "https" : false
         },
-        "title" : "uni-preset-vue3"
+        "title" : "uniapp_vue3_vite_ts"
     }
 }

src/pages.json

@@ -5,6 +5,9 @@
       "path": "pages/index/index",
       "style": {
         "navigationBarTitleText": "首页"
+      },
+      "meta": {
+        "ignoreAuth": true
       }
     },
     {
@@ -38,6 +41,28 @@
       }
     }
   ],
+  "subPackages": [{
+    "root": "pagesA",
+    "pages": [{
+      "path": "list/test1/index",
+      "style": {
+        "navigationBarTitleText": "test1"
+      }
+    },{
+      "path": "list/test2/index",
+      "style": {
+        "navigationBarTitleText": "test2"
+      }
+    }]
+  }, {
+    "root": "pagesB",
+    "pages": [{
+      "path": "detail/index",
+      "style": {
+        "navigationBarTitleText": "Detail"
+      }
+    }]
+  }],
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",

src/pages/about/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
   import BasicButton from '@/components/BasicButton/index.vue';
+  import AppProvider from '@/components/AppProvider/inedx.vue';
   import { router } from '@/utils/router';
   import { useAuthStore } from '@/state/modules/auth';
   import { ref } from 'vue';
@@ -22,19 +23,25 @@
 </script>
 
 <template>
-  <view class="container">
+  <AppProvider>
-    <view class="head-wrap">
+    <view class="container">
-      <view class="avatar">
+      <view class="head-wrap">
-        <image class="img" src="/static/images/avatar.png" />
+        <view class="avatar">
+          <image class="img" src="/static/images/avatar.png" />
+        </view>
+        <view class="desc">{{ isLogin ? '测试' : '未登入' }}</view>
       </view>
-      <view class="desc">{{ isLogin ? '测试' : '未登入' }}</view>
+      <view class="cell"
+        ><BasicButton @click="handleJump('/pages/log/index')">log</BasicButton></view
+      >
+      <view class="cell" v-if="isLogin"
+        ><BasicButton @click="handleLoginOut">登出</BasicButton></view
+      >
+      <view class="cell" v-else
+        ><BasicButton @click="handleJump('/pages/login/index')">登入</BasicButton></view
+      >
     </view>
-    <view class="cell"><BasicButton @click="handleJump('/pages/log/index')">log</BasicButton></view>
+  </AppProvider>
-    <view class="cell" v-if="isLogin"><BasicButton @click="handleLoginOut">登出</BasicButton></view>
-    <view class="cell" v-else
-      ><BasicButton @click="handleJump('/pages/login/index')">登入</BasicButton></view
-    >
-  </view>
 </template>
 
 <style lang="scss" scoped>

src/pages/demo/index.vue

@@ -1,11 +1,15 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import AppProvider from '@/components/AppProvider/inedx.vue';
+</script>
 
 <template>
-  <view class="container"> 页面构建中...54264536 </view>
+  <AppProvider>
-  <view class="flex-row">
+    <view class="container"> 页面构建中...54264536 </view>
-    <view>item1</view>
+    <view class="flex-row">
-    <view>item2</view>
+      <view>item1</view>
-  </view>
+      <view>item2</view>
+    </view>
+  </AppProvider>
 </template>
 
 <style lang="scss" scoped>

src/pages/index/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import BasicButton from '@/components/BasicButton/index.vue';
+  import AppProvider from '@/components/AppProvider/inedx.vue';
   import { ref } from 'vue';
   import { router } from '@/utils/router';
   const title = ref('uni-app vue3 ts --Vite');
@@ -8,13 +9,15 @@
   };
 </script>
 <template>
-  <view class="content">
+  <AppProvider>
-    <image class="logo" src="/static/svg/LOGO.svg" />
+    <view class="content">
-    <view class="text-area">
+      <image class="logo" src="/static/svg/LOGO.svg" />
-      <text class="">{{ title }}</text>
+      <view class="text-area">
+        <text class="">{{ title }}</text>
+      </view>
+      <BasicButton @click="handleGetStarted">Get Started → </BasicButton>
     </view>
-    <BasicButton @click="handleGetStarted">Get Started → </BasicButton>
+  </AppProvider>
-  </view>
 </template>
 <style lang="scss">
   .content {

src/pagesA/list/test1/index.vue

@@ -0,0 +1,3 @@
+<script lang="ts" setup></script>
+<template> Test1 </template>
+<style scoped></style>

src/pagesA/list/test2/index.vue

@@ -0,0 +1,3 @@
+<script lang="ts" setup></script>
+<template> Test2 </template>
+<style scoped></style>

src/pagesB/detail/index.vue

@@ -0,0 +1,3 @@
+<script lang="ts" setup></script>
+<template> Detail </template>
+<style scoped></style>

src/state/modules/app.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia';
+import { Pages } from '@/types/pages';
+import { pagesMap } from '@/utils/router/pages';
+
+interface AppStore {
+  pages: Map<string, Pages> | undefined;
+  currentPage: Pages | undefined;
+}
+
+export const useAppStore = defineStore({
+  id: 'app',
+  state: (): AppStore => ({
+    pages: undefined,
+    currentPage: undefined,
+  }),
+  getters: {
+    getPages(state) {
+      return state.pages;
+    },
+    getCurrentPage(state) {
+      return state.currentPage;
+    },
+  },
+  actions: {
+    initialize() {
+      this.setPages();
+    },
+    setPages() {
+      this.pages = pagesMap;
+    },
+    setCurrentPage(path: string) {
+      this.currentPage = this.pages?.get(path);
+    },
+  },
+});

src/types/pages.d.ts

@@ -0,0 +1,15 @@
+export interface Pages extends Record<string, any> {
+  path: string;
+  meta?: {
+    ignoreAuth?: boolean;
+  };
+  style: {
+    navigationBarTitleText: string;
+    [key: string]: string;
+  };
+}
+
+export interface SubPackages {
+  root: string;
+  pages: Pages[];
+}

src/utils/router/pages.ts

@@ -0,0 +1,23 @@
+import pagesJson from '@/pages.json';
+import { Pages } from '@/types/pages';
+
+const { pages, subPackages } = pagesJson;
+
+// 将pages.json转换成Map对象,path为key
+const pagesMap = new Map<string, Pages>();
+
+pages.forEach((page) => {
+  pagesMap.set(page.path, page as Pages);
+});
+
+if (Array.isArray(subPackages) && subPackages.length) {
+  subPackages.forEach((el) => {
+    const rootPath = el.root;
+    el.pages.forEach((page) => {
+      page.path = rootPath + '/' + page.path;
+      pagesMap.set(page.path, page as Pages);
+    });
+  });
+}
+
+export { pagesMap };