微信小程序?qū)崙?zhàn)課程開發(fā)與實施

趙劍冬，許智超

（廣東技術(shù)師范大學(xué)計算機科學(xué)學(xué)院，廣州510665）

0 引言

2017 年微信小程序誕生后，借助微信生態(tài)環(huán)境中迅速成為四種常見的移動應(yīng)用開發(fā)模式之一[1]。微信小程序開發(fā)需要具備WXML 標(biāo)簽語言、WXSS 樣式、JavaScript 腳本程序設(shè)計這三方面的基礎(chǔ)知識[2]。實際上WXML、WXSS 與靜態(tài)網(wǎng)頁中涉及的HTML 和CSS很類似。面對具有靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)的學(xué)習(xí)者，直接采用項目教學(xué)是可行的。

1 課程開發(fā)需求分析與討論

計算機類課程及時融入新技術(shù)教學(xué)內(nèi)容會受到學(xué)生的歡迎。新技術(shù)引入高校課堂的途徑一般是首先考慮以在學(xué)校里面做講座介紹新技術(shù)，然后開始嘗試在相關(guān)課程中以章節(jié)形式介紹新技術(shù)，最后再考慮單獨開設(shè)課程，教師開發(fā)教材或者講義開始系統(tǒng)講授新技術(shù)。

在課程開發(fā)前，通過梳理微信小程序開發(fā)涉及的知識點以及評估難易程度，初步考慮這門課程應(yīng)該設(shè)置為32 個學(xué)時，也即每周2 課時，一個學(xué)期16 周的方式。另外32 課時對應(yīng)4 個整天，也可以放在應(yīng)用型大學(xué)某個學(xué)期末的兩個實訓(xùn)周進(jìn)行講授。除此外，集中4天的課程教學(xué)還很適合在假期舉辦的面向職業(yè)教育師資的培訓(xùn)班中進(jìn)行講授。

傳統(tǒng)程序設(shè)計類課程一般采用按知識點講授的方法。但面對具有程序設(shè)計和靜態(tài)網(wǎng)頁設(shè)計基礎(chǔ)的學(xué)習(xí)者，可以考慮該課程直接結(jié)合具體項目案例進(jìn)行講授。開展項目教學(xué)的關(guān)鍵是設(shè)計和開發(fā)一個具有實際應(yīng)用背景，又容易理解的軟件原型系統(tǒng)。當(dāng)前微信小程序廣泛應(yīng)用于智慧校園、出行與交通、電商平臺、商家自營、生活服務(wù)、餐飲、旅游、商業(yè)服務(wù)、體育等行業(yè)。考慮到電子商務(wù)是當(dāng)前最熱門的互聯(lián)網(wǎng)應(yīng)用領(lǐng)域之一，也是大學(xué)生最熟悉的移動應(yīng)用方式，而且電子商務(wù)教師是職業(yè)教育信息技術(shù)類教師中一個比較大的群體，所以最終決定首先設(shè)計并開發(fā)一個基于微信小程序的電子商務(wù)原型系統(tǒng)。

2 課程設(shè)計與開發(fā)

2.1 原型系統(tǒng)的前端界面

整個移動電子商務(wù)原型系統(tǒng)包括前端部分和后臺部分。前端部分主要提供交互界面給用戶進(jìn)行商品選購，以下列舉幾個常見的交互界面。如圖1 所示，與常見的電商平臺類似，系統(tǒng)首頁展示商品分類導(dǎo)航，然后每個類別都列出一些推薦商品。圖2 是商品分類頁面，點擊左側(cè)每一類別，在右側(cè)列出該類別下的全部商品。圖3 是商品詳情頁，顯示每個商品的照片、價格和詳細(xì)商品圖片文字介紹等。圖4 是購物車頁，顯示當(dāng)前打算購買的所有商品列表，可以繼續(xù)添加商品或者刪除購物車中的商品，然后去結(jié)算。

前端部分教學(xué)涉及的知識點主要包括小程序注冊、開發(fā)工具、代碼結(jié)構(gòu)、JSON 配置文件、WXML 頁面結(jié)構(gòu)、WXSS 頁面樣式、JS 頁面交互、JSON 數(shù)據(jù)交換格式、組件、微信小程序API、小程序調(diào)試和發(fā)布等。

2.2 原型系統(tǒng)的后臺部分

整個移動電子商務(wù)原型系統(tǒng)的后臺部分主要負(fù)責(zé)商品數(shù)據(jù)和用戶數(shù)據(jù)管理。后臺開發(fā)可以采用簡單的云開發(fā)模式，也可以采用自主搭建Web 服務(wù)器數(shù)據(jù)接口的模式。其中第一種云開發(fā)模式無需搭建服務(wù)器，使用平臺提供的API 就可以進(jìn)行核心業(yè)務(wù)開發(fā)，可以實現(xiàn)快速上線和迭代的目標(biāo)，而且與開發(fā)者已經(jīng)使用的云服務(wù)相互兼容。云開發(fā)模式主要特點包括：①無需自建數(shù)據(jù)庫，提供一個既可在小程序前端操作，也能在云函數(shù)中讀寫的JSON 數(shù)據(jù)庫；②無需自建存儲和CDN，在小程序前端直接上傳/下載云端文件，在云開發(fā)控制臺可視化管理；③支持云調(diào)用，基于云函數(shù)免鑒權(quán)提供開放接口的能力，使得小程序獲得服務(wù)端調(diào)用、獲取開放數(shù)據(jù)等能力；④支持云函數(shù)，也就是只需編寫自身業(yè)務(wù)邏輯代碼，這些代碼在云端運行[3]。

第二種自主搭建Web 服務(wù)器模式可以采用結(jié)構(gòu)化數(shù)據(jù)庫，例如常見的Linux+Java+Oracle 或者Linux+PHP+MySQL 或者Windows+.NET+SQLServet 等開發(fā)工具套件，也可以考慮采用非結(jié)構(gòu)化數(shù)據(jù)庫，例如采用Linux/Windows+Python+MongoDB 的開發(fā)工具套件。自主搭建模式主要特點包括：①可以實現(xiàn)業(yè)務(wù)邏輯更加靈活的代碼。例如小程序涉及計算量較大的任務(wù)時候，可以將計算由服務(wù)器端實施。②可以不受云開發(fā)基礎(chǔ)資源配額的限制。例如云開發(fā)模式下對存儲容量、云函數(shù)調(diào)用次數(shù)、單個云函數(shù)并發(fā)數(shù)、云函數(shù)數(shù)量等都有一定限制。③自主搭建Web 服務(wù)器的運行維護(hù)難度要高于云開發(fā)模式?？紤]到學(xué)生前期已經(jīng)學(xué)習(xí)過Java、.NET、Python 等開發(fā)語言以及Python 當(dāng)前的熱門程度，所以采用Python 進(jìn)行自主搭建。

后臺部分教學(xué)涉及知識點包括兩部分，第一部分是云開發(fā)模式相關(guān)的，包括云開發(fā)模式介紹、云數(shù)據(jù)庫、云函數(shù)、云存儲等，第二部分是與自主搭建模式相關(guān)的，包括Python Web 開發(fā)環(huán)境、Flask 框架、MongoDB數(shù)據(jù)庫等[4]。

圖1 系統(tǒng)首頁

圖2 商品分類頁

圖3 商品詳情頁

圖4 購物車頁

2.3 教學(xué)進(jìn)度設(shè)計

在課程開發(fā)過程中，嚴(yán)格遵循ADDIE 模式，并注重學(xué)習(xí)者計算思的培養(yǎng)[5-6]。通過對計算思維結(jié)構(gòu)的深入研究，認(rèn)為計算思維包括算法思維、評估、分解、抽象、概括五個方面要素[7]。計算思維在信息技術(shù)課程中表現(xiàn)為六組思維主題，即對象與管理、設(shè)計與制作、系統(tǒng)與工程、規(guī)則與安全、合作與協(xié)作、倫理與道德[8]。以計算思維結(jié)構(gòu)為基礎(chǔ)，以計算思維主題為主線，為整個課程開發(fā)作為理論指導(dǎo)的基礎(chǔ)。在信息技術(shù)類專業(yè)中，核心素養(yǎng)主要關(guān)注學(xué)習(xí)者能否適應(yīng)信息技術(shù)的飛速發(fā)展。整個教學(xué)過程采用基于面向核心素養(yǎng)的項目學(xué)習(xí)法，將整個項目細(xì)化為多個實訓(xùn)環(huán)節(jié)，從而有效激發(fā)學(xué)習(xí)者的學(xué)習(xí)動力。整個課程的教學(xué)進(jìn)度設(shè)計如表1 所示。

2.4 課程資源開發(fā)

結(jié)合教學(xué)進(jìn)度設(shè)計，研究團(tuán)隊開發(fā)了每一章節(jié)的課程資源。考慮到所在高校與超星平臺進(jìn)行合作，該平臺允許編輯章節(jié)和支持發(fā)布各種格式教學(xué)資源，所以選擇將課程資源發(fā)布在超星平臺上，如圖5 所示。課程資源主要包括教學(xué)講義、思維導(dǎo)圖、教學(xué)課件、教學(xué)微課、示例代碼和課后復(fù)習(xí)提示等。課程資源開發(fā)的目標(biāo)是希望達(dá)到任何一位主講教師，依賴提供的課程資源，經(jīng)過自學(xué)掌握后，借助平臺提供的教學(xué)課件、教學(xué)微課就可以完成這門實戰(zhàn)課程的講授。編撰的教學(xué)講義嚴(yán)格按照系統(tǒng)模塊開發(fā)流程逐一介紹電商系統(tǒng)首頁、商品分類頁、商品詳情頁和后臺開發(fā)的技術(shù)細(xì)節(jié)。思維導(dǎo)圖主要讓學(xué)習(xí)者可以抓住每個部分的關(guān)鍵知識點，如圖6 所示。同時課程資源也給學(xué)習(xí)者提供了示例代碼和課后復(fù)習(xí)的提示。

3 課程開發(fā)與評價難點

3.1 計算思維如何與課程融合

在課程設(shè)計中將計算思維主導(dǎo)引入課程開發(fā)，借鑒計算思維結(jié)構(gòu)模型繪制微信小程序課程開發(fā)的計算思維三棱結(jié)構(gòu)。在微信小程序課程的計算思維結(jié)構(gòu)描述中，學(xué)習(xí)者基礎(chǔ)層的內(nèi)容為計算思維環(huán)境、微信小程序電商系統(tǒng)與架構(gòu)、開發(fā)工具與配置、協(xié)作與交互；學(xué)習(xí)者專項能力層中包含微信小程序開發(fā)的前端設(shè)計與制作品質(zhì)、數(shù)據(jù)庫邏輯品質(zhì)；在學(xué)習(xí)者的思維方法層中主要包括微信小程序開發(fā)的創(chuàng)新品質(zhì)。一方面章節(jié)設(shè)置要包含以上各點，另外一方面，按照基礎(chǔ)層、專項能力層和思維方法層給予學(xué)習(xí)者必要的啟示。例如在期末課程作品選題環(huán)節(jié)，注意給學(xué)生點評全國高校微信小程序比賽選題，在課程資源開發(fā)環(huán)節(jié)也包括優(yōu)秀作品選登。

圖6 思維導(dǎo)圖

3.2 如何進(jìn)行教學(xué)實施

課程的實施可以考慮單獨開設(shè)一門選修課，或者融合在相關(guān)課程中提及微信小程序開發(fā)模式。在應(yīng)用型高校的計算機類專業(yè)人才培養(yǎng)計劃中一般已經(jīng)開設(shè)了《HTML 語言程序設(shè)計》、《Android 移動應(yīng)用開發(fā)》或者《iOS 移動應(yīng)用開發(fā)》、《Web 程序設(shè)計》、《Java 程序設(shè)計》等課程，而且由于人才培養(yǎng)計劃總學(xué)時限制，所以本課程是選擇與在計算機學(xué)院本科生三年級開設(shè)的電子商務(wù)課程融合在一起實施的。

相對于在經(jīng)濟管理學(xué)院側(cè)重電商營銷和物理管理，計算機學(xué)院開設(shè)的電子商務(wù)課程更側(cè)重電子商務(wù)技術(shù)。該課程每周3 課時，其中2 課時進(jìn)行理論講授，1 課時實訓(xùn)內(nèi)容講授，主要將以上的微信小程序教學(xué)內(nèi)容壓縮為16 課時進(jìn)行講授。由于計算機學(xué)院大三的學(xué)生前期已經(jīng)具備程序設(shè)計、HTML、數(shù)據(jù)庫等知識基礎(chǔ)，所以重點引導(dǎo)學(xué)生理解電商小程序系統(tǒng)的前端首頁、商品分類頁、商品詳情頁以及云開發(fā)模式后，學(xué)生便能通過課后自學(xué)迅速掌握微信小程序開發(fā)技術(shù)，期末能提交一個電商微信小程序原型系統(tǒng)作為課程考核作品。

3.3 如何進(jìn)行教學(xué)評價

本研究運用課程評價理論[9]，根據(jù)信息技術(shù)專業(yè)實踐課程的基本特征，進(jìn)行理論推演，采用問卷調(diào)查的方法收集信息基點，構(gòu)建了實戰(zhàn)課程的評價指標(biāo)體系包括課程標(biāo)準(zhǔn)、課程知識目標(biāo)、課程技能目標(biāo)、課程內(nèi)容選取、實踐內(nèi)容組織與安排、課程內(nèi)容呈現(xiàn)形式、教學(xué)設(shè)計、教學(xué)手段、教學(xué)資源、教師教學(xué)態(tài)度、學(xué)生學(xué)習(xí)態(tài)度、知識掌握、技能掌握等，如表2 所示。

表2 課程評價指標(biāo)體系

整個評價過程采用了校內(nèi)評價和社會評價相結(jié)合，校內(nèi)評價包括學(xué)生評價和專家評價，學(xué)生評價采用調(diào)查問卷法，專家評價采用訪談法邀請三位從事軟件開發(fā)技術(shù)、教育評價和教育技術(shù)的專家進(jìn)行評價，而社會評價也是通過邀請三位企業(yè)工程師進(jìn)行訪談。

4 教學(xué)實踐歷程

以廣東技術(shù)師范大學(xué)為例，介紹微信小程序新技術(shù)引入大學(xué)課堂的歷程。2017 年1 月小程序正式發(fā)布，廣東技術(shù)師范大學(xué)計算機學(xué)院研究生團(tuán)隊根據(jù)導(dǎo)師指導(dǎo)開始進(jìn)行技術(shù)跟蹤研究。2017 年10 月，計算機學(xué)院派遣研究生到深圳某公司參加小程序開發(fā)實習(xí)，該公司由騰訊公司前員工團(tuán)隊創(chuàng)立。

2018 年6 月，在計算機學(xué)院大二、大三學(xué)生的期末17-18 周的項目實訓(xùn)周引入微信小程序開發(fā)實訓(xùn)。整個實訓(xùn)采用企業(yè)工程師主講+校內(nèi)教師隨堂輔導(dǎo)的模式，邀請了騰訊前資深工程師、互聯(lián)網(wǎng)企業(yè)唯品會資深工程師主講。通過這種模式，一方面提高了學(xué)生動手能力，另一方面也使得校內(nèi)教師及時掌握了企業(yè)流行的項目開發(fā)技術(shù)。

2018 年6 月，計算機學(xué)院組織團(tuán)隊申請教育部騰訊協(xié)同育人項目第一批項目，并于9 月立項獲批經(jīng)費資助，并派遣教師在廣州崗頂參加騰訊公司組織的微信小程序高校教師培訓(xùn)班。2018 年12 月14 日，筆者在校本部208 講學(xué)廳面向全校學(xué)生做周末講座，講座主題“微信小程序與創(chuàng)新創(chuàng)業(yè)”，受到學(xué)生的熱烈歡迎。2018 年12 月，在北京參加“中國高校微信應(yīng)用教育聯(lián)盟”年會，廣東技術(shù)師范大學(xué)計算機學(xué)院獲頒發(fā)聯(lián)盟成員證書。

經(jīng)過前期的準(zhǔn)備，2019 年全年逐步完善《微信小程序?qū)崙?zhàn)課程》并將課程資源發(fā)布在超星平臺上。同時結(jié)合計算機學(xué)院大學(xué)三年級開設(shè)的《電子商務(wù)》課程，將微信小程序電商系統(tǒng)開發(fā)嵌入作為該課程的實訓(xùn)環(huán)節(jié)。

5 結(jié)語

大學(xué)計算機類專業(yè)本科生對市面出現(xiàn)的新技術(shù)非常感興趣。大學(xué)教師在課程中及時融入新技術(shù)教學(xué)內(nèi)容會受到學(xué)生的歡迎。本文介紹了廣東技術(shù)師范大學(xué)作為廣東省應(yīng)用型大學(xué)轉(zhuǎn)型試點高校，及時將微信小程序開發(fā)技術(shù)引入大學(xué)課堂的歷程。通過積極參與教育部協(xié)同育人項目計劃，與互聯(lián)網(wǎng)企業(yè)緊密合作進(jìn)行實戰(zhàn)課程開發(fā)，能獲得企業(yè)資金資助和技術(shù)培訓(xùn)支持。課程開發(fā)中，注重計算思維的培養(yǎng)，通過項目導(dǎo)向法進(jìn)行課程的講授，規(guī)避了傳統(tǒng)按知識點講授的缺點。最終通過課程評價驗證了整個課程設(shè)計和開發(fā)模式確實達(dá)到預(yù)期目標(biāo)，也順利完成了整個教育部協(xié)同育人項目的結(jié)題工作。