feat:2.4.4填上缺少的数字
This commit is contained in:
R524809
@@ -0,0 +1,137 @@
|
||||
# MathPage 公共工具
|
||||
|
||||
这个目录包含了数学页面的公共工具和复用代码。
|
||||
|
||||
## mathPageMixin.ts
|
||||
|
||||
提供了所有数学页面的公共功能，包括：
|
||||
|
||||
- Canvas 初始化
|
||||
- 分享功能（小程序分享、朋友圈分享）
|
||||
- 导出打印功能
|
||||
- 页面信息初始化
|
||||
|
||||
### 使用方法
|
||||
|
||||
```typescript
|
||||
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 配置中
|
||||
@@ -0,0 +1,224 @@
|
||||
import { PAPER_SIZE } from '../../constants/colors';
|
||||
import { checkAndSaveImage } from '../../utils/saveImage';
|
||||
import { shouldShowShareGuide } from '../../utils/shareGuide';
|
||||
import { BaseMathDrawService } from '../service/baseMathDraw';
|
||||
import {
|
||||
MATH_FUNCTION_TYPES,
|
||||
MathFunctionType,
|
||||
} from '../../constants/mathFunctions';
|
||||
|
||||
/**
|
||||
* Canvas 相关的页面实例属性
|
||||
*/
|
||||
export interface MathPageCanvasInstance {
|
||||
canvas: Canvas | null;
|
||||
ctx: RenderingContext | null;
|
||||
boxHeight: number;
|
||||
boxWidth: number;
|
||||
drawService: BaseMathDrawService | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Canvas 数据状态接口
|
||||
*/
|
||||
export interface CanvasDataState {
|
||||
hasContent: boolean;
|
||||
showShareDialog: boolean;
|
||||
boxWidth: number;
|
||||
boxHeight: number;
|
||||
functionId: string;
|
||||
pageTitle: string;
|
||||
subTitle?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Canvas 初始化选项
|
||||
*/
|
||||
export interface InitCanvasOptions {
|
||||
/**
|
||||
* 创建绘制服务的工厂函数
|
||||
*/
|
||||
createDrawService: (
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
options?: Record<string, any>,
|
||||
) => BaseMathDrawService;
|
||||
/**
|
||||
* 绘制服务的选项
|
||||
*/
|
||||
drawServiceOptions?: Record<string, any>;
|
||||
/**
|
||||
* Canvas 初始化完成后回调
|
||||
*/
|
||||
onCanvasReady?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 分享配置选项
|
||||
*/
|
||||
export interface ShareOptions {
|
||||
/**
|
||||
* 页面路径（相对于 mathPages 目录，例如：'missingNumber/missingNumber'）
|
||||
*/
|
||||
pagePath: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取数学页面的公共方法
|
||||
* 这些方法可以在所有数学页面中复用
|
||||
*/
|
||||
export function getMathPageCommonMethods(shareOptions: ShareOptions) {
|
||||
return {
|
||||
/**
|
||||
* 初始化 Canvas
|
||||
*/
|
||||
initCanvas(
|
||||
this: MathPageCanvasInstance & { data: CanvasDataState },
|
||||
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: MathPageCanvasInstance & { data: CanvasDataState },
|
||||
) {
|
||||
if (!this.canvas || !this.data.hasContent) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (shouldShowShareGuide()) {
|
||||
this.setData({ showShareDialog: true });
|
||||
return;
|
||||
}
|
||||
|
||||
checkAndSaveImage(this.canvas);
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享小程序
|
||||
*/
|
||||
onShareAppMessage(
|
||||
this: MathPageCanvasInstance & { data: CanvasDataState },
|
||||
) {
|
||||
return {
|
||||
title: '涂鸦丫-数学学习涂鸦卡',
|
||||
path: `/mathPages/${shareOptions.pagePath}?id=${this.data.functionId}`,
|
||||
imageUrl:
|
||||
'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
*/
|
||||
onShareTimeline(
|
||||
this: MathPageCanvasInstance & { data: CanvasDataState },
|
||||
) {
|
||||
return {
|
||||
title: '涂鸦丫-数学学习涂鸦卡',
|
||||
query: `id=${this.data.functionId}`,
|
||||
imageUrl:
|
||||
'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭分享引导弹窗
|
||||
*/
|
||||
onCloseShareDialog(
|
||||
this: MathPageCanvasInstance & { data: CanvasDataState },
|
||||
) {
|
||||
this.setData({ showShareDialog: false });
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享成功回调
|
||||
*/
|
||||
onShareSuccess(
|
||||
this: MathPageCanvasInstance & { data: CanvasDataState },
|
||||
) {
|
||||
this.setData({ showShareDialog: false });
|
||||
if (this.canvas) {
|
||||
checkAndSaveImage(this.canvas);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化页面信息（从 functionId 获取标题等信息）
|
||||
*/
|
||||
initPageInfo(
|
||||
this: MathPageCanvasInstance & { data: CanvasDataState },
|
||||
functionId: string,
|
||||
defaultTitle?: string,
|
||||
) {
|
||||
const functionItem = MATH_FUNCTION_TYPES.find(
|
||||
(item: MathFunctionType) => item.id === functionId,
|
||||
);
|
||||
|
||||
const title = functionItem?.title || defaultTitle || '';
|
||||
const desc = functionItem?.desc || '';
|
||||
|
||||
this.setData({
|
||||
pageTitle: title,
|
||||
subTitle: desc,
|
||||
functionId,
|
||||
});
|
||||
|
||||
wx.setNavigationBarTitle({ title });
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user