基于微信小程序的移動(dòng)學(xué)習(xí)平臺(tái)的設(shè)計(jì)開(kāi)發(fā)研究

張妮

摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)學(xué)習(xí)成為當(dāng)下重要的學(xué)習(xí)方式。該文首先分析了設(shè)計(jì)開(kāi)發(fā)高校移動(dòng)學(xué)習(xí)平臺(tái)的重要意義，并以微信小程序?yàn)殚_(kāi)發(fā)載體，總結(jié)了其技術(shù)優(yōu)勢(shì)，進(jìn)而對(duì)移動(dòng)學(xué)習(xí)平臺(tái)的功能架構(gòu)進(jìn)行了具體設(shè)計(jì)以及對(duì)微信小程序進(jìn)行開(kāi)發(fā)過(guò)程中的關(guān)鍵技術(shù)進(jìn)行了分析研究，為移動(dòng)互聯(lián)網(wǎng)環(huán)境下網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)的設(shè)計(jì)與開(kāi)發(fā)提供參考。

關(guān)鍵詞：微信小程序；移動(dòng)學(xué)習(xí)平臺(tái)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2019）04-0094-03

Abstract： With the development of mobile Internet， mobile learning has become an important way of learning. Firstly， this paper analyzes the significance of designing and developing mobile learning platform in colleges， and takes WeChat Mini Program as the carrier， summarizes its technical advantages， then designs the functional structure of mobile learning platform， and analyses the key technologies in the development process of WeChat Mini Program， so as to provide a reference for designing and developing network learning platform in mobile Internet environment.

Key words： WeChat Mini Program； mobile learning platform

隨著移動(dòng)互聯(lián)網(wǎng)的不斷發(fā)展，以智能手機(jī)為代表的便攜式移動(dòng)終端設(shè)備因其具有普及率高、易攜帶、功能完善、便于交流等特點(diǎn)而成為人們獲取生活資訊、查找學(xué)習(xí)資源、與人交流的重要工具，移動(dòng)學(xué)習(xí)也應(yīng)運(yùn)而生，并進(jìn)行得如火如荼。移動(dòng)學(xué)習(xí)是一種在移動(dòng)設(shè)備幫助下的能夠在任何時(shí)間、任何地點(diǎn)發(fā)生的學(xué)習(xí)，移動(dòng)學(xué)習(xí)所使用的移動(dòng)計(jì)算設(shè)備必須能夠有效地呈現(xiàn)學(xué)習(xí)內(nèi)容并且提供教師與學(xué)習(xí)者之間的雙向交流。移動(dòng)學(xué)習(xí)能夠突破傳統(tǒng)學(xué)習(xí)時(shí)間和空間的限制，在當(dāng)今及未來(lái)的學(xué)習(xí)方式中占據(jù)著重要的地位。同時(shí)，移動(dòng)學(xué)習(xí)需要強(qiáng)大的網(wǎng)絡(luò)資源作為支撐，因此設(shè)計(jì)和開(kāi)發(fā)承載網(wǎng)絡(luò)資源的移動(dòng)學(xué)習(xí)平臺(tái)具有重要的意義。

1 搭建移動(dòng)學(xué)習(xí)平臺(tái)是高校教育信息化發(fā)展的必然趨勢(shì)

1）彌補(bǔ)傳統(tǒng)網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)的不足。大多數(shù)的高校都有自己的網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)，但這些網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)主要依托PC端搭建，而用戶不可能隨時(shí)隨地的攜帶PC進(jìn)行學(xué)習(xí)，嚴(yán)重影響了平臺(tái)上資源的使用率。而在很多高校中，一大部分學(xué)生并不擁有個(gè)人電腦，學(xué)校也無(wú)法給學(xué)生提供充足的計(jì)算機(jī)進(jìn)行學(xué)習(xí)，這對(duì)他們的自主學(xué)習(xí)造成了極大的不便。另一方面，由于互聯(lián)網(wǎng)過(guò)于龐大，傳統(tǒng)的網(wǎng)絡(luò)課程設(shè)計(jì)相對(duì)獨(dú)立，一般采用不同的通訊協(xié)議和數(shù)據(jù)傳輸格式，給國(guó)家“十三五”教育信息化計(jì)劃中大力提倡的實(shí)現(xiàn)對(duì)知識(shí)資源的快速發(fā)現(xiàn)、合理整合和簡(jiǎn)單共享造成了困難。而移動(dòng)學(xué)習(xí)平臺(tái)主要基于手機(jī)進(jìn)行使用，經(jīng)調(diào)查，幾乎所有的高校學(xué)生人手一部智能手機(jī)，移動(dòng)學(xué)習(xí)平臺(tái)的搭建，為學(xué)生的學(xué)習(xí)提供了便利性。同時(shí)，移動(dòng)學(xué)習(xí)平臺(tái)對(duì)上傳的學(xué)習(xí)資源要求更加的規(guī)范，便于資源的整合和獲取。

2）為多元化學(xué)習(xí)方式、教學(xué)模式提供支持。隨著移動(dòng)網(wǎng)絡(luò)的覆蓋和智能手機(jī)的普及，不受時(shí)空限制的移動(dòng)學(xué)習(xí)和碎片化學(xué)習(xí)等方式正逐步引領(lǐng)著大學(xué)生的學(xué)習(xí)生活。高校學(xué)生利用移動(dòng)學(xué)習(xí)平臺(tái)開(kāi)展學(xué)習(xí)活動(dòng)越來(lái)越普及，比如下載課程資源、觀看網(wǎng)絡(luò)視頻、進(jìn)行在線答疑等。另一方面，隨著教育信息化的發(fā)展，教學(xué)模式也越來(lái)越多元化，比如目前比較火熱的微課教學(xué)、翻轉(zhuǎn)課程教學(xué)等，這些教學(xué)模式的有效實(shí)施需要移動(dòng)互聯(lián)網(wǎng)和數(shù)字化技術(shù)的支持，而移動(dòng)學(xué)習(xí)平臺(tái)的搭建，讓教師可以便捷地上傳課程資源，而學(xué)生利用智能手機(jī)便可簡(jiǎn)便、快速地獲取學(xué)習(xí)資源進(jìn)行自主學(xué)習(xí)，為下一步的教與學(xué)打好基礎(chǔ)。因此，移動(dòng)學(xué)習(xí)平臺(tái)的搭建，是移動(dòng)學(xué)習(xí)、碎片化學(xué)習(xí)發(fā)展的基石，也為當(dāng)前新型的教學(xué)模式提供了強(qiáng)有力的平臺(tái)支持。

3）實(shí)現(xiàn)資源整合共享和即時(shí)互動(dòng)。移動(dòng)學(xué)習(xí)平臺(tái)的搭建，不僅僅能讓學(xué)習(xí)者更加便捷地開(kāi)展移動(dòng)學(xué)習(xí)、碎片化學(xué)習(xí)，更在于能夠?qū)崿F(xiàn)資源整合共享和創(chuàng)造一個(gè)移動(dòng)式的學(xué)習(xí)社區(qū)。傳統(tǒng)的網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)課程資源龐大繁雜，且設(shè)計(jì)相對(duì)比較獨(dú)立，不利于資源的整合和傳播，而移動(dòng)學(xué)習(xí)平臺(tái)對(duì)上傳的資源要求比較規(guī)范，且要求輕巧精致。其借助通訊軟件的便捷性和易傳播性，可以方便地對(duì)教學(xué)資源進(jìn)行關(guān)注、分享等操作，能最大限度地實(shí)現(xiàn)教育資源的有機(jī)整合和共享。另一方面，移動(dòng)社區(qū)中的交流遠(yuǎn)比單向的在線學(xué)習(xí)課件更加有吸引力，也讓學(xué)習(xí)者的交流和答疑變得更加的即時(shí)和方便，這些都能讓學(xué)習(xí)者的學(xué)習(xí)變得更加的有意義。

騰訊公布的2016年第二季度及中期業(yè)績(jī)報(bào)告顯示，微信和WeChat合并月活躍用戶數(shù)達(dá)8.06億，目前眾多的高校利用微信擁有用戶基數(shù)大、普及率廣、互動(dòng)性好等特點(diǎn)，馬不停蹄的開(kāi)發(fā)了大量基于微信的移動(dòng)應(yīng)用，但是適合于廣大師生教學(xué)、自主學(xué)習(xí)使用的移動(dòng)學(xué)習(xí)平臺(tái)還比較少。因此，設(shè)計(jì)開(kāi)發(fā)移動(dòng)學(xué)習(xí)平臺(tái)成為高校網(wǎng)絡(luò)學(xué)習(xí)發(fā)展的必然趨勢(shì)。

2 微信小程序的內(nèi)涵及其應(yīng)用優(yōu)勢(shì)

微信小程序于2017年1月9日凌晨正式上線，簡(jiǎn)稱小程序，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。2018年1月，騰訊微信、教育部高等學(xué)校計(jì)算機(jī)類專業(yè)教學(xué)指導(dǎo)委員會(huì)、教育部高等學(xué)校軟件工程專業(yè)教學(xué)指導(dǎo)委員會(huì)、教育部在線教育研究中心等共同倡議并組建的中國(guó)高校微信應(yīng)用教育聯(lián)盟成立了，聯(lián)盟將通過(guò)大學(xué)課程的深度改革、開(kāi)啟在線課程計(jì)劃、開(kāi)展小程序開(kāi)發(fā)大賽等多方面將小程序開(kāi)發(fā)融入高校教學(xué)。由此可見(jiàn)，將微信小程序與教育教學(xué)相結(jié)合將成為一種潮流。本論文提出基于微信小程序開(kāi)發(fā)高職移動(dòng)學(xué)習(xí)平臺(tái)具有以下重要優(yōu)勢(shì)。

1）開(kāi)發(fā)門(mén)檻低，降低建設(shè)維護(hù)成本。微信小程序其底層技術(shù)支持和HTML技術(shù)有很多相似之處，前端技術(shù)相對(duì)于其他技術(shù)而言無(wú)論是入門(mén)和學(xué)習(xí)門(mén)檻都較低。同時(shí)，在滿足功能需求、性能需求的前提下，較于之前的APP或Web，小程序只需要依托微信的開(kāi)發(fā)標(biāo)準(zhǔn)開(kāi)發(fā)，便可自動(dòng)適配不同操作系統(tǒng)的使用要求，如IOS系統(tǒng)和Android系統(tǒng)，只要小程序迭代，用戶隨時(shí)打開(kāi)就是新版本。小程序基于跨平臺(tái)的屬性，無(wú)疑大大地降低了建設(shè)維護(hù)的成本、提高更新版本的效率。

2）基于微信入口，易于傳播推廣。微信基于微信平臺(tái)，在微信中有專門(mén)的接入口。而在互聯(lián)網(wǎng)的用戶中，微信用戶占據(jù)了絕大部分的市場(chǎng)。用戶只需要擁有微信賬號(hào)，就可通過(guò)掃描二維碼、好友群聊分享、搜索等方式直接打開(kāi)微信小程序，基于微信龐大的用戶流量和其便捷的接入方式，微信小程序制作的移動(dòng)學(xué)習(xí)平臺(tái)在廣大師生中無(wú)疑極易于傳播和推廣使用。

3）即用即走，使用更加便捷。微信小程序是內(nèi)置于微信的云端的應(yīng)用程序，其突出特點(diǎn)便是無(wú)須下載、無(wú)須安裝、無(wú)須卸載，同時(shí)充分發(fā)揮了移動(dòng)互聯(lián)網(wǎng)時(shí)代入口輕量化的優(yōu)勢(shì)，只需要通過(guò)微信“掃一掃”“搖一搖”等功能便可接入，真正實(shí)現(xiàn)了觸手可及，即用即走，使用更加的便捷，用戶不必?fù)?dān)心終端安裝太多應(yīng)用導(dǎo)致內(nèi)存不足的問(wèn)題。基于微信小程序的移動(dòng)學(xué)習(xí)平臺(tái)在不增加用戶使用成本的情況下，學(xué)習(xí)者可方便快捷的進(jìn)入平臺(tái)進(jìn)行課程的學(xué)習(xí)、資源的搜查、在線交流，也可方便在小程序隨時(shí)切換回聊天，靈活快捷。極大地方便了學(xué)習(xí)者充分利用碎片時(shí)間，有效的隨時(shí)隨地的實(shí)現(xiàn)移動(dòng)學(xué)習(xí)。

4）功能突出，更好的用戶體驗(yàn)感。相對(duì)于HTML5網(wǎng)站，小程序可以獲得較多的系統(tǒng)權(quán)限，比如數(shù)據(jù)緩存能力，網(wǎng)絡(luò)通信狀態(tài)等，這些系統(tǒng)級(jí)別的權(quán)限可以說(shuō)跟小程序無(wú)縫銜接，盡管同樣采用HTML+CSS+JS進(jìn)行開(kāi)發(fā)，小程序比HTML5網(wǎng)站具有更好的流暢性。而且可以調(diào)用比HTML5更多的手機(jī)系統(tǒng)功能來(lái)開(kāi)發(fā)，能開(kāi)發(fā)更為豐富的使用場(chǎng)景。微信小程序具有獨(dú)立的運(yùn)行環(huán)境，配合微信的解析器最終渲染出來(lái)的是原生組件的效果，在安卓手機(jī)上還可以直接添加到手機(jī)桌面，看上去跟原生APP一樣，用戶的體驗(yàn)感自然更勝一籌。

綜上所述，利用微信小程序能快速有效的搭建移動(dòng)學(xué)習(xí)平臺(tái)，并且具有使用便捷、易于推廣普及、用戶體驗(yàn)好等突出優(yōu)勢(shì)，能有效地解決當(dāng)前傳統(tǒng)網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)依賴PC存在的不足，促進(jìn)教育資源的共享，順應(yīng)知識(shí)碎片化傳播的趨勢(shì)，同時(shí)為多元化的教學(xué)模式提供平臺(tái)和支持。

3 設(shè)計(jì)開(kāi)發(fā)高校移動(dòng)學(xué)習(xí)平臺(tái)

本系統(tǒng)主要基于學(xué)習(xí)者、課程老師和系統(tǒng)管理員三種角色的功能模塊進(jìn)行設(shè)計(jì)。系統(tǒng)功能結(jié)構(gòu)圖如下所示：

1）學(xué)習(xí)者角色功能模塊分析如下：

課程選擇：該模塊實(shí)現(xiàn)課程的分類顯示，并提供課程關(guān)鍵字搜索功能。

個(gè)人空間：包括個(gè)人信息、我的收藏、我的提問(wèn)、我的評(píng)論和我的筆記五個(gè)小功能模塊。

課程學(xué)習(xí)：包含課程公告、教學(xué)課件、課程微課、拓展資源四個(gè)學(xué)習(xí)模塊，其中每一學(xué)習(xí)模塊提供評(píng)論、收藏、分享功能。

在線留言：包含主題討論、在線咨詢兩個(gè)模塊。學(xué)習(xí)者可以該模塊留言交流、也可以在線向教師咨詢。

在線測(cè)試：包含在線測(cè)試、查看結(jié)果兩個(gè)模塊。方便學(xué)習(xí)者自我檢測(cè)。

2）課程教師角色功能模塊分析如下：

進(jìn)入課程：該模塊通過(guò)系統(tǒng)管理員分配對(duì)應(yīng)的課程權(quán)限，一位老師可以同時(shí)管理多門(mén)課程。

個(gè)人空間：包含個(gè)人信息、我的收藏、我的提問(wèn)、我的評(píng)論和我的筆記五個(gè)小功能模塊。

課程學(xué)習(xí)：在該模塊教師可以發(fā)布課程公告、對(duì)課程課件、課程微課、拓展資源分別進(jìn)行上傳、編輯和管理。同時(shí)對(duì)學(xué)習(xí)者的評(píng)論進(jìn)行管理。

在線留言：分為主題討論管理，在線咨詢管理兩個(gè)模塊，教師可以發(fā)起主題討論，也可以對(duì)留言進(jìn)行管理。

在線測(cè)試：分為試題管理、結(jié)果統(tǒng)計(jì)兩個(gè)模塊，教師可以對(duì)測(cè)試的試題進(jìn)行管理，并統(tǒng)計(jì)學(xué)生測(cè)試的情況。

3）系統(tǒng)管理員角色功能模塊分析如下：

權(quán)限管理：通過(guò)該模塊，可以給課程老師分配管理課程的權(quán)限，一門(mén)課程可以由多名老師進(jìn)行管理，一位老師也可以同時(shí)管理多門(mén)課程。

課程資源管理：包括課程公告管理、課程課件管理、課程微課管理、拓展資源管理模塊，管理員可以對(duì)全部課程的課程資源進(jìn)行管理，同時(shí)對(duì)學(xué)習(xí)者的評(píng)論進(jìn)行管理。

互動(dòng)交流管理：分為主題討論管理，在線咨詢管理兩個(gè)模塊，管理員可以發(fā)起主題討論，也可以對(duì)留言進(jìn)行管理。

在線測(cè)試管理：分為試題管理、結(jié)果統(tǒng)計(jì)兩個(gè)模塊，管理員可以對(duì)測(cè)試的試題進(jìn)行管理，并統(tǒng)計(jì)學(xué)生測(cè)試的情況。

4 基于微信小程序開(kāi)發(fā)移動(dòng)學(xué)習(xí)平臺(tái)的步驟與關(guān)鍵技術(shù)

微信小程序的開(kāi)發(fā)框架基于 MINA 框架，開(kāi)發(fā)人員可以從手機(jī)客戶端app開(kāi)發(fā)快速切換到小程序開(kāi)發(fā)，下面簡(jiǎn)單扼要的闡述基于微信小程序開(kāi)發(fā)移動(dòng)學(xué)習(xí)平臺(tái)的順序和關(guān)鍵技術(shù)。

4.1 搭建微信小程序開(kāi)發(fā)環(huán)境

微信小程序開(kāi)發(fā)不能直接使用服務(wù)號(hào)或訂閱號(hào)的 AppID，需要登錄微信已經(jīng)提供的小程序開(kāi)發(fā)賬號(hào)。因此，我們需要先要在微信公眾平臺(tái)官網(wǎng)注冊(cè)賬號(hào)，獲取唯一標(biāo)的微信小程序AppID，然后在官網(wǎng)下載專用的微信開(kāi)發(fā)者工具，并進(jìn)行安裝。安裝完成后，第一次啟動(dòng)時(shí)會(huì)出現(xiàn)一個(gè)二維碼，需要使用微信掃描該二維碼才可登錄開(kāi)發(fā)者工具。

4.2 創(chuàng)建微信小程序項(xiàng)目

我們通過(guò)登錄微信開(kāi)發(fā)者工具，來(lái)實(shí)現(xiàn)移動(dòng)學(xué)習(xí)平臺(tái)小程序項(xiàng)目的創(chuàng)建和代碼編寫(xiě)，具體步驟如下：

1）登錄微信開(kāi)發(fā)者工具，選擇創(chuàng)建項(xiàng)目，輸入獲取的AppID，選擇文件代碼的存儲(chǔ)目錄，然后進(jìn)入開(kāi)發(fā)者工具界面。

2）進(jìn)入開(kāi)發(fā)者工具界面后，默認(rèn)是選中“調(diào)試”面板，在該面板中，左邊是頁(yè)面效果的預(yù)覽窗口，右邊是類似于Chrome的開(kāi)發(fā)者的工具。點(diǎn)擊最左側(cè)的導(dǎo)航，在“編輯”里可以查看和編輯我們的代碼，在“項(xiàng)目”里可以發(fā)送到手機(jī)里預(yù)覽實(shí)際效果。

3）創(chuàng)建了小程序之后，開(kāi)發(fā)工具會(huì)默認(rèn)生成了一些文件，其中app.js、app.json、app.wxss屬于應(yīng)用程序級(jí)文件，app.js定義了全局的一些重要事件，app.json 則定義了程序有哪些頁(yè)面，以及窗口標(biāo)題及相關(guān)樣式等，app.wxss 則定義了全局樣式。

4.3 創(chuàng)建微信小程序頁(yè)面

1）微信小程序總體結(jié)構(gòu)圖如圖2。

微信小程序啟動(dòng)時(shí)會(huì)生成一個(gè)app應(yīng)用實(shí)例，這個(gè)app實(shí)例會(huì)運(yùn)行多個(gè)page，每個(gè)page之間又會(huì)有一些關(guān)聯(lián)。多個(gè)page都需要用到的一些功能則封裝到公共方法中，例如util.js，calc.js等等。

2）微信小程序中每增加/減少頁(yè)面，其對(duì)應(yīng)的“路徑+頁(yè)面名”信息都需要寫(xiě)在app.json的pages數(shù)組中，數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)。每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。每個(gè)頁(yè)面的業(yè)務(wù)邏輯都會(huì)寫(xiě)在各自的js文件中，wxml則類似于html為頁(yè)面定了一個(gè)具體的div區(qū)域，通過(guò)類似于AngularJS的模型綁定將具體的數(shù)據(jù)綁定到具體的位置。wxss則和app.wxss一樣，都是css樣式表，在 logs 的頁(yè)面結(jié)構(gòu)中，logs 頁(yè)面使用控制標(biāo)簽來(lái)組織代碼，在上使用wx：for-items 綁定logs 數(shù)據(jù)，并將 logs 數(shù)據(jù)循環(huán)展開(kāi)節(jié)點(diǎn)。

5 展望

以智能手機(jī)為代表的便攜式移動(dòng)終端設(shè)計(jì)的普及使用，基于移動(dòng)學(xué)習(xí)平臺(tái)的移動(dòng)學(xué)習(xí)必將成為今后重要的學(xué)習(xí)方式。移動(dòng)學(xué)習(xí)平臺(tái)的設(shè)計(jì)開(kāi)發(fā)，正好為廣大學(xué)習(xí)者提供了一個(gè)強(qiáng)有力的學(xué)習(xí)平臺(tái)，而基于微信小程序本身的優(yōu)勢(shì)，該平臺(tái)具有建設(shè)維護(hù)成本低、即用即走、使用便攜、用戶體驗(yàn)好等出圖優(yōu)勢(shì)，易于推廣普及。而微信小程序擁有比原生APP 成本更低、速度更快的開(kāi)發(fā)優(yōu)勢(shì)，符合下一代移動(dòng)互聯(lián)網(wǎng)產(chǎn)業(yè)發(fā)展的“微、小、輕”趨勢(shì)，將會(huì)擁有更為廣泛的市場(chǎng)前景。

參考文獻(xiàn)：

[1] 張國(guó)杰，吳杰峰，劉路莎，等.基于微信小程序的數(shù)字化社區(qū)學(xué)習(xí)地圖開(kāi)發(fā)[J].廣州大學(xué)學(xué)報(bào)：社會(huì)科學(xué)版，2017（11）.

[2] 張小龍.微信小程序入口在哪？ 有什么用？[J].計(jì)算機(jī)與網(wǎng)絡(luò)，2017（4）.

[3] 劉琦，丁萍莉.基于微信小程序的互聯(lián)網(wǎng)+教育學(xué)習(xí)平臺(tái)的研究與設(shè)計(jì)[J].內(nèi)江科技，2016（12）.

[4] 張藝萌.基于智能手機(jī)的移動(dòng)微型學(xué)習(xí)系統(tǒng)設(shè)計(jì)[J].電子測(cè)試， 2014（19）：93-95.

[5] 劉玉佳.微信“小程序”開(kāi)發(fā)的系統(tǒng)實(shí)現(xiàn)及前景分析[J].信息通訊，2017（1）.

【通聯(lián)編輯：代影】