feat:架构代码优化
This commit is contained in:
R524809
@@ -0,0 +1,201 @@
|
||||
# 页面 Mixin 重构说明
|
||||
|
||||
## 重构目标
|
||||
|
||||
将 `mathPageMixin.ts` 改造为通用的页面基类，支持数学学习、专注力等多个模块共用。
|
||||
|
||||
## 改造内容
|
||||
|
||||
### 1. 创建通用基类
|
||||
|
||||
**文件：** `base/pageMixin.ts`
|
||||
|
||||
- 提供了通用的页面公共方法
|
||||
- 抽象了 `initPageInfo` 方法，支持两种调用方式：
|
||||
1. `initPageInfo(functionId, defaultTitle)` - 可以配合 `pageInfoLookup` 函数使用
|
||||
2. `initPageInfo({ title, desc, functionId })` - 直接提供页面信息
|
||||
- 支持通过配置传入模块特定的信息查找函数和分享配置
|
||||
|
||||
### 2. 重构数学模块 Mixin
|
||||
|
||||
**文件：** `mathPages/common/mathPageMixin.ts`
|
||||
|
||||
- 基于通用 `pageMixin` 创建数学模块的包装器
|
||||
- 自动配置 `MATH_FUNCTION_TYPES` 查找函数
|
||||
- 配置数学模块的分享信息
|
||||
- **保持完全向后兼容**，所有现有的数学页面无需修改
|
||||
|
||||
### 3. 创建专注力模块示例
|
||||
|
||||
**文件：** `focusPages/common/focusPageMixin.ts`
|
||||
|
||||
- 展示如何为专注力模块创建专用的 mixin
|
||||
- 可以配置 `FOCUS_FUNCTION_TYPES` 查找函数
|
||||
- 配置专注力模块的分享信息
|
||||
|
||||
## 关键改进
|
||||
|
||||
### initPageInfo 方法优化
|
||||
|
||||
**之前：**
|
||||
|
||||
```typescript
|
||||
initPageInfo(functionId: string, defaultTitle?: string) {
|
||||
const functionItem = MATH_FUNCTION_TYPES.find(...); // 硬编码
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
**现在：**
|
||||
|
||||
```typescript
|
||||
// 方式1：配合 pageInfoLookup 使用（数学模块自动配置）
|
||||
initPageInfo(functionId: string, defaultTitle?: string)
|
||||
|
||||
// 方式2：直接提供信息（专注力等模块可以使用）
|
||||
initPageInfo({ title: string, desc?: string, functionId: string })
|
||||
```
|
||||
|
||||
### 配置化的页面信息查找
|
||||
|
||||
通过 `PageCommonMethodsConfig` 可以传入：
|
||||
|
||||
- `shareConfig`: 模块特定的分享配置
|
||||
- `pageInfoLookup`: 页面信息查找函数（可选）
|
||||
|
||||
这样不同模块可以使用不同的查找逻辑，而不需要硬编码。
|
||||
|
||||
## 使用方式
|
||||
|
||||
### 数学模块（无需修改）
|
||||
|
||||
所有现有的数学页面继续使用原有方式：
|
||||
|
||||
```typescript
|
||||
import { createMathPage, CanvasDataState } from '../common/mathPageMixin';
|
||||
|
||||
createMathPage({
|
||||
// ...
|
||||
onLoad(options: { id?: string }) {
|
||||
const functionId = options.id || 'addition-5';
|
||||
// 自动从 MATH_FUNCTION_TYPES 中查找
|
||||
this.initPageInfo(functionId, '默认标题');
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 专注力模块（新）
|
||||
|
||||
```typescript
|
||||
import { createFocusPage } from '../common/focusPageMixin';
|
||||
|
||||
createFocusPage({
|
||||
// ...
|
||||
onLoad(options: { id?: string }) {
|
||||
const functionId = options.id || 'grid-drawing';
|
||||
// 自动从 FOCUS_FUNCTION_TYPES 中查找
|
||||
this.initPageInfo(functionId, '格子仿画');
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 其他模块（通用方式）
|
||||
|
||||
```typescript
|
||||
import { createPage, PageCommonMethodsConfig } from '../../base/pageMixin';
|
||||
|
||||
const myConfig: PageCommonMethodsConfig = {
|
||||
shareConfig: {
|
||||
title: '我的模块',
|
||||
imageUrl: 'https://example.com/share.png',
|
||||
},
|
||||
pageInfoLookup: (functionId) => {
|
||||
// 自定义查找逻辑
|
||||
return { title: '...', desc: '...' };
|
||||
},
|
||||
};
|
||||
|
||||
createPage(
|
||||
{
|
||||
// ...
|
||||
onLoad(options: { id?: string }) {
|
||||
// 方式1：使用 lookup 函数
|
||||
this.initPageInfo(options.id || 'default', '默认标题');
|
||||
|
||||
// 方式2：直接提供信息
|
||||
this.initPageInfo({
|
||||
functionId: options.id || 'default',
|
||||
title: '页面标题',
|
||||
desc: '页面描述',
|
||||
});
|
||||
},
|
||||
},
|
||||
myConfig,
|
||||
);
|
||||
```
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
miniprogram/
|
||||
├── base/
|
||||
│ ├── pageMixin.ts # 通用页面基类（新增）
|
||||
│ └── pageMixin.README.md # 使用文档（新增）
|
||||
│
|
||||
├── mathPages/
|
||||
│ └── common/
|
||||
│ └── mathPageMixin.ts # 数学模块包装器（重构）
|
||||
│
|
||||
└── focusPages/
|
||||
└── common/
|
||||
└── focusPageMixin.ts # 专注力模块示例（新增）
|
||||
```
|
||||
|
||||
## 向后兼容性
|
||||
|
||||
✅ **所有现有的数学页面无需修改**
|
||||
|
||||
因为：
|
||||
|
||||
- `mathPageMixin.ts` 保持了相同的导出接口
|
||||
- `createMathPage` 函数签名不变
|
||||
- `initPageInfo` 方法调用方式不变
|
||||
- 所有类型定义都重新导出
|
||||
|
||||
## 受影响的文件
|
||||
|
||||
### 无需修改的文件
|
||||
|
||||
以下数学页面文件无需修改，因为它们使用相同的接口：
|
||||
|
||||
- `mathPages/addition/addition.ts`
|
||||
- `mathPages/compare/compare.ts`
|
||||
- `mathPages/countMatch/countMatch.ts`
|
||||
- `mathPages/countingSelect/countingSelect.ts`
|
||||
- `mathPages/missingNumber/missingNumber.ts`
|
||||
- `mathPages/numberDecompose/numberDecompose.ts`
|
||||
- `mathPages/numberFind/numberFind.ts`
|
||||
|
||||
### 修改的文件
|
||||
|
||||
- ✅ `base/pageMixin.ts` - 新增
|
||||
- ✅ `mathPages/common/mathPageMixin.ts` - 重构（保持向后兼容）
|
||||
|
||||
## 测试建议
|
||||
|
||||
1. 验证所有数学页面功能正常
|
||||
2. 验证页面信息（title, desc）正确显示
|
||||
3. 验证分享功能正常
|
||||
4. 验证 Canvas 初始化正常
|
||||
5. 验证图片导出功能正常
|
||||
|
||||
## 后续扩展
|
||||
|
||||
其他模块（如专注力模块）可以：
|
||||
|
||||
1. 创建自己的 `XXXPageMixin.ts` 文件
|
||||
2. 定义自己的函数类型和列表
|
||||
3. 配置自己的分享信息
|
||||
4. 使用 `createXXXPage` 创建页面
|
||||
|
||||
这样可以保持代码的模块化和可维护性。
|
||||
@@ -0,0 +1,229 @@
|
||||
# 通用页面基类 (pageMixin)
|
||||
|
||||
## 概述
|
||||
|
||||
`pageMixin.ts` 提供了一个通用的页面基类，可以被不同模块（数学学习、专注力等）共用。它抽象了 Canvas 绘制页面的通用功能。
|
||||
|
||||
## 核心功能
|
||||
|
||||
- Canvas 初始化和配置
|
||||
- 分享功能（小程序分享、朋友圈分享）
|
||||
- 图片导出和打印
|
||||
- 页面信息初始化
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 基础用法（不依赖特定的页面信息查找）
|
||||
|
||||
```typescript
|
||||
import { createPage } from '../../base/pageMixin';
|
||||
|
||||
createPage({
|
||||
canvas: null as Canvas | null,
|
||||
ctx: null as RenderingContext | null,
|
||||
// ... 其他属性
|
||||
|
||||
data: {
|
||||
pageTitle: '页面标题',
|
||||
functionId: 'my-function-id',
|
||||
// ... 其他数据
|
||||
},
|
||||
|
||||
onLoad(options: { id?: string }) {
|
||||
const functionId = options.id || 'my-function-id';
|
||||
|
||||
// 方式1：直接提供页面信息
|
||||
this.initPageInfo({
|
||||
functionId,
|
||||
title: '页面标题',
|
||||
desc: '页面描述',
|
||||
});
|
||||
|
||||
// 或者方式2：使用默认标题（需要传入 defaultTitle）
|
||||
this.initPageInfo(functionId, '默认标题');
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 2. 自定义页面信息查找函数
|
||||
|
||||
如果你有多个页面需要共享同一个查找逻辑，可以创建自己的 mixin：
|
||||
|
||||
```typescript
|
||||
import { createPage, PageCommonMethodsConfig } from '../../base/pageMixin';
|
||||
|
||||
// 定义自己的页面信息查找函数
|
||||
function myPageInfoLookup(functionId: string) {
|
||||
// 从你的常量或配置中查找
|
||||
const pageInfo = MY_FUNCTION_TYPES.find((item) => item.id === functionId);
|
||||
if (pageInfo) {
|
||||
return {
|
||||
title: pageInfo.title,
|
||||
desc: pageInfo.desc,
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// 使用配置创建页面
|
||||
const config: PageCommonMethodsConfig = {
|
||||
shareConfig: {
|
||||
title: '我的模块',
|
||||
imageUrl: 'https://example.com/share.png',
|
||||
},
|
||||
pageInfoLookup: myPageInfoLookup,
|
||||
};
|
||||
|
||||
createPage(
|
||||
{
|
||||
// ... 页面配置
|
||||
onLoad(options: { id?: string }) {
|
||||
const functionId = options.id || 'default-id';
|
||||
// 现在可以使用简化的调用方式
|
||||
this.initPageInfo(functionId, '默认标题');
|
||||
// 如果有 pageInfoLookup，会自动查找并设置 title 和 desc
|
||||
},
|
||||
},
|
||||
config,
|
||||
);
|
||||
```
|
||||
|
||||
### 3. 数学模块的用法（向后兼容）
|
||||
|
||||
数学模块已经封装好了专用的 `mathPageMixin.ts`，可以直接使用：
|
||||
|
||||
```typescript
|
||||
import { createMathPage, CanvasDataState } from '../common/mathPageMixin';
|
||||
|
||||
createMathPage({
|
||||
// ... 页面配置
|
||||
onLoad(options: { id?: string }) {
|
||||
const functionId = options.id || 'addition-5';
|
||||
// 自动从 MATH_FUNCTION_TYPES 中查找
|
||||
this.initPageInfo(functionId, '默认标题');
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## API 说明
|
||||
|
||||
### createPage(pageOptions, config?)
|
||||
|
||||
创建并注册一个页面。
|
||||
|
||||
**参数：**
|
||||
|
||||
- `pageOptions`: 页面配置对象
|
||||
- `config`: 可选，公共方法配置（见 `PageCommonMethodsConfig`）
|
||||
|
||||
### initPageInfo(functionIdOrOptions, defaultTitle?)
|
||||
|
||||
初始化页面信息，支持两种调用方式：
|
||||
|
||||
**方式1：**
|
||||
|
||||
```typescript
|
||||
this.initPageInfo(functionId: string, defaultTitle?: string)
|
||||
```
|
||||
|
||||
- 如果有配置 `pageInfoLookup`，会尝试查找
|
||||
- 否则使用 `defaultTitle`
|
||||
|
||||
**方式2：**
|
||||
|
||||
```typescript
|
||||
this.initPageInfo({ title: string, desc?: string, functionId: string })
|
||||
```
|
||||
|
||||
- 直接提供页面信息，忽略 `pageInfoLookup`
|
||||
|
||||
### initCanvas(options)
|
||||
|
||||
初始化 Canvas。
|
||||
|
||||
**参数：**
|
||||
|
||||
- `options.createDrawService`: 创建绘制服务的工厂函数
|
||||
- `options.drawServiceOptions`: 绘制服务的选项
|
||||
- `options.onCanvasReady`: Canvas 初始化完成后的回调
|
||||
|
||||
### exportToPrint()
|
||||
|
||||
导出并保存图片（用于打印）。
|
||||
|
||||
### getShareOptions()
|
||||
|
||||
获取分享配置。
|
||||
|
||||
### onShareAppMessage()
|
||||
|
||||
微信小程序分享处理函数。
|
||||
|
||||
### onShareTimeline()
|
||||
|
||||
微信朋友圈分享处理函数。
|
||||
|
||||
## 专注力模块使用示例
|
||||
|
||||
```typescript
|
||||
import { createPage, PageCommonMethodsConfig } from '../../base/pageMixin';
|
||||
|
||||
// 专注力模块的函数类型定义
|
||||
interface FocusFunctionType {
|
||||
id: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
// 专注力模块的函数列表
|
||||
const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
|
||||
{
|
||||
id: 'grid-drawing',
|
||||
title: '格子仿画',
|
||||
desc: '在格子中绘制颜色',
|
||||
},
|
||||
// ... 更多
|
||||
];
|
||||
|
||||
// 专注力模块的页面信息查找函数
|
||||
function focusPageInfoLookup(functionId: string) {
|
||||
const functionItem = FOCUS_FUNCTION_TYPES.find(
|
||||
(item) => item.id === functionId,
|
||||
);
|
||||
if (functionItem) {
|
||||
return {
|
||||
title: functionItem.title,
|
||||
desc: functionItem.desc,
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// 专注力模块的配置
|
||||
const focusConfig: PageCommonMethodsConfig = {
|
||||
shareConfig: {
|
||||
title: '涂鸦丫-专注力训练',
|
||||
imageUrl: 'https://cdn.joeyone.cn/doodle/share-img/focus-share.png',
|
||||
},
|
||||
pageInfoLookup: focusPageInfoLookup,
|
||||
};
|
||||
|
||||
// 创建专注力页面
|
||||
createPage(
|
||||
{
|
||||
canvas: null as Canvas | null,
|
||||
// ... 其他配置
|
||||
|
||||
onLoad(options: { id?: string }) {
|
||||
const functionId = options.id || 'grid-drawing';
|
||||
// 自动从 FOCUS_FUNCTION_TYPES 中查找
|
||||
this.initPageInfo(functionId, '格子仿画');
|
||||
},
|
||||
},
|
||||
focusConfig,
|
||||
);
|
||||
```
|
||||
|
||||
## 向后兼容性
|
||||
|
||||
所有现有的数学页面无需修改，因为 `mathPageMixin.ts` 保持了相同的接口。
|
||||
@@ -0,0 +1,338 @@
|
||||
import { PAPER_SIZE } from '../constants/colors';
|
||||
import { checkAndSaveImage } from '../utils/saveImage';
|
||||
import { shouldShowShareGuide } from '../utils/shareGuide';
|
||||
import { BaseDrawService } from '../service/baseDraw';
|
||||
import tracker from '../utils/tracker';
|
||||
|
||||
/**
|
||||
* Canvas 相关的页面实例属性
|
||||
*/
|
||||
export interface PageCanvasInstance {
|
||||
data: CanvasDataState;
|
||||
canvas: Canvas | null;
|
||||
ctx: RenderingContext | null;
|
||||
boxHeight: number;
|
||||
boxWidth: number;
|
||||
drawService: BaseDrawService | null;
|
||||
setData(data: any, callback?: () => void): void;
|
||||
route: string;
|
||||
getShareOptions(): ShareOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Canvas 数据状态接口
|
||||
*/
|
||||
export interface CanvasDataState {
|
||||
hasContent: boolean;
|
||||
showShareDialog: boolean;
|
||||
boxWidth: number;
|
||||
boxHeight: number;
|
||||
functionId: string;
|
||||
currentMode?: string;
|
||||
pageTitle: string;
|
||||
subTitle?: string;
|
||||
data: any;
|
||||
setData(data: any, callback?: () => void): void;
|
||||
route: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Canvas 初始化选项
|
||||
*/
|
||||
export interface InitCanvasOptions {
|
||||
/**
|
||||
* 创建绘制服务的工厂函数
|
||||
*/
|
||||
createDrawService: (
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
options?: Record<string, any>,
|
||||
) => BaseDrawService;
|
||||
/**
|
||||
* 绘制服务的选项
|
||||
*/
|
||||
drawServiceOptions?: Record<string, any>;
|
||||
/**
|
||||
* Canvas 初始化完成后回调
|
||||
*/
|
||||
onCanvasReady?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 分享配置选项
|
||||
*/
|
||||
export interface ShareOptions {
|
||||
/**
|
||||
* 页面路径（相对于 mathPages 目录，例如：'missingNumber/missingNumber'）
|
||||
*/
|
||||
path: string;
|
||||
title: string;
|
||||
imageUrl: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面信息接口
|
||||
*/
|
||||
export interface PageInfo {
|
||||
title: string;
|
||||
desc?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面信息查找函数类型
|
||||
*/
|
||||
export type PageInfoLookup = (functionId: string) => PageInfo | undefined;
|
||||
|
||||
/**
|
||||
* 页面公共方法配置
|
||||
*/
|
||||
export interface PageCommonMethodsConfig {
|
||||
/**
|
||||
* 分享配置
|
||||
*/
|
||||
shareConfig?: {
|
||||
title: string;
|
||||
imageUrl: string;
|
||||
};
|
||||
/**
|
||||
* 页面信息查找函数（可选）
|
||||
* 如果提供，initPageInfo 方法会使用它来查找页面信息
|
||||
*/
|
||||
pageInfoLookup?: PageInfoLookup;
|
||||
}
|
||||
|
||||
const defaultShareConfig = {
|
||||
title: '涂鸦丫',
|
||||
imageUrl: 'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取页面公共方法
|
||||
* 这些方法可以在所有Canvas绘制页面中复用
|
||||
* @param config 配置选项
|
||||
*/
|
||||
export function getPageCommonMethods(config: PageCommonMethodsConfig = {}) {
|
||||
const { shareConfig = defaultShareConfig, pageInfoLookup } = config;
|
||||
|
||||
return {
|
||||
/**
|
||||
* 初始化 Canvas
|
||||
*/
|
||||
initCanvas(this: PageCanvasInstance, options: InitCanvasOptions) {
|
||||
const query = wx.createSelectorQuery();
|
||||
query
|
||||
.select('#canvasWrapper')
|
||||
.boundingClientRect((rect) => {
|
||||
if (!rect) return;
|
||||
|
||||
const { width, height } = PAPER_SIZE['A4'];
|
||||
const boxWidth = rect.width;
|
||||
const boxHeight = boxWidth / (width / height);
|
||||
|
||||
this.boxHeight = boxHeight;
|
||||
this.boxWidth = boxWidth;
|
||||
|
||||
this.setData({ boxWidth, boxHeight });
|
||||
|
||||
const canvas = wx
|
||||
.createSelectorQuery()
|
||||
.select('#canvasContent');
|
||||
canvas.fields({ node: true, size: true }).exec((res) => {
|
||||
if (res[0]) {
|
||||
const canvasNode = res[0].node;
|
||||
const ctx = canvasNode.getContext('2d');
|
||||
const dpr = wx.getSystemInfoSync().pixelRatio;
|
||||
|
||||
canvasNode.width = boxWidth * dpr;
|
||||
canvasNode.height = boxHeight * dpr;
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
this.canvas = canvasNode;
|
||||
this.ctx = ctx;
|
||||
|
||||
// 创建绘制服务
|
||||
const drawServiceOptions = {
|
||||
title: this.data.pageTitle,
|
||||
subTitle: this.data.subTitle || '',
|
||||
...options.drawServiceOptions,
|
||||
};
|
||||
|
||||
this.drawService = options.createDrawService(
|
||||
canvasNode,
|
||||
ctx,
|
||||
drawServiceOptions,
|
||||
);
|
||||
|
||||
// 执行初始化完成回调
|
||||
if (options.onCanvasReady) {
|
||||
options.onCanvasReady.call(this);
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
|
||||
/**
|
||||
* 导出打印
|
||||
*/
|
||||
exportToPrint(this: PageCanvasInstance) {
|
||||
if (!this.canvas || !this.data.hasContent) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (shouldShowShareGuide()) {
|
||||
this.setData({ showShareDialog: true });
|
||||
return;
|
||||
}
|
||||
|
||||
// 上报下载埋点
|
||||
tracker.reportDownload(this.data.pageTitle, this.data.currentMode);
|
||||
|
||||
checkAndSaveImage(this.canvas);
|
||||
},
|
||||
|
||||
getShareOptions(this: PageCanvasInstance): ShareOptions {
|
||||
const route = this.route || '';
|
||||
const { functionId, currentMode } = this.data;
|
||||
const currentModeQuery = currentMode ? `&mode=${currentMode}` : '';
|
||||
const path = `${route}?id=${functionId}${currentModeQuery}`;
|
||||
|
||||
console.log('getShareOptions path', path);
|
||||
return {
|
||||
...shareConfig,
|
||||
path,
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享小程序
|
||||
*/
|
||||
onShareAppMessage(this: PageCanvasInstance) {
|
||||
// 上报分享埋点
|
||||
tracker.reportShare(this.data.pageTitle);
|
||||
|
||||
return this.getShareOptions();
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
*/
|
||||
onShareTimeline(this: PageCanvasInstance) {
|
||||
console.log('onShareTimeline');
|
||||
// 上报分享埋点
|
||||
tracker.reportShare(this.data.pageTitle);
|
||||
return this.getShareOptions();
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭分享引导弹窗
|
||||
*/
|
||||
onCloseShareDialog(this: PageCanvasInstance) {
|
||||
this.setData({ showShareDialog: false });
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享成功回调
|
||||
*/
|
||||
onShareSuccess(this: PageCanvasInstance) {
|
||||
this.setData({ showShareDialog: false });
|
||||
if (this.canvas) {
|
||||
// 上报下载埋点（分享成功后下载）
|
||||
tracker.reportDownload(this.data.pageTitle);
|
||||
checkAndSaveImage(this.canvas);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化页面信息
|
||||
*
|
||||
* 支持两种调用方式：
|
||||
* 1. initPageInfo(functionId, defaultTitle) - 如果有 pageInfoLookup，会尝试查找；否则使用 defaultTitle
|
||||
* 2. initPageInfo({ title, desc, functionId }) - 直接提供页面信息
|
||||
*/
|
||||
initPageInfo(
|
||||
this: PageCanvasInstance,
|
||||
functionIdOrOptions:
|
||||
| string
|
||||
| { title: string; desc?: string; functionId: string },
|
||||
defaultTitle?: string,
|
||||
) {
|
||||
let functionId: string;
|
||||
let title: string;
|
||||
let desc: string = '';
|
||||
|
||||
// 判断调用方式
|
||||
if (typeof functionIdOrOptions === 'string') {
|
||||
// 方式1: initPageInfo(functionId, defaultTitle)
|
||||
functionId = functionIdOrOptions;
|
||||
title = defaultTitle || '';
|
||||
|
||||
// 如果有 pageInfoLookup，尝试查找
|
||||
if (pageInfoLookup) {
|
||||
const pageInfo = pageInfoLookup(functionId);
|
||||
if (pageInfo) {
|
||||
title = pageInfo.title;
|
||||
desc = pageInfo.desc || '';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 方式2: initPageInfo({ title, desc, functionId })
|
||||
functionId = functionIdOrOptions.functionId;
|
||||
title = functionIdOrOptions.title;
|
||||
desc = functionIdOrOptions.desc || '';
|
||||
}
|
||||
|
||||
this.setData({
|
||||
pageTitle: title,
|
||||
subTitle: desc,
|
||||
functionId,
|
||||
});
|
||||
|
||||
wx.setNavigationBarTitle({ title });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 应用页面公共方法的辅助函数
|
||||
* 自动混入公共方法，简化页面代码
|
||||
* @param pageOptions 页面选项
|
||||
* @param config 公共方法配置
|
||||
* @returns 合并后的页面选项
|
||||
*/
|
||||
export function applyPageMixin(
|
||||
pageOptions: any,
|
||||
config: PageCommonMethodsConfig = {},
|
||||
) {
|
||||
const commonMethods = getPageCommonMethods(config);
|
||||
|
||||
// 提取 pageOptions 中的 data（如果有）
|
||||
const pageData = pageOptions.data || {};
|
||||
|
||||
// 合并页面选项和公共方法
|
||||
// 注意：pageOptions 放在后面，这样页面可以覆盖公共方法
|
||||
const mergedOptions: any = {
|
||||
...commonMethods,
|
||||
...pageOptions,
|
||||
// 处理 data 的合并（需要特殊处理，避免覆盖）
|
||||
data: {
|
||||
...pageData,
|
||||
},
|
||||
};
|
||||
|
||||
return mergedOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建页面的便捷函数
|
||||
* 自动应用公共方法并注册为页面
|
||||
* @param pageOptions 页面选项
|
||||
* @param config 公共方法配置
|
||||
*/
|
||||
export function createPage(
|
||||
pageOptions: any,
|
||||
config: PageCommonMethodsConfig = {},
|
||||
) {
|
||||
Page(applyPageMixin(pageOptions, config));
|
||||
}
|
||||
Reference in New Issue
Block a user