基于 uni-app 和 Vue3 开发的汉字书写练习应用

前言

本文介绍了如何使用 uni-app + Vue3 + uview-plus 开发一个汉字书写练习应用。该应用支持笔画演示、书写练习、进度保存等功能，可以帮助用户学习汉字书写。

在线演示

演示地址: http://demo.xiyueta.com/case/web20250222/#/pagesa/xiehaizi/index
测试账号: demo
测试密码: 123456

使用效果

写汉字

技术栈

uni-app：跨平台开发框架
Vue3：前端框架
uview-plus：UI组件库
Canvas：绘图API
localStorage：本地存储

功能特点

笔画演示：动态展示汉字笔画书写过程
书写练习：支持手写输入和笔画匹配
关卡系统：支持多个汉字练习，自动保存进度
界面美观：采用现代化UI设计，交互流畅

开发过程

1. 项目初始化

首先创建 uni-app 项目并集成 uview-plus：

# 创建项目
vue create -p dcloudio/uni-preset-vue hanzi-practice# 安装依赖
npm install uview-plus

2. 页面结构设计

页面主要分为三个部分：

顶部导航：显示当前关卡和拼音
中间画布：用于展示和练习汉字
底部按钮：控制功能切换

3. 核心功能实现

3.1 笔画演示功能

使用 Canvas 绘制汉字，通过定时器实现动画效果：

const startStrokeAnimation = () => {let currentStroke = 0let currentPoint = 0const animateStroke = () => {if (!isAnimating.value) returnif (currentStroke < currentHanziData.strokes.length) {const median = currentHanziData.medians[currentStroke]if (currentPoint < median.length) {drawPartialStroke(currentStroke, currentPoint)currentPoint++animationTimer = setTimeout(animateStroke, animationSpeed)} else {// 完成当前笔画，进入下一个drawCompleteStroke(currentStroke)currentStroke++currentPoint = 0if (currentStroke < currentHanziData.strokes.length) {animationTimer = setTimeout(animateStroke, 500)}}}}animateStroke()
}

3.2 书写练习功能

实现手写输入和笔画匹配：

const checkUserStroke = () => {if (tempStroke.length < 2) returnconst currentMedian = currentHanziData.medians[currentStrokeIndex.value]const transformedUserStroke = transformUserStroke(tempStroke)const isMatch = simpleStrokeMatch(transformedUserStroke, currentMedian)if (isMatch) {currentStrokeIndex.value++if (currentStrokeIndex.value < currentHanziData.strokes.length) {drawHanziForPractice()} else {showCompleteCharacter()}}
}

3.3 进度保存功能

使用 localStorage 保存练习进度：

const STORAGE_KEY = 'CURRENT_LEVEL'const saveCurrentLevel = (level) => {try {uni.setStorageSync(STORAGE_KEY, level)} catch (e) {console.error('保存关卡失败:', e)}
}const restoreLevel = () => {try {const savedLevel = uni.getStorageSync(STORAGE_KEY)if (savedLevel) {currentLevel.value = parseInt(savedLevel)return true}} catch (e) {console.error('恢复关卡失败:', e)}return false
}

遇到的问题和解决方案

1. Canvas 坐标转换问题

问题：用户手写输入的坐标系与汉字数据的坐标系不一致。

解决方案：实现坐标转换函数：

const transformUserStroke = (userStroke) => {const centerX = canvasWidth.value / 2const centerY = canvasHeight.value / 2 - 35const size = Math.min(canvasWidth.value, canvasHeight.value) * 0.9return userStroke.map(point => ({x: ((point.x - centerX) / (size / 1024)) + 512,y: 1024 - (((point.y - centerY) / (size / 1024)) + 512)}))
}

2. 笔画动画控制问题

问题：动画状态管理复杂，需要处理暂停、继续等状态。

解决方案：使用 Vue3 的 ref 实现响应式状态管理：

const isAnimating = ref(false)const toggleStrokeAnimation = () => {if (isAnimating.value) {clearTimeout(animationTimer)animationTimer = nullisAnimating.value = falsedrawHanzi(currentHanziData)} else {isAnimating.value = truestartStrokeAnimation()}
}

3. 界面适配问题

问题：不同设备上画布大小和按钮布局需要适配。

解决方案：使用 rpx 单位和 flex 布局：

.hanzi-canvas {width: calc(100% - 60rpx);height: 60vh;margin: 30rpx auto;
}.bottom-section {width: calc(100% - 60rpx);margin: 0 auto;.control-buttons {display: flex;justify-content: space-between;gap: 30rpx;}
}

开发技巧

组件化设计：将功能模块拆分为独立组件，提高代码复用性
状态管理：使用 Vue3 的 Composition API 管理状态
性能优化：
- 使用 requestAnimationFrame 优化动画
- 合理使用 Canvas 缓存
- 防抖处理用户输入
用户体验：
- 添加过渡动画
- 提供清晰的视觉反馈
- 保存用户进度

总结

本项目展示了如何使用现代前端技术栈开发一个实用的教育类应用。通过合理的架构设计和性能优化，实现了流畅的用户体验。项目中的许多技术点和解决方案都可以应用到其他同类项目中。

参考资料

uni-app 官方文档
Vue3 官方文档
uview-plus 组件库
Canvas API 参考

作者信息

如果本文章对您有所帮助，欢迎交流和探讨技术问题。
QQ： 313801120
更多文章： www.xiyueta.com
希望能一起成长，共同探索更多开发技巧！