nwjs（nodejs）写桌面应用（少儿英语学习项目经验总结）

lovXin 发布于2019-08-21 10:48 / 2364人阅读

摘要：项目背景最近上三年级儿子的英语老是记不住单词，而他们又在上科学课，老师让练打字。打字和英语学习都没太适合小家伙的实际情况，因此就花了一个周末写下了这个项目。题库为文件，存在指定目录中。运行方法全局安装克隆源代码安装依赖库运行项目

项目背景

最近上三年级儿子的英语老是记不住单词，而他们又在上科学课，老师让练打字。打字和英语学习都没太适合小家伙的实际情况，因此就花了一个周末写下了这个项目。

实现功能

两种模式：随机模式，从词库里随机抽取题目，会重复，一直运行；顺序模式，将词库打乱后成一个队列，依次出题，不会重复，一遍完成，给出统计结果。

两种输入判断方式：单词或短语方式，回车提交；打字模式，单字母输入时，如果和结果相符，自动提交。

题库为json文件，存在指定目录中。

暂时实现了上面这些功能，至于题库单词配音、选择装载、错题存储、单词权重等想到的功能，先列在此，要是小家伙能用起来再说吧。

开发中遇到的问题

radio单选框在动态设置时，使用attr就第一次能生效，应该用prop方法。

读目录下所有文件，要排除系统生成的隐藏文件，如苹果下的.DS_Store。

打字时，要判断完马上清除input框的文字，应该用onkeyup事件，不能用onkeydown。

keyCode取得的字母ASIIC码是大写字母的。

关键源码说明 题库的读入与题目队列的初始化

题库为指定目录下所有json文件，使用lodash辅助处理（开始用的underscore）;题目队列生成时就随机打乱，为简化后面的操作。

var files = fs.readdirSync("./json");
    for(var k = 0; k < files.length; k++){
        if(__.endsWith(files[k],".json"))
            __.extend(lib, JSON.parse(fs.readFileSync("./json/" + files[k])));
    }
    //console.dir(lib);
    var keys = Object.keys(lib);
    for( var i = 0; i < keys.length; i++){
        if(problems.indexOf(lib[keys[i]]) < 0){
            problems.splice(__.random(problems.length-1),0,lib[keys[i]]);
        }
    }
    //console.dir(problems);

keyUp事件处理

打字练习库是a-z的一个键与值同等的对象，输入一个字母时，若与题目相等，则响应，开始我用的onkeydown，此时从界面取值是取不到的，所以写成了下面这个模式，想来改用onkeyup后是不是不用这样麻烦了，有空再测试一下。

function keyUp(e) {
    var ev= window.event||e;
    if (ev.keyCode == 13 && $("#inputInfo").val().trim().length > 0) {
        answerCommit();
    }else if(ev.keyCode == $("#problem").val().toUpperCase().charCodeAt()){
        answerCommit(ev.keyCode);
    }
}

答案提交处理

模拟了函数重载，根据有无参数，分别对打字练习和单词两种方式进行数据预处理。

function answerCommit(){
    var answer,problem;
    if(arguments.length == 0){
        answer = lib[$("#inputInfo").val().trim()];
        problem = $("#problem").val();
    }
    else if(arguments.length == 1){
        answer = arguments[0];
        problem = $("#problem").val().toUpperCase().charCodeAt();
    }
    if(answer==problem){

源代码

源码托管在开源中国，有兴趣的同学可以过去拍砖，呵呵。

https://git.oschina.net/zhoutk/ilearn.git

运行方法 全局安装nw.js

npm install nw -g

克隆源代码

git clone https://git.oschina.net/zhoutk/ilearn.git

安装依赖库

cd ilearn & npm install

运行项目

nw

GPU云服务器云服务器经验总结服务器迁移经验总结少儿英语少儿机器人学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86214.html

轻量级桌面应用开发的捷径——nw.js

摘要：下面这张解决了怎么用完成任务的问题，最后，开发者怕你怀疑的强大，又提供了几个和许多成功的案例来打消我们的顾虑。拿下助攻决定用之后，就开始补充相应的知识啦。来欣赏一下一些应用的截图吧，不得不说开发出的应用一点不比原生的丑陋啊。博客地址每个程序员都希望用自己喜欢的语言，自己喜欢的平台、工具，写自己喜欢的程序。于是我们会看到有人在Win下用Visual Studio愉快地coding，也...

pumpkin9 2019-08-21 10:43 评论0 收藏0
NW.js+Enigma Virtual Box+node-webkit打包Hybrid桌面应用其实

摘要：在很多原因下，我们为了迎合客户或者其他的原因，需要在本身代码或框架不能兼容的浏览器下运行项目，怎么办呢，我们将其打包为桌面应用不失为一种好。如果图标有变化，大功告成我的没有换图标，所以依然是的图标 WHY 在很多原因下，我们为了迎合客户或者其他的原因，需要在本身代码或框架不能兼容的浏览器下运行项目，怎么办呢，我们将其打包为桌面应用不失为一种好idea。nw.js是node-webkit...

microcosm1994 2019-08-20 17:31 评论0 收藏0
儿子着迷游戏，程序员父亲辞职创业带火了少儿编程培训

摘要：岁的余宙华是少儿编程培训机构阿儿法营的创办者，也是这个培训机构课程体系的主要研发者。如今少儿编程培训行业正越来越热，最近几年国内的少儿编程培训机构雨后春笋般一个个地冒出来。这时，余宙华意识到是他作为父亲出手的时候了。什么是计算机的灵魂？余宙华用孩子式的语气问长桌旁坐着的小女孩。小女孩认真地想了半天，有些腼腆地犹豫着给出了余宙华期待的答案：程序。 2018年7月，我在阿儿法营海淀人大...

kidsamong 2019-06-26 18:33 评论0 收藏0
[译] 在 Twitch 代码直播一年的总结

摘要：写在前面一个写硬件的开发妹子在游戏直播平台上直播写代码了一年后的总结，这篇文章非常轻快和可爱，跟妹子的颜值一样，读来也很轻松闲适。我非常紧张，并且在直播前一晚我熬了一整夜来演练要直播的内容。这也会让直播质量更进一步。写在前面：一个写硬件的开发妹子在游戏直播平台 Twitch 上直播写代码了一年后的总结，这篇文章非常轻快和可爱，跟妹子的颜值一样，读来也很轻松闲适。决定翻译这篇，也是...

callmewhy 2019-08-21 16:24 评论0 收藏0