R524809
138 lines
3.9 KiB
Markdown
138 lines
3.9 KiB
Markdown
# 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 配置中
|