feat:添加埋点，createPage 重构
This commit is contained in:
R524809
@@ -1,286 +1,230 @@
|
||||
import { PAPER_SIZE } from '../../constants/colors';
|
||||
import { checkAndSaveImage } from '../../utils/saveImage';
|
||||
import { shouldShowShareGuide } from '../../utils/shareGuide';
|
||||
import AdditionDraw from '../service/additionDraw';
|
||||
import {
|
||||
MATH_FUNCTION_TYPES,
|
||||
MathFunctionType,
|
||||
} from '../../constants/mathFunctions';
|
||||
import { applyMathPageMixin, CanvasDataState } from '../common/mathPageMixin';
|
||||
|
||||
Page({
|
||||
canvas: null as Canvas | null,
|
||||
ctx: null as RenderingContext | null,
|
||||
boxHeight: 0,
|
||||
boxWidth: 0,
|
||||
drawService: null as AdditionDraw | null,
|
||||
calculationData: null as {
|
||||
problems: Array<{
|
||||
type: 'addition' | 'subtraction';
|
||||
left: number;
|
||||
right: number;
|
||||
result: number;
|
||||
}>;
|
||||
} | null,
|
||||
Page(
|
||||
applyMathPageMixin(
|
||||
{
|
||||
canvas: null as Canvas | null,
|
||||
ctx: null as RenderingContext | null,
|
||||
boxHeight: 0,
|
||||
boxWidth: 0,
|
||||
drawService: null as AdditionDraw | null,
|
||||
calculationData: null as {
|
||||
problems: Array<{
|
||||
type: 'addition' | 'subtraction';
|
||||
left: number;
|
||||
right: number;
|
||||
result: number;
|
||||
}>;
|
||||
} | null,
|
||||
|
||||
data: {
|
||||
pageTitle: '加减法计算',
|
||||
functionId: '',
|
||||
hasContent: false,
|
||||
showShareDialog: false,
|
||||
currentType: 'addition-5', // 'addition-5', 'addition-10', 'subtraction-10', 'addition-subtraction-10'
|
||||
currentTypeName: '5以内加法',
|
||||
typeActions: [
|
||||
{ name: '5以内加法', value: 'addition-5' },
|
||||
{ name: '10以内加法', value: 'addition-10' },
|
||||
{ name: '10以内减法', value: 'subtraction-10' },
|
||||
{ name: '10以内加减法', value: 'addition-subtraction-10' },
|
||||
],
|
||||
imageType: 'twelve-animals', // 图片类型：twelve-animals 或 fruits
|
||||
},
|
||||
|
||||
onLoad(options: { id?: string }) {
|
||||
const functionId = options.id || 'addition-5';
|
||||
this.setData({ functionId });
|
||||
|
||||
const functionItem = MATH_FUNCTION_TYPES.find(
|
||||
(item: MathFunctionType) => item.id === functionId,
|
||||
);
|
||||
|
||||
const pageTitle = functionItem?.title || '加减法计算';
|
||||
this.setData({ pageTitle });
|
||||
wx.setNavigationBarTitle({ title: pageTitle });
|
||||
|
||||
// 根据 functionId 设置默认类型
|
||||
if (functionId === 'addition-5') {
|
||||
this.setData({
|
||||
currentType: 'addition-5',
|
||||
data: {
|
||||
pageTitle: '加减法计算',
|
||||
subTitle: '通过图形化方式学习加减法运算',
|
||||
functionId: '',
|
||||
hasContent: false,
|
||||
showShareDialog: false,
|
||||
currentType: 'addition-5', // 'addition-5', 'addition-10', 'subtraction-10', 'addition-subtraction-10'
|
||||
currentTypeName: '5以内加法',
|
||||
});
|
||||
} else if (functionId === 'addition-10') {
|
||||
this.setData({
|
||||
currentType: 'addition-10',
|
||||
currentTypeName: '10以内加法',
|
||||
});
|
||||
} else if (functionId === 'subtraction-10') {
|
||||
this.setData({
|
||||
currentType: 'subtraction-10',
|
||||
currentTypeName: '10以内减法',
|
||||
});
|
||||
} else if (functionId === 'addition-subtraction-10') {
|
||||
this.setData({
|
||||
currentType: 'addition-subtraction-10',
|
||||
currentTypeName: '10以内加减法',
|
||||
});
|
||||
}
|
||||
},
|
||||
typeActions: [
|
||||
{ name: '5以内加法', value: 'addition-5' },
|
||||
{ name: '10以内加法', value: 'addition-10' },
|
||||
{ name: '10以内减法', value: 'subtraction-10' },
|
||||
{ name: '10以内加减法', value: 'addition-subtraction-10' },
|
||||
],
|
||||
imageType: 'twelve-animals', // 图片类型：twelve-animals 或 fruits
|
||||
} as CanvasDataState & {
|
||||
currentType: string;
|
||||
currentTypeName: string;
|
||||
typeActions: Array<{ name: string; value: string }>;
|
||||
imageType: string;
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this.initCanvas();
|
||||
},
|
||||
onLoad(options: { id?: string }) {
|
||||
const functionId = options.id || 'addition-5';
|
||||
this.initPageInfo(functionId, '加减法计算');
|
||||
|
||||
/**
|
||||
* 初始化Canvas
|
||||
*/
|
||||
initCanvas() {
|
||||
const query = wx.createSelectorQuery();
|
||||
query
|
||||
.select('#canvasWrapper')
|
||||
.boundingClientRect((rect) => {
|
||||
if (rect) {
|
||||
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;
|
||||
|
||||
this.drawService = new AdditionDraw(
|
||||
canvasNode,
|
||||
ctx,
|
||||
{
|
||||
title: this.data.currentTypeName,
|
||||
subTitle: '通过图形化方式学习加减法运算',
|
||||
},
|
||||
);
|
||||
|
||||
// 初始随机生成
|
||||
this.onRandom();
|
||||
}
|
||||
// 根据 functionId 设置默认类型
|
||||
if (functionId === 'addition-5') {
|
||||
this.setData({
|
||||
currentType: 'addition-5',
|
||||
currentTypeName: '5以内加法',
|
||||
});
|
||||
} else if (functionId === 'addition-10') {
|
||||
this.setData({
|
||||
currentType: 'addition-10',
|
||||
currentTypeName: '10以内加法',
|
||||
});
|
||||
} else if (functionId === 'subtraction-10') {
|
||||
this.setData({
|
||||
currentType: 'subtraction-10',
|
||||
currentTypeName: '10以内减法',
|
||||
});
|
||||
} else if (functionId === 'addition-subtraction-10') {
|
||||
this.setData({
|
||||
currentType: 'addition-subtraction-10',
|
||||
currentTypeName: '10以内加减法',
|
||||
});
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 绘制Canvas内容
|
||||
*/
|
||||
async drawCanvas() {
|
||||
if (!this.ctx || !this.drawService || !this.calculationData) {
|
||||
return;
|
||||
}
|
||||
onReady() {
|
||||
this.initCanvas({
|
||||
createDrawService: (
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
options?: Record<string, any>,
|
||||
) => {
|
||||
return new AdditionDraw(canvas, ctx, options);
|
||||
},
|
||||
drawServiceOptions: {
|
||||
subTitle: this.data.subTitle,
|
||||
},
|
||||
onCanvasReady: () => {
|
||||
// 初始随机生成
|
||||
this.onRandom();
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
try {
|
||||
// 更新 Header 的 Title
|
||||
if (this.drawService) {
|
||||
this.drawService.options.title = this.data.currentTypeName;
|
||||
}
|
||||
|
||||
await this.drawService.draw(
|
||||
this.calculationData,
|
||||
this.data.currentType,
|
||||
);
|
||||
this.setData({ hasContent: true });
|
||||
} catch (error) {
|
||||
console.error('绘制失败:', error);
|
||||
this.setData({ hasContent: false });
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 随机生成
|
||||
*/
|
||||
onRandom() {
|
||||
const problems: Array<{
|
||||
type: 'addition' | 'subtraction';
|
||||
left: number;
|
||||
right: number;
|
||||
result: number;
|
||||
}> = [];
|
||||
|
||||
const type = this.data.currentType;
|
||||
|
||||
// 生成6道题目
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (type === 'addition-5') {
|
||||
// 5以内加法：和 ≤ 5
|
||||
// left >= 1, right >= 1, left + right <= 5
|
||||
const maxSum = 5;
|
||||
const left = Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 4
|
||||
const maxRight = maxSum - left; // 确保 left + right <= 5
|
||||
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
||||
const result = left + right;
|
||||
problems.push({ type: 'addition', left, right, result });
|
||||
} else if (type === 'addition-10') {
|
||||
// 10以内加法：和 ≤ 10
|
||||
// left >= 1, right >= 1, left + right <= 10
|
||||
const maxSum = 10;
|
||||
const left = Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 9
|
||||
const maxRight = maxSum - left; // 确保 left + right <= 10
|
||||
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
||||
const result = left + right;
|
||||
problems.push({ type: 'addition', left, right, result });
|
||||
} else if (type === 'subtraction-10') {
|
||||
// 10以内减法：被减数 ≤ 10
|
||||
// left <= 10, left - right = result, result >= 1
|
||||
const maxLeft = 10;
|
||||
const left = Math.floor(Math.random() * maxLeft) + 1; // 1 到 10
|
||||
const maxRight = left - 1; // 确保 result >= 1
|
||||
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
||||
const result = left - right;
|
||||
problems.push({ type: 'subtraction', left, right, result });
|
||||
} else if (type === 'addition-subtraction-10') {
|
||||
// 加减法混合
|
||||
if (Math.random() < 0.5) {
|
||||
// 加法：和 ≤ 10
|
||||
const maxSum = 10;
|
||||
const left = Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 9
|
||||
const maxRight = maxSum - left; // 确保 left + right <= 10
|
||||
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
||||
const result = left + right;
|
||||
problems.push({ type: 'addition', left, right, result });
|
||||
} else {
|
||||
// 减法：被减数 ≤ 10
|
||||
const maxLeft = 10;
|
||||
const left = Math.floor(Math.random() * maxLeft) + 1; // 1 到 10
|
||||
const maxRight = left - 1; // 确保 result >= 1
|
||||
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
||||
const result = left - right;
|
||||
problems.push({ type: 'subtraction', left, right, result });
|
||||
/**
|
||||
* 绘制Canvas内容
|
||||
*/
|
||||
async drawCanvas() {
|
||||
if (!this.ctx || !this.drawService || !this.calculationData) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.calculationData = { problems };
|
||||
this.drawCanvas();
|
||||
},
|
||||
try {
|
||||
// 更新 Header 的 Title
|
||||
if (this.drawService) {
|
||||
this.drawService.options.title =
|
||||
this.data.currentTypeName;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出打印
|
||||
*/
|
||||
exportToPrint() {
|
||||
if (!this.canvas || !this.data.hasContent) {
|
||||
return;
|
||||
}
|
||||
await this.drawService.draw(
|
||||
this.calculationData,
|
||||
this.data.currentType,
|
||||
);
|
||||
this.setData({ hasContent: true });
|
||||
} catch (error) {
|
||||
console.error('绘制失败:', error);
|
||||
this.setData({ hasContent: false });
|
||||
}
|
||||
},
|
||||
|
||||
if (shouldShowShareGuide()) {
|
||||
this.setData({ showShareDialog: true });
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* 随机生成
|
||||
*/
|
||||
onRandom() {
|
||||
const problems: Array<{
|
||||
type: 'addition' | 'subtraction';
|
||||
left: number;
|
||||
right: number;
|
||||
result: number;
|
||||
}> = [];
|
||||
|
||||
checkAndSaveImage(this.canvas);
|
||||
},
|
||||
const type = this.data.currentType;
|
||||
|
||||
/**
|
||||
* 分享小程序
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '涂鸦丫-数学学习涂鸦卡',
|
||||
path: `/mathPages/addition/addition?id=${this.data.functionId}`,
|
||||
imageUrl:
|
||||
'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
||||
};
|
||||
},
|
||||
// 生成5道题目
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (type === 'addition-5') {
|
||||
// 5以内加法：和 ≤ 5
|
||||
// left >= 1, right >= 1, left + right <= 5
|
||||
const maxSum = 5;
|
||||
const left =
|
||||
Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 4
|
||||
const maxRight = maxSum - left; // 确保 left + right <= 5
|
||||
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
||||
const result = left + right;
|
||||
problems.push({
|
||||
type: 'addition',
|
||||
left,
|
||||
right,
|
||||
result,
|
||||
});
|
||||
} else if (type === 'addition-10') {
|
||||
// 10以内加法：和 ≤ 10
|
||||
// left >= 1, right >= 1, left + right <= 10
|
||||
const maxSum = 10;
|
||||
const left =
|
||||
Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 9
|
||||
const maxRight = maxSum - left; // 确保 left + right <= 10
|
||||
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
||||
const result = left + right;
|
||||
problems.push({
|
||||
type: 'addition',
|
||||
left,
|
||||
right,
|
||||
result,
|
||||
});
|
||||
} else if (type === 'subtraction-10') {
|
||||
// 10以内减法：被减数 ≤ 10
|
||||
// left <= 10, left - right = result, result >= 1
|
||||
const maxLeft = 10;
|
||||
const left = Math.floor(Math.random() * maxLeft) + 1; // 1 到 10
|
||||
const maxRight = left - 1; // 确保 result >= 1
|
||||
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
||||
const result = left - right;
|
||||
problems.push({
|
||||
type: 'subtraction',
|
||||
left,
|
||||
right,
|
||||
result,
|
||||
});
|
||||
} else if (type === 'addition-subtraction-10') {
|
||||
// 加减法混合
|
||||
if (Math.random() < 0.5) {
|
||||
// 加法：和 ≤ 10
|
||||
const maxSum = 10;
|
||||
const left =
|
||||
Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 9
|
||||
const maxRight = maxSum - left; // 确保 left + right <= 10
|
||||
const right =
|
||||
Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
||||
const result = left + right;
|
||||
problems.push({
|
||||
type: 'addition',
|
||||
left,
|
||||
right,
|
||||
result,
|
||||
});
|
||||
} else {
|
||||
// 减法：被减数 ≤ 10
|
||||
const maxLeft = 10;
|
||||
const left =
|
||||
Math.floor(Math.random() * maxLeft) + 1; // 1 到 10
|
||||
const maxRight = left - 1; // 确保 result >= 1
|
||||
const right =
|
||||
Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
||||
const result = left - right;
|
||||
problems.push({
|
||||
type: 'subtraction',
|
||||
left,
|
||||
right,
|
||||
result,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: '涂鸦丫-数学学习涂鸦卡',
|
||||
query: `id=${this.data.functionId}`,
|
||||
imageUrl:
|
||||
'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
||||
};
|
||||
},
|
||||
this.calculationData = { problems };
|
||||
this.drawCanvas();
|
||||
},
|
||||
|
||||
/** 关闭分享引导弹窗 */
|
||||
onCloseShareDialog() {
|
||||
this.setData({ showShareDialog: false });
|
||||
},
|
||||
|
||||
/** 分享成功回调 */
|
||||
onShareSuccess() {
|
||||
this.setData({ showShareDialog: false });
|
||||
if (this.canvas) {
|
||||
checkAndSaveImage(this.canvas);
|
||||
}
|
||||
},
|
||||
|
||||
/** 选择类型 */
|
||||
onSelectType(event: any) {
|
||||
const { name, value } = event.detail;
|
||||
this.setData({
|
||||
currentType: value,
|
||||
currentTypeName: name,
|
||||
});
|
||||
// 重新生成数据
|
||||
this.onRandom();
|
||||
},
|
||||
});
|
||||
/** 选择类型 */
|
||||
onSelectType(event: any) {
|
||||
const { name, value } = event.detail;
|
||||
this.setData({
|
||||
currentType: value,
|
||||
currentTypeName: name,
|
||||
});
|
||||
// 重新生成数据
|
||||
this.onRandom();
|
||||
},
|
||||
},
|
||||
{
|
||||
pagePath: 'addition/addition',
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user