基于微信小程序的在線編程學(xué)習(xí)平臺(tái)的設(shè)計(jì)研究

陳華凱，徐永瑞，周星宇

(南京郵電大學(xué)通達(dá)學(xué)院，江蘇 南京 225100)

0 引言

隨著移動(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)今及未來的學(xué)習(xí)方式中占據(jù)著重要的地位。同時(shí)，移動(dòng)學(xué)習(xí)需要強(qiáng)大的網(wǎng)絡(luò)資源作為支撐，因此設(shè)計(jì)和開發(fā)承載網(wǎng)絡(luò)資源的在線編程學(xué)習(xí)平臺(tái)具有重要的意義。

1 搭建在線編程學(xué)習(xí)平臺(tái)是高校教育信息化發(fā)展的必然趨勢(shì)

1.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é)校也無法給學(xué)生提供充足的計(jì)算機(jī)進(jìn)行學(xué)習(xí)，這對(duì)他們的自主學(xué)習(xí)造成了極大的不便。另一方面，由于互聯(lián)網(wǎng)過于龐大，傳統(tǒng)的網(wǎng)絡(luò)課程設(shè)計(jì)相對(duì)獨(dú)立，一般采用不同的通訊協(xié)議和數(shù)據(jù)傳輸格式，給國(guó)家“十三五”教育信息化計(jì)劃中大力提倡的實(shí)現(xiàn)對(duì)知識(shí)資源的快速發(fā)現(xiàn)、合理整合和簡(jiǎn)單共享造成了困難。而在線編程學(xué)習(xí)平臺(tái)主要基于手機(jī)進(jìn)行使用，經(jīng)調(diào)查，幾乎所有的高校學(xué)生人手一部智能手機(jī)，在線編程學(xué)習(xí)平臺(tái)的搭建，為學(xué)生的學(xué)習(xí)提供了便利性。同時(shí)，在線編程學(xué)習(xí)平臺(tái)對(duì)上傳的學(xué)習(xí)資源要求更加的規(guī)范，便于資源的整合和獲取。

1.2 為多元化學(xué)習(xí)方式、教學(xué)模式提供支持

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

1.3 實(shí)現(xiàn)資源整合共享和即時(shí)互動(dòng)

在線編程學(xué)習(xí)平臺(tái)的搭建，不僅僅能讓學(xué)習(xí)者更加便捷地開展移動(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ú)立，不利于資源的整合和傳播，而在線編程學(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í)變得更加的有意義。

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

微信小程序于 2017年 1月 9日凌晨正式上線，簡(jiǎn)稱小程序，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開應(yīng)用。開展小程序開發(fā)大賽等多方面將小程序開發(fā)融入高校教學(xué)。由此可見，將微信小程序與教育教學(xué)相結(jié)合將成為一種潮流。本論文提出基于微信小程序開發(fā)高職在線編程學(xué)習(xí)平臺(tái)具有以下重要優(yōu)勢(shì)。

2.1 開發(fā)門檻低，降低建設(shè)維護(hù)成本

微信小程序其底層技術(shù)支持和HTML技術(shù)有很多相似之處，用戶隨時(shí)打開就是新版本。小程序基于跨平臺(tái)的屬性，無疑大大地降低了建設(shè)維護(hù)的成本、提高更新版本的效率。

2.2 基于微信入口，易于傳播推廣

微信基于微信平臺(tái)，在微信中有專門的接入口。而在互聯(lián)網(wǎng)的用戶中，微信小程序制作的在線編程學(xué)習(xí)平臺(tái)在廣大師生中無疑極易于傳播和推廣使用。

2.3 即用即走，使用更加便捷

微信小程序是內(nèi)置于微信的云端的應(yīng)用程序，其突出特點(diǎn)便是無須下載資源的搜查、在線交流，也可方便在小程序隨時(shí)切換回聊天，靈活快捷。極大地方便了學(xué)習(xí)者充分利用碎片時(shí)間，有效的隨時(shí)隨地的實(shí)現(xiàn)移動(dòng)學(xué)習(xí)。

2.4 功能突出，更好的用戶體驗(yàn)感

相對(duì)于 HTML5網(wǎng)站，小程序可以獲得較多的系統(tǒng)權(quán)限，在安卓手機(jī)上還可以直接添加到手機(jī)桌面，看上去跟原生APP一樣，用戶的體驗(yàn)感自然更勝一籌。

綜上所述，利用微信小程序能快速有效的搭建在線編程學(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ì)開發(fā)高校在線編程學(xué)習(xí)平臺(tái)

本系統(tǒng)主要基于學(xué)習(xí)者、課程老師和系統(tǒng)管理員三種角色的功能模塊進(jìn)行設(shè)計(jì)。

3.1 學(xué)習(xí)者角色功能模塊分析

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

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

3.2 課程教師角色功能模塊分析

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

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

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

3.3 系統(tǒng)管理員角色功能模塊分析

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

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

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

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

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

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

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

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

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

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

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

4.3.1 微信小程序總體結(jié)構(gòu)。

微信小程序啟動(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等等。

4.3.2微信小程序中每增加/減少頁面，其對(duì)應(yīng)的“路徑+頁面名”信息都需要寫在app.json的pages數(shù)組中，數(shù)組的第一項(xiàng)代表小程序的初始頁。每一個(gè)小程序頁面是由同路徑下同名的四個(gè)不同后綴文件的組成AngularJS的模型綁定將具體的數(shù)據(jù)綁定到具體的位置。wxss則和 app.wxss一樣，都是css樣式表，在 logs 的頁面結(jié)構(gòu)中，logs頁面使用控制標(biāo)簽來組織代碼，在上使用wx：for-items綁定logs 數(shù)據(jù)，并將 logs 數(shù)據(jù)循環(huán)展開節(jié)點(diǎn)。

5 結(jié)論與展望

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