joey5628/doodle-mini

Fork 0

Files

T

R524809 3c0e2af10d feat:架构代码优化

2025-12-11 13:02:44 +08:00

5.2 KiB

Raw Blame History

页面 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 方法优化

之前：

initPageInfo(functionId: string, defaultTitle?: string) {
    const functionItem = MATH_FUNCTION_TYPES.find(...); // 硬编码
    // ...
}

现在：

// 方式1：配合 pageInfoLookup 使用（数学模块自动配置）
initPageInfo(functionId: string, defaultTitle?: string)

// 方式2：直接提供信息（专注力等模块可以使用）
initPageInfo({ title: string, desc?: string, functionId: string })

配置化的页面信息查找

通过 PageCommonMethodsConfig 可以传入：

shareConfig: 模块特定的分享配置
pageInfoLookup: 页面信息查找函数（可选）

这样不同模块可以使用不同的查找逻辑，而不需要硬编码。

使用方式

数学模块（无需修改）

所有现有的数学页面继续使用原有方式：

import { createMathPage, CanvasDataState } from '../common/mathPageMixin';

createMathPage({
    // ...
    onLoad(options: { id?: string }) {
        const functionId = options.id || 'addition-5';
        // 自动从 MATH_FUNCTION_TYPES 中查找
        this.initPageInfo(functionId, '默认标题');
    },
});

专注力模块（新）

import { createFocusPage } from '../common/focusPageMixin';

createFocusPage({
    // ...
    onLoad(options: { id?: string }) {
        const functionId = options.id || 'grid-drawing';
        // 自动从 FOCUS_FUNCTION_TYPES 中查找
        this.initPageInfo(functionId, '格子仿画');
    },
});

其他模块（通用方式）

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 - 重构（保持向后兼容）

测试建议

验证所有数学页面功能正常
验证页面信息（title, desc）正确显示
验证分享功能正常
验证 Canvas 初始化正常
验证图片导出功能正常

后续扩展

其他模块（如专注力模块）可以：

创建自己的 XXXPageMixin.ts 文件
定义自己的函数类型和列表
配置自己的分享信息
使用 createXXXPage 创建页面

这样可以保持代码的模块化和可维护性。

5.2 KiB Raw Blame History