87 lines
3.8 KiB
Markdown
87 lines
3.8 KiB
Markdown
|
---
|
|||
|
|
name: jjb-app-entry
|
|||
|
|
description: 定义 JJB 应用首页（Entry）规范。涉及 Entry 页面、应用首页菜单列表、CloudComponent 云组件、contextInject.appKey 配置时使用。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 项目页面结构
|
|||
|
|
|
|||
|
|
## 应用首页（Entry）
|
|||
|
|
|
|||
|
|
### 概述
|
|||
|
|
|
|||
|
|
Entry 是每个微应用内置的一个**固定路由页面**，相当于应用的"关于页面"。除 base 底座应用外，每一个微应用都内置了这个路由。底座通过这个固定路由打开应用首页，用户可以清晰地了解应用的基本信息、可用菜单、应用更新日志等内容。
|
|||
|
|
|
|||
|
|
- **文件路径**：`src/pages/Container/Entry/index.js`
|
|||
|
|
- **路由访问**：底座访问该固定路由时，渲染云组件，展示应用相关信息
|
|||
|
|
|
|||
|
|
### 页面代码
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
import { CloudComponent } from '@cqsjjb/jjb-cloud-component';
|
|||
|
|
|
|||
|
|
export default class Entry extends React.Component {
|
|||
|
|
render() {
|
|||
|
|
return (
|
|||
|
|
process.env.app.appKey && (
|
|||
|
|
<CloudComponent
|
|||
|
|
from="https://cdn.cqjjb.cn/jcloud/use/plugin/b31c9840a57f11ef91cf7f3cabbb7484/latest"
|
|||
|
|
componentKey="appInterceptor"
|
|||
|
|
componentProps={{
|
|||
|
|
appKey: process.env.app.appKey
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 创建/检查流程
|
|||
|
|
|
|||
|
|
当需要为新应用创建 Entry 页面，或检查已有应用首页是否就绪时，按以下步骤执行：
|
|||
|
|
|
|||
|
|
1. **检查 Entry 文件**：确认 `src/pages/Container/Entry/index.js` 是否存在
|
|||
|
|
2. **创建页面文件**：若不存在，使用上方「页面代码」中的标准代码创建该文件
|
|||
|
|
3. **检查 appKey 配置**：打开 `jjb.config.js`，确认 `contextInject.appKey` 是否已配置
|
|||
|
|
4. **补全 appKey**：若未配置，提示开发者联系平台管理员获取 `appKey`，然后补全到 `contextInject` 中
|
|||
|
|
5. **告知风险**：若 `appKey` 缺失或不正确，应用首页将无法展示信息并显示错误警告，务必在开发阶段解决
|
|||
|
|
|
|||
|
|
### 核心机制
|
|||
|
|
|
|||
|
|
- **云组件加载**：通过 `@cqsjjb/jjb-cloud-component` 的 `CloudComponent` 组件，从 CDN 远程加载 `appInterceptor` 云组件
|
|||
|
|
- **数据获取**：云组件内部通过接口查询应用的基本信息、注册菜单列表、更新日志等数据
|
|||
|
|
- **菜单可用性控制**：可在应用中心关闭应用的某个菜单，被禁用的菜单会显示"应用菜单已被禁用"的提示
|
|||
|
|
|
|||
|
|
### 关键配置：`process.env.app.appKey`
|
|||
|
|
|
|||
|
|
`process.env.app.appKey` 是云组件查询接口的**关键参数**，直接影响页面能否正常展示：
|
|||
|
|
|
|||
|
|
- **来源**：`appKey` 是应用在平台注册时生成的唯一 key，配置在 `jjb.config.js` 的 `contextInject` 中，构建时注入到 `process.env.app.appKey`。若不知道 `appKey`，请联系平台管理员获取
|
|||
|
|
- **作用**：作为云组件内部接口的查询参数，用于获取应用的基本信息、可用菜单、应用更新日志等
|
|||
|
|
- **风险**：
|
|||
|
|
- 如果 `appKey` 为空或未配置，云组件内部接口无法查出应用数据，页面会显示**错误警告**
|
|||
|
|
- 如果 `appKey` 不正确（与后端注册不一致），同样会导致接口查询失败
|
|||
|
|
|
|||
|
|
#### 检查清单
|
|||
|
|
|
|||
|
|
在开发或代码审查时，务必确认以下事项：
|
|||
|
|
|
|||
|
|
1. 检查 `jjb.config.js` 中是否配置了 `contextInject.appKey`
|
|||
|
|
2. 确认 `appKey` 的值与后端应用中心注册的 key 一致
|
|||
|
|
3. 如果发现未配置，提示开发者补全 `contextInject.appKey`，并告知上述风险
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// jjb.config.js 示例
|
|||
|
|
module.exports = {
|
|||
|
|
contextInject: {
|
|||
|
|
appKey: 'your-app-key' // 必填：与后端应用中心注册的 key 保持一致
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 约束
|
|||
|
|
|
|||
|
|
- **非必要禁止修改**：Entry 目录下的代码为标准实现，非必要情况下禁止修改此目录
|
|||
|
|
- **appKey 必填**：每个微应用的 `jjb.config.js` 中必须配置 `contextInject.appKey`，否则应用首页无法正常工作
|