feat:架构代码优化
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,104 @@
|
||||
/**
|
||||
* 数学页面公共样式
|
||||
*/
|
||||
page {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-color: #f6f6f6;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 160rpx; // 为底部按钮预留空间
|
||||
|
||||
.empty {
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 36rpx 24rpx;
|
||||
box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
|
||||
margin: 30rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.wrapper-title {
|
||||
font-size: 32rpx;
|
||||
color: #141414;
|
||||
margin-bottom: 36rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.canvas-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx dashed #dee2e6;
|
||||
}
|
||||
|
||||
.canvas-content {
|
||||
max-width: 100%;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.random-button-area {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.type-selector {
|
||||
flex: 1; // 占据剩余空间
|
||||
height: 80rpx;
|
||||
background-color: #fff;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.type-selector-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.type-selector-arrow {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.random-button {
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部按钮区域 */
|
||||
.bottom-btn-box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15);
|
||||
padding: 24rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* 数学页面专用的 Mixin
|
||||
* 基于通用 pageMixin，提供数学模块特定的配置
|
||||
*/
|
||||
|
||||
import {
|
||||
getPageCommonMethods,
|
||||
applyPageMixin,
|
||||
createPage,
|
||||
CanvasDataState,
|
||||
PageCanvasInstance,
|
||||
InitCanvasOptions,
|
||||
ShareOptions,
|
||||
PageCommonMethodsConfig,
|
||||
} from '../../../base/pageMixin';
|
||||
import {
|
||||
MATH_FUNCTION_TYPES,
|
||||
MathFunctionType,
|
||||
} from '../../../constants/mathFunctions';
|
||||
|
||||
/**
|
||||
* 数学模块的页面实例类型（向后兼容）
|
||||
*/
|
||||
export type MathPageCanvasInstance = PageCanvasInstance;
|
||||
|
||||
/**
|
||||
* 数学模块的分享配置
|
||||
*/
|
||||
const mathShareConfig = {
|
||||
title: '涂鸦丫-数学学习涂鸦卡',
|
||||
imageUrl: 'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
||||
};
|
||||
|
||||
/**
|
||||
* 数学模块的页面信息查找函数
|
||||
*/
|
||||
function mathPageInfoLookup(functionId: string) {
|
||||
const functionItem = MATH_FUNCTION_TYPES.find(
|
||||
(item: MathFunctionType) => item.id === functionId,
|
||||
);
|
||||
|
||||
if (functionItem) {
|
||||
return {
|
||||
title: functionItem.title,
|
||||
desc: functionItem.desc,
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取数学页面的公共方法
|
||||
* 这些方法可以在所有数学页面中复用
|
||||
* @deprecated 使用 getMathPageCommonMethods() 即可，会自动应用数学模块配置
|
||||
*/
|
||||
export function getMathPageCommonMethods() {
|
||||
const config: PageCommonMethodsConfig = {
|
||||
shareConfig: mathShareConfig,
|
||||
pageInfoLookup: mathPageInfoLookup,
|
||||
};
|
||||
|
||||
return getPageCommonMethods(config);
|
||||
}
|
||||
|
||||
/**
|
||||
* 应用数学页面公共方法的辅助函数
|
||||
* 自动混入公共方法，简化页面代码
|
||||
* @param pageOptions 页面选项
|
||||
* @returns 合并后的页面选项
|
||||
* @deprecated 使用 applyMathPageMixin() 即可，会自动应用数学模块配置
|
||||
*/
|
||||
export function applyMathPageMixin(pageOptions: any) {
|
||||
const config: PageCommonMethodsConfig = {
|
||||
shareConfig: mathShareConfig,
|
||||
pageInfoLookup: mathPageInfoLookup,
|
||||
};
|
||||
|
||||
return applyPageMixin(pageOptions, config);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建数学页面的便捷函数
|
||||
* 自动应用公共方法并注册为页面
|
||||
* @param pageOptions 页面选项
|
||||
*/
|
||||
export function createMathPage(pageOptions: any) {
|
||||
const config: PageCommonMethodsConfig = {
|
||||
shareConfig: mathShareConfig,
|
||||
pageInfoLookup: mathPageInfoLookup,
|
||||
};
|
||||
|
||||
createPage(pageOptions, config);
|
||||
}
|
||||
|
||||
// 导出类型，保持向后兼容
|
||||
export type { CanvasDataState, InitCanvasOptions, ShareOptions };
|
||||
Reference in New Issue
Block a user