feat:添加埋点，createPage 重构

miniprogram/mathPages/numberFind/numberFind.ts

@@ -1,13 +1,7 @@
-import { PAPER_SIZE } from '../../constants/colors';
-import { checkAndSaveImage } from '../../utils/saveImage';
-import { shouldShowShareGuide } from '../../utils/shareGuide';
 import NumberFindDraw from '../service/numberFindDraw';
-import {
-    MATH_FUNCTION_TYPES,
-    MathFunctionType,
-} from '../../constants/mathFunctions';
+import { createMathPage, CanvasDataState } from '../common/mathPageMixin';
 
-Page({
+createMathPage({
     canvas: null as Canvas | null,
     ctx: null as RenderingContext | null,
     boxHeight: 0,
@@ -19,102 +13,47 @@ Page({
         selectedNumber: 0, // 选中的数字
         functionId: '', // 功能ID，用于判断标题
         numberList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 数字列表
-        showShareDialog: false, // 显示分享引导弹窗
+        hasContent: false,
+        showShareDialog: false,
+    } as CanvasDataState & {
+        selectedNumber: number;
+        numberList: number[];
     },
 
     onLoad(options: { id?: string }) {
-        // 根据id参数判断页面标题
         const functionId = options.id || 'number-find';
         this.setData({
             functionId,
         });
-
-        // 根据functionId设置页面标题
-        const functionItem = MATH_FUNCTION_TYPES.find(
-            (item: MathFunctionType) => item.id === functionId,
-        );
-
-        const pageTitle = functionItem?.title || '看数字，涂一涂';
-        this.setData({
-            pageTitle,
-        });
-
-        // 设置导航栏标题
-        wx.setNavigationBarTitle({
-            title: pageTitle,
-        });
+        this.initPageInfo(functionId, '看数字，涂一涂');
     },
 
     onReady() {
-        // 初始化canvas
-        this.initCanvas();
-    },
-
-    /**
-     * 初始化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.initCanvas({
+            createDrawService: (
+                canvas: Canvas,
+                ctx: RenderingContext,
+                options?: Record<string, any>,
+            ) => {
+                return new NumberFindDraw(canvas, ctx, options);
+            },
+            drawServiceOptions: {
+                subTitle: '找一找下面相同的数字，涂上颜色',
+                functionId: this.data.functionId,
+            },
+            onCanvasReady: () => {
+                // 如果还没有选中数字，随机选择一个
+                if (this.data.selectedNumber === 0) {
+                    const randomNumber = Math.floor(Math.random() * 10) + 1;
                     this.setData({
-                        boxWidth,
-                        boxHeight,
-                    });
-
-                    // 初始化canvas上下文
-                    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 NumberFindDraw(
-                                canvasNode,
-                                ctx,
-                                {
-                                    title: this.data.pageTitle,
-                                    subTitle: '找一找下面相同的数字，涂上颜色',
-                                    functionId: this.data.functionId,
-                                },
-                            );
-
-                            // 如果还没有选中数字，随机选择一个
-                            if (this.data.selectedNumber === 0) {
-                                const randomNumber =
-                                    Math.floor(Math.random() * 10) + 1;
-                                this.setData({
-                                    selectedNumber: randomNumber,
-                                });
-                            }
-
-                            // 绘制初始内容
-                            this.drawCanvas();
-                        }
+                        selectedNumber: randomNumber,
                     });
                 }
-            })
-            .exec();
+
+                // 绘制初始内容
+                this.drawCanvas();
+            },
+        });
     },
 
     /**
@@ -128,8 +67,10 @@ Page({
         if (this.data.selectedNumber > 0) {
             try {
                 await this.drawService.draw(this.data.selectedNumber);
+                this.setData({ hasContent: true });
             } catch (error) {
                 console.error('绘制失败:', error);
+                this.setData({ hasContent: false });
             }
         }
     },
@@ -155,57 +96,4 @@ Page({
         });
         this.drawCanvas();
     },
-
-    /**
-     * 导出打印
-     */
-    exportToPrint() {
-        if (!this.canvas || this.data.selectedNumber <= 0) {
-            return;
-        }
-
-        // 检查是否需要显示分享引导
-        if (shouldShowShareGuide()) {
-            this.setData({ showShareDialog: true });
-            return;
-        }
-
-        // 直接下载
-        checkAndSaveImage(this.canvas);
-    },
-
-    /**
-     * 分享小程序
-     */
-    onShareAppMessage() {
-        return {
-            title: '涂鸦丫-数学学习涂鸦卡',
-            path: `/mathPages/numberFind/numberFind?id=${this.data.functionId}`,
-            imageUrl:
-                'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
-        };
-    },
-
-    onShareTimeline() {
-        return {
-            title: '涂鸦丫-数学学习涂鸦卡',
-            query: `id=${this.data.functionId}`,
-            imageUrl:
-                'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
-        };
-    },
-
-    /** 关闭分享引导弹窗 */
-    onCloseShareDialog() {
-        this.setData({ showShareDialog: false });
-    },
-
-    /** 分享成功回调 */
-    onShareSuccess() {
-        this.setData({ showShareDialog: false });
-        // 分享成功后直接下载
-        if (this.canvas) {
-            checkAndSaveImage(this.canvas);
-        }
-    },
 });