用Vue3写了一个儿童学习汉字和加减法的网页工具

前言

现在学习汉字的app都要会员收费, 就给女儿弄了一个免费的学习汉字的网页, 后又加了学习10以内或者100以内加减法的小工具。

使用技术

• 前端：vue3、hanzi-writer
• 没有打包， 直接就是传统html+js+css编写
• 纯前端离线网页, 本地就能打开
• 可以部署到服务器上, 平板或者手机打开页面学习

核心技术点

文字阅读

• 使用现代浏览器的语音朗读功能，实现文字阅读

// 朗读汉字
function speakText(text, times) {
	if (window.speechSynthesis) {
		times = times || 1;
		const utterance = new SpeechSynthesisUtterance(new Array(times).fill(text).join(", 。 "));
		utterance.lang = "zh-CN";
		utterance.rate = 0.7; // 语速（0.1-10，默认1）
		utterance.pitch = 1; // 音高（0-2，默认1）
		// volume：音量（0-1，默认1）
		speechSynthesis.speak(utterance);
	} else {
		alert("您的浏览器不支持语音合成功能，推荐使用谷歌浏览器。");
	}
}
// 播放闯关提示音, 音频事先录好了的, 放到指定文件夹, 播放就行了
function playAudio(type) {
  return new Audio(`./audio/${type}.mp3`).play()
}

汉字笔画书写

• 使用了开源框架hanzi-writer
• 汉字笔画书写需要用到汉字的svg, 数据来源于hanzi-writer-data

// 汉字笔画动画播放
function aniHanzi(target, val, size) {
  target.innerHTML = ''
  size = size || 150
  let writer = HanziWriter.create(target, val, {
    charDataLoader: myCharDataLoader,
    width: 150,
    height: 150,
    showCharacter: false,
    padding: 5,
    strokeAnimationSpeed: 1, // 动画速度
    delayBetweenStrokes: 500, // 每个笔画之间的间隔时间 ms
  });
  writer.loopCharacterAnimation();
}
// 汉字书写
function writeHanzi(target, val, size, callback) {
  target.innerHTML = ''
  size = size || 150
  let writer = HanziWriter.create(target, val, {
    charDataLoader: myCharDataLoader,
    width: 150,
    height: 150,
    showCharacter: false,
    showHintAfterMisses: 2,
    padding: 5,
  });
  writer.quiz({
    onCorrectStroke: function(strokeData) {
      console.log(strokeData);
      callback && callback(strokeData, strokeData.strokeNum + 1, strokeData.strokeNum + 1 + strokeData.strokesRemaining);
    },
    // onComplete: function(summaryData) {}
  });
}
// 汉字笔画数据太大, 印象页面加载速度, 在页面加载完成之后再加载数据文件
function loadScripts() {
  const script = document.createElement('script')
  script.src = 'js/lib/dataWriter.js'
  document.body.appendChild(script)
}

背景音乐

• 页面隐藏或者切屏到其他应用, 背景音乐就暂停, 切回页面就继续播放

document.addEventListener("visibilitychange", () => {
	if (document.hidden || document.visibilityState === 'hidden') {
		if (this.bgPlay && this.hanziShow) this.playBg()
	} else {
		if (this.bgPlay && this.hanziShow) this.playBg(true)
	}
});

源码地址

• 源码和程序截图详见github.com/dhjz/hanzi-…
• 页面效果图见appimg目录
• 
• 
• 
• 
•