joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化字帖功能

Browse Source
This commit is contained in:
R524809
2026-02-11 16:03:39 +08:00
parent 943250b34a
commit cbf07faf27
11 changed files with 474 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/base/pageMixin.ts
+14 -20
View File
@@ -1,6 +1,5 @@
import { PAPER_SIZE } from '../constants/colors';
import { checkAndSaveImage } from '../utils/saveImage';
import { shouldShowShareGuide } from '../utils/shareGuide';
import { downloadPrint } from '../utils/downloadPrint';
import { BaseDrawService } from '../service/baseDraw';
import tracker from '../utils/tracker';
import { defaultShareConfig } from '../config/config';
@@ -172,20 +171,12 @@ export function getPageCommonMethods(config: PageCommonMethodsConfig = {}) {
/**
* 导出打印
*/
exportToPrint(this: PageCanvasInstance) {
if (!this.canvas || !this.data.hasContent) {
return;
}
if (shouldShowShareGuide()) {
this.setData({ showShareDialog: true });
return;
}
// 上报下载埋点
tracker.reportDownload(this.data.pageTitle, this.data.currentMode);
checkAndSaveImage(this.canvas);
async exportToPrint(this: PageCanvasInstance) {
await downloadPrint(this.canvas, {
errorToast: '请先生成内容',
trackerName: this.data.pageTitle,
trackerMode: this.data.currentMode,
});
},
getShareOptions(this: PageCanvasInstance): ShareOptions {
@@ -231,12 +222,15 @@ export function getPageCommonMethods(config: PageCommonMethodsConfig = {}) {
/**
* 分享成功回调
*/
onShareSuccess(this: PageCanvasInstance) {
async onShareSuccess(this: PageCanvasInstance) {
this.setData({ showShareDialog: false });
if (this.canvas) {
// 上报下载埋点（分享成功后下载）
tracker.reportDownload(this.data.pageTitle);
checkAndSaveImage(this.canvas);
// 分享成功后下载（不限制次数）
await downloadPrint(this.canvas, {
errorToast: '请先生成内容',
trackerName: this.data.pageTitle,
trackerMode: this.data.currentMode,
});
}
},
miniprogram/components/word-input/word-input.ts
+16 -7
View File
@@ -14,15 +14,27 @@ Component({
type: String,
value: '请输入文字',
},
value: {
type: String,
value: '', // 输入框的值（支持外部控制）
},
},
/**
* 组件的初始数据
*/
data: {
innerValue: '', // 内部维护的输入值
},
observers: {
// 监听外部传入的 value 变化
value(newVal: string) {
this.setData({ innerValue: newVal });
},
},
lifetimes: {
attached() {
(this as any).value = '';
// 初始化时同步外部传入的 value
this.setData({ innerValue: this.properties.value || '' });
},
},
/**
@@ -32,17 +44,14 @@ Component({
onInput(e: WechatMiniprogram.Input) {
let { value } = e.detail;
value = value.replace(/\s/g, '');
if (value.length > 0) {
(this as any).value = value;
}
this.setData({ innerValue: value });
},
onConfirm() {
const value = (this as any).value;
const value = this.data.innerValue;
if (value.length > 0) {
// 触发确认事件（即使值为空也触发，让父组件处理清空逻辑）
this.triggerEvent('onConfirm', { value });
}
},
// onTap() {
miniprogram/components/word-input/word-input.wxml
+1
View File
@@ -11,6 +11,7 @@
<input
class="word-input"
type="text"
value="{{innerValue}}"
placeholder="{{placeholder}}"
bindinput="onInput"
bindconfirm="onConfirm" />
miniprogram/focusPages/shape/shape.ts
+6 -15
View File
@@ -1,9 +1,7 @@
import { SHAPES, ShapeCard } from '../../constants/shapes';
import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
import ShapeDrawService from '../../service/shapeDrawService';
import { checkAndSaveImage } from '../../utils/saveImage';
import { shouldShowShareGuide } from '../../utils/shareGuide';
import tracker from '../../utils/tracker';
import { downloadPrint } from '../../utils/downloadPrint';
Page({
canvas: null as Canvas | null,
@@ -286,22 +284,15 @@ Page({
},
/** 下载打印 */
exportToPrint() {
async exportToPrint() {
if (!this.canvas || this.data.shapeList.length <= 0) {
return;
}
// 检查是否需要显示分享引导
if (shouldShowShareGuide()) {
this.setData({ showShareDialog: true });
return;
}
// 上报下载埋点
tracker.reportDownload('图形涂色');
// 直接下载
checkAndSaveImage(this.canvas);
await downloadPrint(this.canvas, {
errorToast: '请先生成图形',
trackerName: '图形涂色',
});
},
/** 关闭分享引导弹窗 */
miniprogram/pages/copyBook/copyBook.ts
+9 -28
View File
@@ -1,6 +1,5 @@
import WordDrawService from '../../service/wordDrawService';
import { checkAndSaveImage } from '../../utils/saveImage';
import { shouldShowShareGuide } from '../../utils/shareGuide';
import { downloadPrint } from '../../utils/downloadPrint';
import { PAPER_SIZE } from '../../constants/colors';
import { getWordsSvgData } from '../../utils/getWordsSvgJson';
import { WORDS } from '../../constants/words';
@@ -108,6 +107,7 @@ Page({
{
inputWords: [],
words: updatedWords,
inputValue: '', // 同步清空输入框值
},
() => {
this.renderPracticeContent().catch(console.error);
@@ -143,11 +143,12 @@ Page({
// 3. 替换输入汉字（不是追加），合并已选择的汉字
const updatedWords = [...newInputChars, ...selectedWords];
// 4. 更新数据并提示
// 4. 更新数据并提示（同步更新 inputValue 保持一致）
this.setData(
{
inputWords: newInputChars,
words: updatedWords,
inputValue: text, // 同步输入框值
},
() => {
this.renderPracticeContent().catch(console.error);
@@ -436,32 +437,12 @@ Page({
return characterData;
},
/** 记录待下载状态（当需要分享引导时） */
pendingDownload: false,
// 下载打印练字贴
exportToPrint() {
if (!this.canvas) {
wx.showToast({ title: '请先生成练字贴', icon: 'none' });
return;
}
// 检查是否需要显示分享引导
if (shouldShowShareGuide()) {
this.setData({ showShareDialog: true });
return;
}
// 上报下载埋点
tracker.reportDownload('练字贴');
// 直接下载
checkAndSaveImage(this.canvas);
},
/** 关闭分享引导弹窗 */
onCloseShareDialog() {
this.setData({ showShareDialog: false });
async exportToPrint() {
await downloadPrint(this.canvas, {
errorToast: '请先生成练字贴',
trackerName: '练字贴',
});
},
// 分享功能
miniprogram/pages/copyBook/copyBook.wxml
+1 -1
View File
@@ -2,7 +2,7 @@
<view class="wrapper">
<text class="wrapper-title">自定义练字贴</text>
<view class="word-input-box">
<word-input bind:onConfirm="onConfirmInput" style="width: 100%;"/>
<word-input value="{{inputValue}}" bind:onConfirm="onConfirmInput" style="width: 100%;"/>
</view>
<view class="action-buttons-box">
miniprogram/pages/index/index.ts
+10 -22
View File
@@ -5,8 +5,7 @@ import {
IDrawService,
TemplateType,
} from '../../service/drawServiceFactory';
import { checkAndSaveImage } from '../../utils/saveImage';
import { shouldShowShareGuide } from '../../utils/shareGuide';
import { downloadPrint } from '../../utils/downloadPrint';
import tracker from '../../utils/tracker';
import { defaultShareConfig } from '../../config/config';
@@ -120,7 +119,7 @@ Page({
if (currentCardList.length > 0) {
this.drawService
.draw(currentCardList)
.catch((err) => {
.catch((err: any) => {
console.error('绘制失败:', err);
});
}
@@ -168,7 +167,7 @@ Page({
}
// 如果canvas已初始化且有内容，则绘制
if (this.drawService && updatedCardList!.length > 0) {
this.drawService.draw(updatedCardList!).catch((err) => {
this.drawService.draw(updatedCardList!).catch((err: any) => {
console.error('绘制失败:', err);
});
}
@@ -186,7 +185,7 @@ Page({
}
// 如果canvas已初始化且有内容，则绘制
if (this.drawService && currentCardList.length > 0) {
this.drawService.draw(currentCardList).catch((err) => {
this.drawService.draw(currentCardList).catch((err: any) => {
console.error('绘制失败:', err);
});
}
@@ -288,27 +287,16 @@ Page({
},
/** 下载打印 */
exportToPrint() {
async exportToPrint() {
if (!this.canvas || this.data.cardList.length <= 0) {
return;
}
// 检查是否需要显示分享引导
if (shouldShowShareGuide()) {
this.setData({ showShareDialog: true });
return;
}
// 上报下载埋点
tracker.reportDownload('涂色识字', this.data.selectedTemplate);
// 直接下载
checkAndSaveImage(this.canvas);
},
/** 关闭分享引导弹窗 */
onCloseShareDialog() {
this.setData({ showShareDialog: false });
await downloadPrint(this.canvas, {
errorToast: '请先生成涂色卡',
trackerName: '涂色识字',
trackerMode: this.data.selectedTemplate,
});
},
/** 分享成功回调（由组件触发） */
miniprogram/service/wordDrawService.ts
+128 -168
View File
@@ -2,120 +2,118 @@ import { BaseDrawService } from './baseDraw';
import { CharacterItem } from '../types/characterType';
/**
* 仅支持 M/L/Z 的简单 SVG 路径解析与绘制
* cnchar-data 坐标系配置
* 参考 hanzi-writer 的实现逻辑
* 字符数据的边界框：左上角 (0, -124)，右下角 (1024, 900)
*/
interface DrawSvgPathCommandsParams {
ctx: RenderingContext;
pathD: string;
offsetX: number;
offsetY: number;
const CHAR_BOUNDS = {
minX: 0,
minY: -124,
maxX: 1024,
maxY: 900,
};
const CHAR_WIDTH = CHAR_BOUNDS.maxX - CHAR_BOUNDS.minX; // 1024
const CHAR_HEIGHT = CHAR_BOUNDS.maxY - CHAR_BOUNDS.minY; // 1024
/**
* 计算缩放变换参数（模仿 cnchar.draw 的 getScalingTransform 函数）
* 用于将 1024x1024 坐标系的字符数据变换到目标画布尺寸
*/
interface ScalingTransform {
xOffset: number;
yOffset: number;
scale: number;
}
function drawSvgPathCommands({
ctx,
pathD,
offsetX,
offsetY,
scale,
}: DrawSvgPathCommandsParams) {
// console.log('drawSvgPathCommands 参数:', { pathD, offsetX, offsetY, scale });
function getScalingTransform(
width: number,
height: number,
padding: number,
): ScalingTransform {
// 计算可用空间
const availableWidth = width - 2 * padding;
const availableHeight = height - 2 * padding;
// 精度处理函数：避免浮点数精度问题（提高到6位小数精度，确保高精度）
const roundToPrecision = (num: number, precision: number = 6): number => {
return (
Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)
);
};
// 计算缩放比例（取较小的比例以确保字符完整显示）
const scaleX = availableWidth / CHAR_WIDTH;
const scaleY = availableHeight / CHAR_HEIGHT;
const scale = Math.min(scaleX, scaleY);
// 像素对齐函数：优化对齐策略，提升平滑度
// 对于Fill+Stroke模式，使用更精细的对齐策略，避免过度对齐导致的锯齿
// 对齐到0.5像素可以获得更好的平滑效果
const alignToPixel = (num: number): number => {
// 对齐到0.5像素，而不是整数像素，可以获得更平滑的线条
return Math.round(num * 2) / 2;
};
// 计算偏移量（居中显示）
const scaledWidth = CHAR_WIDTH * scale;
const scaledHeight = CHAR_HEIGHT * scale;
const centerX = padding + (availableWidth - scaledWidth) / 2;
const centerY = padding + (availableHeight - scaledHeight) / 2;
// 新的解析方法：按命令片段解析
// 使用正则表达式匹配从字母开头到下一个字母（或结尾）的片段
const commandRegex = /([MLZ])([^MLZ]*?)(?=[MLZ]|$)/g;
// 计算 xOffset 和 yOffset（考虑字符边界框的偏移）
const xOffset = -CHAR_BOUNDS.minX * scale + centerX;
const yOffset = -CHAR_BOUNDS.minY * scale + centerY;
return { xOffset, yOffset, scale };
}
/**
* SVG 路径解析与绘制（支持 M/L/Q/Z 命令）
* 参考 cnchar.draw 的实现，使用 Canvas transform 进行坐标变换
*/
interface DrawSvgPathParams {
ctx: RenderingContext;
pathD: string;
}
function drawSvgPath({ ctx, pathD }: DrawSvgPathParams) {
// 使用正则表达式匹配 SVG 路径命令
// 支持 M（moveTo）、L（lineTo）、Q（二次贝塞尔曲线）、Z（closePath）
const commandRegex = /([MLQZ])([^MLQZ]*?)(?=[MLQZ]|$)/gi;
const commands: Array<{ cmd: string; coords: string }> = [];
let match;
while ((match = commandRegex.exec(pathD)) !== null) {
const cmd = match[1];
const cmd = match[1].toUpperCase();
const coords = match[2].trim();
commands.push({ cmd, coords });
}
// console.log('解析的命令片段:', commands);
let commandCount = 0;
// 优化的坐标解析和绘制函数
const parseAndDrawCoords = (
coords: string,
cmd: string,
drawFunction: (x: number, y: number) => void,
) => {
// 更严格的坐标解析：支持负数和小数
const coordParts = coords
.split(/\s+/)
.filter((part) => part.trim() !== '');
if (coordParts.length >= 2) {
const x = parseFloat(coordParts[0]);
const y = parseFloat(coordParts[1]);
if (!isNaN(x) && !isNaN(y) && isFinite(x) && isFinite(y)) {
// 计算最终坐标：先进行高精度计算，再对齐到整数像素
// 使用高精度计算确保路径的准确性，然后对齐到像素避免亚像素渲染
const calculatedX = offsetX + x * scale;
const calculatedY = offsetY + y * scale;
const preciseX = roundToPrecision(calculatedX);
const preciseY = roundToPrecision(calculatedY);
const finalX = alignToPixel(preciseX);
const finalY = alignToPixel(preciseY);
// console.log(`${cmd}: 绘制到 (${finalX}, ${finalY}) [原始: (${x}, ${y})]`);
drawFunction(finalX, finalY);
} else {
console.warn(
`${cmd}: 坐标解析失败 - x=${x}, y=${y}, 原始坐标: "${coords}"`,
);
}
} else {
console.warn(
`${cmd}: 坐标数量不足，需要2个，实际${coordParts.length}个，原始: "${coords}"`,
);
}
};
// 命令处理映射表，提高可读性和可扩展性
const commandHandlers: Record<string, (coords: string) => void> = {
M: (coords) =>
parseAndDrawCoords(coords, 'M', (x, y) => ctx.moveTo(x, y)),
L: (coords) =>
parseAndDrawCoords(coords, 'L', (x, y) => ctx.lineTo(x, y)),
Z: () => {
// 关键修复：处理Z命令，闭合路径
ctx.closePath();
},
// 解析坐标的辅助函数
const parseCoords = (coords: string): number[] => {
return coords
.split(/[\s,]+/)
.filter((part) => part.trim() !== '')
.map((part) => parseFloat(part));
};
for (const { cmd, coords } of commands) {
commandCount++;
// console.log(`命令 ${commandCount}: ${cmd}, 坐标: "${coords}"`);
const coordValues = parseCoords(coords);
const handler = commandHandlers[cmd];
if (handler) {
handler(coords);
} else {
console.warn(`未知命令: ${cmd}`);
switch (cmd) {
case 'M':
if (coordValues.length >= 2) {
ctx.moveTo(coordValues[0], coordValues[1]);
}
break;
case 'L':
if (coordValues.length >= 2) {
ctx.lineTo(coordValues[0], coordValues[1]);
}
break;
case 'Q':
// 二次贝塞尔曲线：Q cpx cpy x y
if (coordValues.length >= 4) {
ctx.quadraticCurveTo(
coordValues[0],
coordValues[1],
coordValues[2],
coordValues[3],
);
}
break;
case 'Z':
ctx.closePath();
break;
default:
console.warn(`未知的 SVG 路径命令: ${cmd}`);
}
}
// console.log(`总共处理了 ${commandCount} 个命令`);
}
interface DrawStrokesParams {
@@ -130,6 +128,10 @@ interface DrawStrokesParams {
lineWidth: number;
}
/**
* 绘制笔画（参考 cnchar.draw 的实现方式）
* 使用 Canvas transform 进行坐标变换，支持 1024x1024 坐标系
*/
function drawStrokes({
ctx,
strokes,
@@ -137,93 +139,51 @@ function drawStrokes({
offsetY,
size,
uptoInclusive,
fillStyle, // 填充颜色，用于 Fill + Stroke 模式
strokeStyle, // 描边颜色，用于绘制笔画
lineWidth, // 线条宽度，控制笔画粗细
fillStyle,
strokeStyle: _strokeStyle, // 保留接口兼容性，cnchar 模式只使用 fill
lineWidth: _lineWidth, // 保留接口兼容性，cnchar 模式只使用 fill
}: DrawStrokesParams) {
// 设置 Canvas 绘制质量（关键优化：提升线条流畅度）
// 抑制未使用变量警告
void _strokeStyle;
void _lineWidth;
// 设置 Canvas 绘制质量
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high'; // 高质量平滑
ctx.imageSmoothingQuality = 'high';
// 设置路径绘制属性（关键：这些设置直接影响笔画粗细和流畅度）
// 注意：不使用 save/restore，与测试页面保持一致，避免状态管理问题
ctx.lineCap = 'round'; // 圆角端点，使笔画末端更自然
ctx.lineJoin = 'round'; // 圆角连接，使转折处更平滑
ctx.miterLimit = 10; // 斜接限制
// 优化渲染策略：使用 Fill + Stroke 模式
// 先 fill 填充内部，再 stroke 描边，stroke 宽度略小，避免双重渲染导致的毛糙
// 这样可以获得自然的笔画粗细，同时保持流畅度
// 模板中使用 54x54 的视窗尺寸
const viewBoxSize = 54;
// 设置路径绘制属性
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.miterLimit = 10;
// 添加内边距：在田字格四周预留空间，避免笔画贴边
const padding = size * 0.1; // 内边距为田字格大小的10%
const contentSize = size - padding * 2; // 实际绘制区域大小
const padding = size * 0.1;
// 优化缩放比例：使用更精确的缩放，不进行四舍五入，保持原始精度
const contentScale = contentSize / viewBoxSize;
// 计算内容区域的起始位置（居中），优化对齐策略提升平滑度
const rawOffsetX = offsetX + padding;
const rawOffsetY = offsetY + padding;
// 对齐到0.5像素，而不是整数像素，可以获得更平滑的渲染效果
const contentOffsetX = Math.round(rawOffsetX * 2) / 2;
const contentOffsetY = Math.round(rawOffsetY * 2) / 2;
// console.log('drawStrokes 参数:', {
// strokesCount: strokes.length,
// uptoInclusive,
// offsetX,
// offsetY,
// size,
// padding,
// contentSize,
// contentOffsetX,
// contentOffsetY,
// originalScale: scale,
// contentScale,
// fillStyle,
// strokeStyle,
// lineWidth
// });
// 计算缩放变换参数（参考 cnchar.draw 的 getScalingTransform）
const transform = getScalingTransform(size, size, padding);
for (let s = 0; s <= uptoInclusive && s < strokes.length; s++) {
// console.log(`绘制第 ${s} 个笔画:`, strokes[s]);
ctx.save();
// 应用变换矩阵（参考 cnchar.draw 的方式）
// 1. 先平移到目标位置
// 2. 再应用 Y 轴翻转和缩放
// transform: translate(xOffset, height - yOffset) scale(scale, -scale)
ctx.translate(
offsetX + transform.xOffset,
offsetY + size - transform.yOffset,
);
ctx.scale(transform.scale, -transform.scale);
// 绘制路径
ctx.beginPath();
drawSvgPath({ ctx, pathD: strokes[s] });
// 记录路径是否包含Z命令（已闭合）
const hasClosePath = strokes[s].includes('Z');
drawSvgPathCommands({
ctx,
pathD: strokes[s],
offsetX: contentOffsetX,
offsetY: contentOffsetY,
scale: contentScale,
});
// 优化渲染策略：使用 Fill + Stroke 模式
// 先 fill 填充内部，再 stroke 描边，stroke 宽度略小，避免双重渲染导致的毛糙
// 如果路径没有Z命令，手动闭合（fill需要闭合路径）
if (!hasClosePath) {
ctx.closePath();
}
// 1. 先填充内部
// 使用 fill 绘制（cnchar 只使用 fill）
ctx.fillStyle = fillStyle;
ctx.fill();
// 2. 再描边（stroke宽度设为fill视觉宽度的70%，避免明显的双重渲染）
// 与测试页面保持一致：使用相同的stroke宽度计算方式
ctx.strokeStyle = strokeStyle;
const strokeWidth = Math.max(1.5, lineWidth * 0.7);
ctx.lineWidth = strokeWidth;
ctx.stroke();
ctx.restore();
}
// 注意：不使用 restore，与测试页面保持一致
}
interface DrawTianZiGridParams {
@@ -580,7 +540,7 @@ class WordDrawService extends BaseDrawService {
uptoInclusive: strokes.length - 1,
fillStyle: 'rgb(85,85,85)', // 深灰色填充（#555555），比#666666更深一点
strokeStyle: 'rgb(85,85,85)', // 深灰色描边
lineWidth: 0.6, // Fill + Stroke 模式，线条宽度调小一点（逻辑像素）
lineWidth: 1.2, // Fill + Stroke 模式，线条宽度调小一点（逻辑像素）
});
}
@@ -626,7 +586,7 @@ class WordDrawService extends BaseDrawService {
uptoInclusive: strokeIndex,
fillStyle: 'rgb(170,170,170)', // 浅灰色填充（#aaaaaa），参考练字贴颜色
strokeStyle: 'rgb(170,170,170)', // 浅灰色描边
lineWidth: 0.6, // Fill + Stroke 模式，线条宽度调小一点（逻辑像素）
lineWidth: 1.2, // Fill + Stroke 模式，线条宽度调小一点（逻辑像素）
});
}
miniprogram/utils/downloadPrint.ts
+254
View File
@@ -0,0 +1,254 @@
/**
* 下载打印通用工具
* 支持下载次数限制和激励广告
*/
import { checkAndSaveImage } from './saveImage';
import tracker from './tracker';
// 存储键名
const STORAGE_KEY_DOWNLOAD_COUNT = 'downloadCount';
const STORAGE_KEY_DOWNLOAD_DATE = 'downloadDate';
const STORAGE_KEY_WATCHED_AD_TODAY = 'watchedAdToday';
// 免费下载次数限制
const FREE_DOWNLOAD_LIMIT = 5;
// 激励视频广告单元ID
const AD_UNIT_ID = 'adunit-eff5626f8b68c2e0';
/**
* 获取今天的日期字符串（YYYY-MM-DD格式）
*/
function getTodayDateString(): string {
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
/**
* 获取今日下载次数
*/
function getTodayDownloadCount(): number {
const today = getTodayDateString();
const downloadDate = wx.getStorageSync(STORAGE_KEY_DOWNLOAD_DATE);
// 如果不是今天，重置计数
if (downloadDate !== today) {
wx.setStorageSync(STORAGE_KEY_DOWNLOAD_COUNT, 0);
wx.setStorageSync(STORAGE_KEY_DOWNLOAD_DATE, today);
wx.setStorageSync(STORAGE_KEY_WATCHED_AD_TODAY, false);
return 0;
}
return wx.getStorageSync(STORAGE_KEY_DOWNLOAD_COUNT) || 0;
}
/**
* 增加今日下载次数
*/
function incrementDownloadCount(): void {
const today = getTodayDateString();
const count = getTodayDownloadCount();
wx.setStorageSync(STORAGE_KEY_DOWNLOAD_COUNT, count + 1);
wx.setStorageSync(STORAGE_KEY_DOWNLOAD_DATE, today);
}
/**
* 检查今日是否已观看广告
*/
function hasWatchedAdToday(): boolean {
const today = getTodayDateString();
const watchedDate = wx.getStorageSync(STORAGE_KEY_WATCHED_AD_TODAY);
return watchedDate === today;
}
/**
* 标记今日已观看广告
*/
function markWatchedAdToday(): void {
const today = getTodayDateString();
wx.setStorageSync(STORAGE_KEY_WATCHED_AD_TODAY, today);
}
/**
* 创建激励视频广告实例
*/
function createVideoAd() {
if (!wx.createRewardedVideoAd) {
return null;
}
const videoAd = wx.createRewardedVideoAd({
adUnitId: AD_UNIT_ID,
});
videoAd.onLoad(() => {
console.log('激励视频广告加载成功');
});
videoAd.onError((err) => {
console.error('激励视频广告加载失败', err);
});
return videoAd;
}
/**
* 显示激励视频广告
*/
function showVideoAd(): Promise<boolean> {
return new Promise((resolve) => {
const videoAd = createVideoAd();
if (!videoAd) {
wx.showToast({
title: '当前环境不支持激励广告',
icon: 'none',
});
resolve(false);
return;
}
// 显示 loading
wx.showLoading({
title: '加载中...',
mask: true,
});
// 监听广告关闭事件
videoAd.onClose((res) => {
// 隐藏 loading（如果还在显示）
wx.hideLoading();
if (res && res.isEnded) {
// 用户完整观看了广告
markWatchedAdToday();
resolve(true);
} else {
// 用户提前关闭了广告
resolve(false);
}
});
// 显示广告
videoAd
.show()
.then(() => {
// 广告显示成功，隐藏 loading
wx.hideLoading();
})
.catch(() => {
// 失败重试，保持 loading 显示
videoAd
.load()
.then(() => {
// 加载成功，继续显示广告
return videoAd.show();
})
.then(() => {
// 广告显示成功，隐藏 loading
wx.hideLoading();
})
.catch((err) => {
// 最终失败，隐藏 loading 并提示
wx.hideLoading();
console.error('激励视频广告显示失败', err);
wx.showToast({
title: '广告加载失败，请稍后重试',
icon: 'none',
});
resolve(false);
});
});
});
}
/**
* 执行下载
*/
function doDownload(
canvas: Canvas,
options: {
successToast?: string;
errorToast?: string;
trackerName?: string;
trackerMode?: string;
},
) {
// 上报下载埋点
if (options.trackerName) {
if (options.trackerMode) {
tracker.reportDownload(options.trackerName, options.trackerMode);
} else {
tracker.reportDownload(options.trackerName);
}
}
// 增加下载次数
incrementDownloadCount();
// 执行下载（checkAndSaveImage 内部已有成功提示，这里不需要额外处理）
checkAndSaveImage(canvas);
}
/**
* 下载打印（通用方法）
* @param canvas Canvas 实例
* @param options 配置选项
* @param options.successToast 成功提示（可选，默认：'保存成功，请在相册中查看'）
* @param options.errorToast 错误提示（可选，默认：'请先生成内容'）
* @param options.trackerName 埋点名称（可选）
* @param options.trackerMode 埋点模式（可选）
*/
export async function downloadPrint(
canvas: Canvas | null,
options: {
successToast?: string;
errorToast?: string;
trackerName?: string;
trackerMode?: string;
} = {},
): Promise<void> {
// 检查 canvas 是否存在
if (!canvas) {
wx.showToast({
title: options.errorToast || '请先生成内容',
icon: 'none',
});
return;
}
// 获取今日下载次数
const downloadCount = getTodayDownloadCount();
const hasWatchedAd = hasWatchedAdToday();
// 如果已观看广告，直接下载
if (hasWatchedAd) {
doDownload(canvas, options);
return;
}
// 如果未超过免费次数，直接下载
if (downloadCount < FREE_DOWNLOAD_LIMIT) {
doDownload(canvas, options);
return;
}
// 超过免费次数，需要观看广告
const watched = await showVideoAd();
if (watched) {
// 观看完成，可以下载
doDownload(canvas, options);
}
/* else {
// 未观看完成，提示用户
wx.showToast({
title: '需要完整观看广告才能下载',
icon: 'none',
duration: 2000,
});
} */
}
miniprogram/utils/getWordsSvgJson.ts
+31 -12
View File
@@ -8,7 +8,8 @@ const CACHE_CONFIG = {
expireDays: 7, // 缓存过期天数
// url: 'https://cdn.joeyone.cn/doodle/words-svg-all.json' // 远程数据地址
// url: 'https://cdn.joeyone.cn/doodle/words-svg-3000.json' // 远程数据地址
url: 'https://cdn.joeyone.cn/doodle/char_svg_3500.json' // 远程数据地址
// url: 'https://cdn.joeyone.cn/doodle/char_svg_3500.json' // 远程数据地址
url: 'https://cdn.joeyone.cn/doodle/char_common_stroke.json', // 远程数据地址
};
/**
@@ -28,7 +29,7 @@ interface CacheData {
function isCacheExpired(timestamp: number): boolean {
const now = Date.now();
const expireTime = CACHE_CONFIG.expireDays * 24 * 60 * 60 * 1000; // 7天的毫秒数
return (now - timestamp) > expireTime;
return now - timestamp > expireTime;
}
/**
@@ -52,7 +53,10 @@ function getCacheData(): CacheData | null {
return null;
}
console.log('使用本地缓存的SVG汉字数据，缓存时间:', new Date(cacheData.timestamp).toLocaleString());
console.log(
'使用本地缓存的SVG汉字数据，缓存时间:',
new Date(cacheData.timestamp).toLocaleString(),
);
return cacheData;
} catch (error) {
console.error('读取SVG汉字数据缓存失败:', error);
@@ -69,7 +73,7 @@ function saveCacheData(data: Record<string, string[]>): void {
const cacheData: CacheData = {
data,
timestamp: Date.now(),
version: '1.0' // 可以用于后续版本控制
version: '1.0', // 可以用于后续版本控制
};
wx.setStorageSync(CACHE_CONFIG.key, JSON.stringify(cacheData));
@@ -91,13 +95,17 @@ async function fetchRemoteData(): Promise<Record<string, string[]>> {
{
timeout: 15000, // 15秒超时
header: {
'Accept': 'application/json',
'Cache-Control': 'no-cache'
}
}
Accept: 'application/json',
'Cache-Control': 'no-cache',
},
},
);
console.log('远程SVG汉字数据获取成功，共', Object.keys(svgWordsData).length, '个汉字');
console.log(
'远程SVG汉字数据获取成功，共',
Object.keys(svgWordsData).length,
'个汉字',
);
return svgWordsData;
}
@@ -143,7 +151,12 @@ export function clearWordsSvgCache(): void {
* 获取缓存信息
* @returns 缓存信息对象
*/
export function getCacheInfo(): { exists: boolean; timestamp?: number; isExpired?: boolean; daysLeft?: number } {
export function getCacheInfo(): {
exists: boolean;
timestamp?: number;
isExpired?: boolean;
daysLeft?: number;
} {
try {
const cacheStr = wx.getStorageSync(CACHE_CONFIG.key);
if (!cacheStr) {
@@ -152,13 +165,19 @@ export function getCacheInfo(): { exists: boolean; timestamp?: number; isExpired
const cacheData: CacheData = JSON.parse(cacheStr);
const isExpired = isCacheExpired(cacheData.timestamp);
const daysLeft = isExpired ? 0 : Math.ceil((CACHE_CONFIG.expireDays * 24 * 60 * 60 * 1000 - (Date.now() - cacheData.timestamp)) / (24 * 60 * 60 * 1000));
const daysLeft = isExpired
? 0
: Math.ceil(
(CACHE_CONFIG.expireDays * 24 * 60 * 60 * 1000 -
(Date.now() - cacheData.timestamp)) /
(24 * 60 * 60 * 1000),
);
return {
exists: true,
timestamp: cacheData.timestamp,
isExpired,
daysLeft
daysLeft,
};
} catch (error) {
console.error('获取缓存信息失败:', error);
miniprogram/utils/saveImage.ts
+1 -4
View File
@@ -1,5 +1,3 @@
import { recordDownloadSuccess } from './shareGuide';
const doSaveImage = (canvas: Canvas) => {
wx.canvasToTempFilePath({
canvas: canvas,
@@ -9,8 +7,7 @@ const doSaveImage = (canvas: Canvas) => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
// 记录下载成功
recordDownloadSuccess();
// 下载成功提示（下载次数记录在 downloadPrint.ts 中处理）
wx.showToast({
title: '保存成功，请在相册中查看',
icon: 'success',