doodle-mini/miniprogram/mathPages/shared/common/README.md

MathPage 公共工具

这个目录包含了数学页面的公共工具和复用代码。

mathPageMixin.ts

提供了所有数学页面的公共功能，包括：

• Canvas 初始化
• 分享功能（小程序分享、朋友圈分享）
• 导出打印功能
• 页面信息初始化

使用方法

import { getMathPageCommonMethods } from '../common/mathPageMixin';
import YourDrawService from '../service/yourDrawService';

// 获取公共方法，传入页面路径
const commonMethods = getMathPageCommonMethods({
    pagePath: 'yourPage/yourPage', // 相对于 mathPages 目录的路径
});

Page({
    // Canvas 相关属性
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    boxHeight: 0,
    boxWidth: 0,
    drawService: null as YourDrawService | null,

    // 页面数据（包含公共数据）
    data: {
        functionId: '',
        pageTitle: '',
        subTitle: '',
        hasContent: false,
        showShareDialog: false,
        boxWidth: 0,
        boxHeight: 0,
        // ... 其他页面特定的数据
    },

    onLoad(options: { id?: string }) {
        const functionId = options.id || 'your-function-id';
        // 使用公共方法初始化页面信息
        this.initPageInfo(functionId, '默认标题');
    },

    onReady() {
        // 使用公共方法初始化 Canvas
        this.initCanvas({
            createDrawService: (canvas, ctx, options) => {
                return new YourDrawService(canvas, ctx, options);
            },
            drawServiceOptions: {
                // 传递给绘制服务的选项
            },
            onCanvasReady: () => {
                // Canvas 初始化完成后的回调
                this.onRandom(); // 或其他初始化操作
            },
        });
    },

    // 实现页面特定的绘制逻辑
    async drawCanvas() {
        if (!this.ctx || !this.drawService || !this.yourData) {
            return;
        }
        try {
            await this.drawService.draw(this.yourData);
            this.setData({ hasContent: true });
        } catch (error) {
            console.error('绘制失败:', error);
            this.setData({ hasContent: false });
        }
    },

    // 页面特定的方法
    onRandom() {
        // 生成数据逻辑
        this.drawCanvas();
    },

    // ========== 使用公共方法 ==========
    initCanvas: commonMethods.initCanvas,
    exportToPrint: commonMethods.exportToPrint,
    onShareAppMessage: commonMethods.onShareAppMessage,
    onShareTimeline: commonMethods.onShareTimeline,
    onCloseShareDialog: commonMethods.onCloseShareDialog,
    onShareSuccess: commonMethods.onShareSuccess,
    initPageInfo: commonMethods.initPageInfo,
});

提供的公共方法

1. initCanvas(options) - 初始化 Canvas

   • createDrawService: 创建绘制服务的工厂函数
   • drawServiceOptions: 传递给绘制服务的选项
   • onCanvasReady: Canvas 初始化完成后的回调

2. drawCanvas() - 绘制 Canvas 内容（需要子类实现）

3. exportToPrint() - 导出打印

4. onShareAppMessage() - 小程序分享

5. onShareTimeline() - 朋友圈分享

6. onCloseShareDialog() - 关闭分享引导弹窗

7. onShareSuccess() - 分享成功回调

8. initPageInfo(functionId, defaultTitle) - 初始化页面信息

   • 从 MATH_FUNCTION_TYPES 中获取标题和描述
   • 设置导航栏标题

优势

• ✅ 代码复用: 消除了重复代码
• ✅ 类型安全: 完整的 TypeScript 类型支持
• ✅ 易于维护: 公共功能集中管理
• ✅ 灵活扩展: 每个页面可以重写特定方法

迁移指南

从旧代码迁移到使用 mixin：

1. 导入公共方法
2. 移除重复的方法（exportToPrint、分享相关等）
3. 使用 initCanvas 替代原有的 Canvas 初始化代码
4. 使用 initPageInfo 替代页面信息初始化代码
5. 将公共方法添加到 Page 配置中