基于微信小程序平台的“鱼儿默背”设计与实现

收稿日期：２０２００８２９ 修回日期：２０２００９０２作者简介：杨鑫，南京晓庄学院信息工程学院工程师，研究方向：软件工程及软件测试．Ｅ ｍａｉｌ：ｅｖａｒｏｓｅ＠１６３．ｃｏｍ２０２０年１１月第６期南京晓庄学院学报ＪＯＵＲＮＡＬＯＦＮＡＮＪＩＮＧＸＩＡＯＺＨＵＡＮＧＵＮＩＶＥＲＳＩＴＹＮｏｖ．２０２０Ｎｏ．６

基于微信小程序平台的“鱼儿默背”设计与实现

杨　鑫，黄太钠，伍云豪，徐可欣，张前威（南京晓庄学院信息工程学院，江苏南京２１１１７１）

摘　要：背诵和默写是学习过程中不可缺少的重要环节，然而目前市场上缺少适用的应用软件，还需要人工确认背默结果的正确性，这往往耗费学生和家长大量时间和精力．基于微信小程序平台，微信ＯＣＲ识别、同声传译等技术，开发了“鱼儿背默”应用，旨在协助学生和家长有效完成背书和默写任务．家长可以提前布置背书、默写任务，实时查看孩子的学习进度和结果；孩子独立完成背默任务，提交后系统会检查完成情况———标注出存在的问题并给予评价，从而提升孩子学习效率，减轻家长陪读负担．关键词：鱼儿默背；微信小程序；ＯＣＲ识别；同声传译中图分类号：ＴＰ３１１．５６ 文献标识码：Ａ 文章编号：１００９７９０２（２０２０）

０６００６３０６０　

引言

背诵和默写是常见的学习任务，但是这个过程需要不断纠错和确认，孩子独立完成的效率不高，同时，应用市场上也缺少相应的程序，需要家长投入大量的时间和精力陪同完成．微信小程序具有“无需下载，即用即走”的优势，随着微信应用的普及和微信生态开发技术的完善，微信小程序已广泛被使用，使我们的学习、生活更为便捷［１］．目前应用市场上小猿搜题、网易有道词典、爱作业等热门学习ＡＰＰ没有针对背书默写的功能；而背书帮

手小程序、ＡＩ背书朗诵小程序、青松背单词等类似功能微信小程序功能不完善，不能具体识别出多字漏字问题，无法给予有效改进建议．“鱼儿背默”小程序应运而生．家长可以提前布置背书、默写的任务，孩子自行在支持微信的设备上（和家长同一微信账号登录）进行相应的学习，系统会给予实时的反馈，孩子可以反复练习不断优化结果．家长还可以实时查看孩子的完成情况，包括任务完成进度以及完成任务的质量．通过这样一款默背小程序既培养了孩子自主学习能力，又提高了学习效率，给家长减负．１　

总体方案和关键技术小程序开发采用微软官方提供的ＭＩＮＡ框架，数据库采用云数据库．小程序前端开发以微信原生组件和ＡＰＩ为主，顶部的导航使用自定义的导航组件Ｎａｖｉｇａｔｉｏｎ，通过ＷＸＭＬ构建交互界面，ＷＸＳＳ定义风格样式，ＪＳ处理前端逻辑．小程序后台开发采用支持异步特性的Ｎｏｄｅ．ｊｓ．前后端通过ＪＳＯＮ交互．系统主业务流如下：创建任务时，家长拍摄原文图片，系统将图片转换为文本，再设置完成时间，任务类型等信息，从而生成任务；孩子学习时，先通过语音转文本（背书场景下）或图片转文本（默写场景下），再将转换后的文本和任务目标进行文字对比，从而检查出多字、漏字、错别字等常见错误，并给予评价．其中有四个关键技术点：（１）图片裁剪：调用ＧｉｔＨｕｂ开源插件代码ｉｍａｇｅ ｃｒｏｐｐｅｒ（），可自由导出图片尺寸，支持旋转．系统在任务创建与默写模块使用．

—

３６—

（２）图片中文本识别：调用微信小程序开发平台提供的ＯＣＲ识别接口，通过云调用方式使用接口方法

ｏｐｅｎａｐｉ．ｏｃｒ．ｐｒｉｎｔｅｄＴｅｘｔ（），支持通用印刷体ＯＣＲ识别．系统在任务创建与默写模块使用．

（３）语音识别：调用微信小程序开发平台提供的同声传译接口，通过云调用方式使用接口方法ｒｅｃｏｒ

ｄＲｅｃｏＭａｎａｇｅｒ（），提供语音实时流式识别．系统背书模块调用．

（４）文本处理：系统的核心模块．文本处理模块主要功能包括异常符号清洗，拼音字母删除，文本拼接，流式语音识别文本断句，文字对比．分别封装为对应的类方法，经过相互嵌套调用实现功能如下：

文章提取：上传图片由文字识别ＯＣＲ接口先获取识别内容，再对识别到的异常符号，拼音字母进行清洗，换行文字进行拼接．

背诵识别：调用微信同声传译组件ｇｅｔＲｅｃｏｒｄＲｅｃｏｇｎｉｔｉｏｎＭａｎａｇｅｒ（）中的ｔｒａｎｓｌａｔｅＴｅｘｔＡｃｔｉｏｎ（）方法，对流式识别内容进行断句，添加标点符号等处理．

文本比较：自主开发，将文章提取内容与孩子上传识别的背诵或默写内容分别进行文本拆分，字符逐一比对，记录多字漏字错字等情况．

２　系统设计与实现

“鱼儿默背”小程序的目标人群是中小学生与家长，家长可通过微信小程序为孩子发布背诵、默写任务，孩子在小程序上独立完成相应的学习，系统对完成质量给予自动评判．此外，家长能够对任务进行管理，可查看孩子学习记录与成绩统计，还可以针对薄弱的部分进行复习．总体功能模块设计如图１所示．

图１　“鱼儿默背”功能模块图

２．１　前端交互实现

家长打开小程序后可以进行任务管理，查看学习记录和学习量统计；学生进入小程序后可以查看并完成学习任务、查看学习记录和学习量统计，对应用例如图２所示．

图２　小程序用例图

前端采用亮眼的绿色为主色调，界面设计简洁直观，符合用户习惯，便于家长和孩子上手．系统主要的用户交互界面如图３所示．

—４６—

（ａ）首页 （ｂ）任务列表 （ｃ）任务详情 （ｄ）结果详情 （ｅ）成绩列表

图３　系统主要的用户交互界面

２．２　后端架构设计

后台的主要任务包括任务信息的管理和文本对比评分处理，架构设计如图４所示．

图４　后端架构图　图５　背／默结果评判流程图

以主业务流为例，创建任务时，家长在前端拍摄图片，后端将调用ＯＣＲ接口，将原文图片转为文本，并存入数据库．而当学生开始背默时，数据提交到文本预处理模块，先通过ＯＣＲ或同声传译接口将音频或图片转换为文本，再从数据库中读取任务原文进行文本比对，之后根据错误数量评分，最终系统检查结果会展示在前端并写入数据库．具体评判流程如图５所示．

２．３　文本比对评分模块实现

２．３．１　算法实现思路

本模块自主开发，也是系统的核心模块．主要任务是将输入文本（语音／图片转换后的文本）与任务原文进行对比，标注出问题并给予评价．其中，文本对比处理过程如图６所示，具体文本比对过程如下：（１）输入合法性校验：判断输入文字或原文是否为空，若为空则给出提示后结束，否则进入第二步．（２）字符串整体比较：判断原文和输入文字是否一致，是则错误数ｓｕｍ为０，结束比对，否则进入第三步．

（３）准备开始逐字比较：设置原文本开始遍历位置ｃ＝１，输入文本开始遍历位置ｂ＝１，错误数ｓｕｍ为

—５６—