nwjs（nodejs）寫桌面應用（少兒英語學習項目經驗總結）

lovXin 發(fā)布于2019-08-21 10:48 / 2390人閱讀

摘要：項目背景最近上三年級兒子的英語老是記不住單詞，而他們又在上科學課，老師讓練打字。打字和英語學習都沒太適合小家伙的實際情況，因此就花了一個周末寫下了這個項目。題庫為文件，存在指定目錄中。運行方法全局安裝克隆源代碼安裝依賴庫運行項目

項目背景

最近上三年級兒子的英語老是記不住單詞，而他們又在上科學課，老師讓練打字。打字和英語學習都沒太適合小家伙的實際情況，因此就花了一個周末寫下了這個項目。

實現(xiàn)功能

兩種模式：隨機模式，從詞庫里隨機抽取題目，會重復，一直運行；順序模式，將詞庫打亂后成一個隊列，依次出題，不會重復，一遍完成，給出統(tǒng)計結果。

兩種輸入判斷方式：單詞或短語方式，回車提交；打字模式，單字母輸入時，如果和結果相符，自動提交。

題庫為json文件，存在指定目錄中。

暫時實現(xiàn)了上面這些功能，至于題庫單詞配音、選擇裝載、錯題存儲、單詞權重等想到的功能，先列在此，要是小家伙能用起來再說吧。

開發(fā)中遇到的問題

radio單選框在動態(tài)設置時，使用attr就第一次能生效，應該用prop方法。

讀目錄下所有文件，要排除系統(tǒng)生成的隱藏文件，如蘋果下的.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云服務器云服務器經驗總結服務器遷移經驗總結少兒英語少兒機器人學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86214.html

輕量級桌面應用開發(fā)的捷徑——nw.js

摘要：下面這張解決了怎么用完成任務的問題，最后，開發(fā)者怕你懷疑的強大，又提供了幾個和許多成功的案例來打消我們的顧慮。拿下助攻決定用之后，就開始補充相應的知識啦。來欣賞一下一些應用的截圖吧，不得不說開發(fā)出的應用一點不比原生的丑陋啊。博客地址每個程序員都希望用自己喜歡的語言，自己喜歡的平臺、工具，寫自己喜歡的程序。于是我們會看到有人在Win下用Visual Studio愉快地coding，也...

pumpkin9 2019-08-21 10:43 評論0 收藏0
NW.js+Enigma Virtual Box+node-webkit打包Hybrid桌面應用其實

摘要：在很多原因下，我們?yōu)榱擞峡蛻艋蛘咂渌脑颍枰诒旧泶a或框架不能兼容的瀏覽器下運行項目，怎么辦呢，我們將其打包為桌面應用不失為一種好。如果圖標有變化，大功告成我的沒有換圖標，所以依然是的圖標 WHY 在很多原因下，我們?yōu)榱擞峡蛻艋蛘咂渌脑颍枰诒旧泶a或框架不能兼容的瀏覽器下運行項目，怎么辦呢，我們將其打包為桌面應用不失為一種好idea。nw.js是node-webkit...

microcosm1994 2019-08-20 17:31 評論0 收藏0
兒子著迷游戲，程序員父親辭職創(chuàng)業(yè)帶火了少兒編程培訓

摘要：歲的余宙華是少兒編程培訓機構阿兒法營的創(chuàng)辦者，也是這個培訓機構課程體系的主要研發(fā)者。如今少兒編程培訓行業(yè)正越來越熱，最近幾年國內的少兒編程培訓機構雨后春筍般一個個地冒出來。這時，余宙華意識到是他作為父親出手的時候了。什么是計算機的靈魂？余宙華用孩子式的語氣問長桌旁坐著的小女孩。小女孩認真地想了半天，有些靦腆地猶豫著給出了余宙華期待的答案：程序。 2018年7月，我在阿兒法營海淀人大...

kidsamong 2019-06-26 18:33 評論0 收藏0
[譯] 在 Twitch 代碼直播一年的總結

摘要：寫在前面一個寫硬件的開發(fā)妹子在游戲直播平臺上直播寫代碼了一年后的總結，這篇文章非常輕快和可愛，跟妹子的顏值一樣，讀來也很輕松閑適。我非常緊張，并且在直播前一晚我熬了一整夜來演練要直播的內容。這也會讓直播質量更進一步。寫在前面：一個寫硬件的開發(fā)妹子在游戲直播平臺 Twitch 上直播寫代碼了一年后的總結，這篇文章非常輕快和可愛，跟妹子的顏值一樣，讀來也很輕松閑適。決定翻譯這篇，也是...

callmewhy 2019-08-21 16:24 評論0 收藏0