WebApp 项目为大作业的前端代码

下面是共同规范

• 在微信开发者工具中运行预览项目时，要经常清理编译缓存，uni-app 的编译缓存有时会导致配置文件更新不及时或损坏。【清理缓存的按钮为右上角的“刷子”图标】
• json文件正常来说不运行有注释，但是HBuilderX支持查看/运行带注释的json文件
• 文件名，文件夹名一致用小写字母，分割线用 “-”，不用下划线
• 在调用uni.request的时候，需要填写对该 api 的url。【在apifox中，选中所需接口，点击右上角“环境”，选择“正式环境”，同时页面底下选择“调试模式”，即可以看到完整的url】

• HBuilderX
• uni-app 跨端框架
• 微信开发者工具-稳定版
• UI库： uView-plus（main分支已经导入），配置链接见：https://blog.csdn.net/Dark_programmer/article/details/141608108
• 项目vue版本： vue3
• AppID配置： 要想让项目文件在自己的微信开发者工具上成功运行，必须修改manifest.json-->>微信小程序配置-->>AppID，改成自己的AppID,即可成功运行。【AppID需要自行注册】
• 前端各个部分的同学应在cnb中 创建分支，分别在各自的分支中提交代码，最后各分支合并到main上

对于 uni-app 项目，尤其是在编译为微信小程序时，强烈建议使用分包（subPackages）。 使用分包不是一个选择题，而是一个基于性能和限制的最佳实践。

为什么应该要分包？ 分包主要解决了两个核心问题：体积限制 和 加载速度。

1. 突破体积限制（最重要的原因） 微信小程序对代码包的体积有严格的限制：

• 主包体积限制： 整个主包不能超过 2MB。
• 总包体积限制： 所有分包加起来的总体积不能超过 20MB。

如果项目只有几个简单的页面，主包可能不会超限。但是，当引入 uView Plus 这样大型的组件库、增加大量页面、图片和复杂逻辑后，主包很容易超过 2MB 的限制。

2. 提升加载速度和用户体验

• 按需下载： 用户启动小程序时，只会下载和加载主包代码。
• 延迟加载： 只有当用户进入分包内页面时，才会开始下载对应的分包。这样可以显著减少首次启动时间，提升用户体验。

分包约定：

1、主包：pages （1）登录首页 login （2）发现首页 home （3）消息首页 message （4）我的首页 mine

2、分包一：认证和安全流程 auth-flow

3、分包二：发现模块 discover

4、分包三：消息模块 chat

5、分包四：我的&设置模块 mine-config

文件结构大致如下：

/项目根目录 ├── auth-flow/ <-- 【分包一】：认证与安全流程 │ ├── bind-email/
│ │ └── bind-email.vue
│ ├── forget-password/
│ │ └── forget-password.vue │ ├── reset-password/
│ │ └── reset-password.vue │ └── wechat-auth/
│ | └── wechat-auth.vue
│ └─.... | ├── chat/ <-- 【分包三】：消息模块子页 │ ├── detail/
│ │ └── detail.vue
│ └── group-info/
│ | └── group-info.vue
│ └─.... | ├── discover/ <-- 【分包二】：发现模块子页 │ ├── search/
│ │ └── search.vue
│ └── detail/ │ | └── detail.vue
│ └─.... | ├── mine-config/ <-- 【分包四】：我的/设置子页 │ ├── edit-profile/
│ │ └── edit-profile.vue │ |── setting/
│ | └── setting.vue
│ └─.... | ├── pages/ <-- 【主包】：启动页和 TabBar 页面 │ ├── login/
│ │ └── login.vue
│ ├── home/
│ │ └── home.vue
│ ├── message/
│ │ └── message.vue
│ └── mine/
│ └── mine.vue
│ ├── static/ <-- 静态资源（图片、公共样式等） ├── uni_modules/ <-- uView Plus 等模块 └── ... (其他配置文件，如 pages.json, manifest.json 等)

pages.json代码框架大致如下：

{"easycom": {
    "autoscan": true,
    "custom": {
        // uView Plus 组件库的配置
        "^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
        "^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
        "^u-([^-].*)" : "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
    }
},

"pages": [
    /* ------------------ 1. 主包 (Main Package) ------------------ */
    
    // A. 启动页：Login 页面
    {
        "path": "pages/login/login",
        "style": {
            "navigationBarTitleText": "登录",
            "navigationStyle": "custom" // 登录页使用自定义导航栏，以匹配原型图
        }
    },
    
    // B. TabBar 页面：必须全部在主包中
    {
        "path": "pages/home/home",
        "style": {
            "navigationBarTitleText": "发现"
        }
    },
    {
        "path": "pages/message/message",
        "style": {
            "navigationBarTitleText": "消息"
        }
    },
    {
        "path": "pages/mine/mine",
        "style": {
            "navigationBarTitleText": "我的"
        }
    }
],

/* ------------------ 2. 分包 (Subpackages) ------------------ */
"subPackages": [
    // 分包一：认证与安全流程 (Root: auth-flow)
    {
        "root": "auth-flow", 
        "pages": [
            {
                "path": "wechat-auth/wechat-auth",
                "style": { "navigationBarTitleText": "微信授权" }
            },
            {
                "path": "forget-password/forget-password",
                "style": { "navigationBarTitleText": "邮箱验证" }
            },
            {
                "path": "reset-password/reset-password",
                "style": { "navigationBarTitleText": "重置密码" }
            },
            {
                "path": "bind-email/bind-email",
                "style": { "navigationBarTitleText": "绑定邮箱" }
            }
        ]
    },
    
    // 分包二：发现模块的子页面 (Root: discover)
    {
        "root": "discover", 
        "pages": [
            { "path": "search/search", "style": { "navigationBarTitleText": "搜索" } }
            // 请在此处添加所有发现页面的子页面，例如 activity-detail/activity-detail
        ]
    },
    
    // 分包三：消息模块的子页面 (Root: chat)
    {
        "root": "chat", 
        "pages": [
            { "path": "detail/detail", "style": { "navigationBarTitleText": "聊天详情" } }
            // 请在此处添加所有消息页面的子页面，例如 notification-list/notification-list
        ]
    },
    
    // 分包四：我的/设置相关的子页面 (Root: mine-config)
    {
        "root": "mine-config",
        "pages": [
            {
                "path": "edit-profile/edit-profile",
                "style": { "navigationBarTitleText": "编辑资料" }
            },
            {
                "path": "setting/setting",
                "style": { "navigationBarTitleText": "设置" }
            }
            // 请在此处添加所有从“我的”进入的设置类子页面
        ]
    }
],

/* ------------------ 3. 全局样式 (Global Style) ------------------ */
"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "uni-app",
	"navigationBarBackgroundColor": "#F8F8F8",
	"backgroundColor": "#F8F8F8",
	"app-plus": {
		"background": "#efeff4"
	}
},

/* ------------------ 4. 底部 TabBar 配置 ------------------ */
"tabBar": {
    "color": "#999999",
    "selectedColor": "#007AFF", // 假设选中颜色为蓝色
	"list":[
		{
			"pagePath": "pages/home/home",
			"text": "发现"
            // 建议：添加 "iconPath" 和 "selectedIconPath"
		},
		{
			"pagePath": "pages/message/message",
			"text": "消息"
		},
		{
			"pagePath": "pages/mine/mine",
			"text": "我的"
		}
	]
}
}