微信小程序項目實訓(xùn)課程設(shè)計與實踐

周曉磊

摘 要：微信小程序項目實訓(xùn)課是一門實踐性很強(qiáng)的課程，針對傳統(tǒng)教學(xué)模式下學(xué)生掌握相關(guān)理論知識后仍無法較好地完成一個綜合實際工程項目的問題，提出在教學(xué)過程中引入實用性強(qiáng)、涵蓋知識點較全面的小程序項目案例作為教學(xué)主線進(jìn)行授課，同時通過參加小程序大賽強(qiáng)化所學(xué)知識。該課程的設(shè)計與實施可有效加強(qiáng)學(xué)生綜合職業(yè)素質(zhì)培養(yǎng)，提高學(xué)生的專業(yè)實踐能力與團(tuán)隊協(xié)作能力。

關(guān)鍵詞：微信小程序;項目實訓(xùn)課;以賽促學(xué);課程建設(shè);教學(xué)改革

DOI：10. 11907/rjdk. 192029 開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

中圖分類號：G434文獻(xiàn)標(biāo)識碼：A 文章編號：1672-7800（2020）002-0233-03

英標(biāo)：Design and Practice of WeChat Mini-Program Project Training Course

英作：ZHOU Xiao-lei

英單：（School of Management and Engineering， Capital University of Economics and Business，Beijing 100070， China）

Abstract：WeChat mini-program project training course is a highly practical course. Aiming at the problem that students can not complete a comprehensive practical project well after learning a series of classroom knowledge points under the traditional teaching mode， this paper puts forward the viewpoint of introducing practical and comprehensive mini-program project cases covering knowledge points into the teaching process as the main line of teaching， while students participating in mini-program contest to strengthen the knowledge learned in the class. The design and implementation of the curriculum effectively strengthens the students comprehensive professional quality and improves students professional practice ability and team collaboration ability.

Key Words：WeChat mini-program;project training course;promoting studying with competition;course construction;teaching reform

0 引言

微信創(chuàng)始人張小龍[1]對于小程序的定義為：“小程序是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用觸手可及的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用，也體現(xiàn)了用完即走的理念，用戶不用關(guān)心是否安裝了太多應(yīng)用，應(yīng)用將無處不在，隨時可用，但又無需安裝。”

隨著互聯(lián)網(wǎng)與移動智能終端的快速發(fā)展，應(yīng)用的形態(tài)也在不斷進(jìn)化，從傳統(tǒng)互聯(lián)網(wǎng)時代PC端的Web應(yīng)用，到移動互聯(lián)網(wǎng)時代移動端的原生APP應(yīng)用、H5跨端混合APP，以及微信的XX號（訂閱號、服務(wù)號、企業(yè)號等）與小程序應(yīng)用，互聯(lián)網(wǎng)技術(shù)的發(fā)展日新月異[2]。如今幾乎所有學(xué)生的手機(jī)上都會安裝微信應(yīng)用，而且每天頻繁使用，使微信平臺具備大量穩(wěn)定的用戶群體[3]。在微信6.6.1版本主界面為使用過的小程序提供了更加便捷的入口，而且可以通過掃碼、搜索、公眾號關(guān)聯(lián)、發(fā)現(xiàn)等方式進(jìn)入，是一種不必安裝、即用即走的輕應(yīng)用[4]。與原生APP相比，微信小程序平臺兼容性好，極大地降低了開發(fā)成本，縮短了開發(fā)周期，在學(xué)生群體中推廣速度也更快[5]。

微信小程序開發(fā)作為一門實踐性較強(qiáng)的課程[6]，如果仍然采用傳統(tǒng)課堂的授課模式，學(xué)生聽懂每個知識點的難度不大，但如何能夠應(yīng)用所學(xué)知識做出一個能解決實際問題的小程序產(chǎn)品才是難點所在[7-8]。因此，如何適當(dāng)?shù)亻_展移動應(yīng)用產(chǎn)品設(shè)計與開發(fā)教學(xué)，使培養(yǎng)出的學(xué)生能夠掌握市場需要的微信平臺開發(fā)知識、技術(shù)與技能是本文研究的重點問題。

1 課程開設(shè)基礎(chǔ)

微信小程序項目實訓(xùn)課程已面向我校軟件工程專碩一年級的學(xué)生進(jìn)行授課。微信小程序開發(fā)技術(shù)基于前端開發(fā)的HTML5、CSS3以及JavaScript三大核心技術(shù)。

從學(xué)生層面，選課學(xué)生在大學(xué)期間幾乎都曾在課堂學(xué)習(xí)或自學(xué)過前端及后端開發(fā)相關(guān)知識，而且之前已系統(tǒng)學(xué)習(xí)了互聯(lián)網(wǎng)全棧開發(fā)以及互聯(lián)網(wǎng)產(chǎn)品界面與交互設(shè)計等先修課程;從教師層面，實訓(xùn)課主講教師開設(shè)的課程有網(wǎng)頁設(shè)計基礎(chǔ)、移動平臺下的編程技術(shù)以及混合HTML5移動應(yīng)用APP開發(fā)等，分別面向本科計算機(jī)及相關(guān)專業(yè)以及研究生軟件工程專業(yè)開設(shè)，取得了較好效果。

因此，基于學(xué)生已掌握的先修基礎(chǔ)課程以及任課教師在相關(guān)方向扎實的教學(xué)基礎(chǔ)，開設(shè)微信小程序項目實訓(xùn)課無論對于教師還是學(xué)生都已作好了充分準(zhǔn)備。在已有課程理論學(xué)習(xí)的基礎(chǔ)上，基于微信Web開發(fā)者工具平臺，采用基于實際案例的理論知識點講解與實操演練教學(xué)方式，帶領(lǐng)學(xué)生開發(fā)真實的微信小程序項目并發(fā)布部署，引導(dǎo)學(xué)生掌握企業(yè)互聯(lián)網(wǎng)產(chǎn)品的設(shè)計思路與開發(fā)流程，同時積極探索以大賽為載體的實踐育人模式，通過組織學(xué)生參加“2019中國高校計算機(jī)大賽——微信小程序應(yīng)用開發(fā)賽”[9]，全面培養(yǎng)學(xué)生的項目實戰(zhàn)能力與專業(yè)技能，促進(jìn)人才培養(yǎng)與產(chǎn)業(yè)需求緊密結(jié)合。

2 課程實施過程

本課程共計32學(xué)時（2學(xué)時/周，16周），實施過程共分為3個階段：①基于實際案例的小程序開發(fā)知識點講解;②選課學(xué)生自由組隊并確定參賽題目;③項目設(shè)計與實施并參加2019微信小程序應(yīng)用開發(fā)賽。每個階段具體工作開展描述如下：

2.1 基于實際案例的小程序開發(fā)知識點講解（第1-8周，共計16學(xué)時）

在該階段，教師首先向?qū)W生介紹微信小程序開發(fā)前的準(zhǔn)備工作、使用的開發(fā)工具及小程序目錄結(jié)構(gòu)等基礎(chǔ)知識[10]（約2學(xué)時），然后通過5個實際案例（約14學(xué)時）為學(xué)生講解小程序開發(fā)理論知識點，以實操演練的方式帶領(lǐng)學(xué)生開發(fā)真實的微信小程序項目并發(fā)布部署，讓學(xué)生先對小程序項目開發(fā)流程及思路有較為形象的認(rèn)識與感受。具體課程安排與理論知識點如表1所示。

2.2 選課學(xué)生自由組隊確定參賽項目（前6周課余時間準(zhǔn)備）

自2018年舉辦第一屆全國微信小程序應(yīng)用開發(fā)賽以來，該項賽事備受廣大師生關(guān)注?！?019微信小程序應(yīng)用開發(fā)賽”是由清華大學(xué)、中國傳媒大學(xué)與騰訊公司微信事業(yè)群聯(lián)合主辦，基于微信小程序平臺的創(chuàng)新應(yīng)用開發(fā)設(shè)計競賽。大賽面向全球高校在校生開放，旨在通過競賽方式提升學(xué)生的微信小程序應(yīng)用設(shè)計與開發(fā)能力，特別是運(yùn)用微信生態(tài)開發(fā)技術(shù)進(jìn)行創(chuàng)意設(shè)計與創(chuàng)新實踐的能力，實現(xiàn)以賽促學(xué)、以賽促教、以賽促用，推動微信生態(tài)體系的人才培養(yǎng)和產(chǎn)學(xué)研用。

在微信小程序項目實訓(xùn)課一開始，教師即向?qū)W生傳達(dá)該項賽事，并請大家利用課余時間考慮組隊及參賽項目等事宜。在滿足參賽基本規(guī)則的基礎(chǔ)上，教師就參賽項目選題進(jìn)行指導(dǎo)。例如，引導(dǎo)大家多從生活和學(xué)習(xí)的校園場景中加以考慮，發(fā)現(xiàn)痛點、分析原因、調(diào)研用戶需求、設(shè)計解決方案并進(jìn)一步研發(fā)實施。希望學(xué)生能夠通過參加競賽強(qiáng)化課堂所學(xué)知識，真正感受一個軟件產(chǎn)品從0到1的產(chǎn)生過程，體會如何通過現(xiàn)代信息技術(shù)解決生活和學(xué)習(xí)中遇到的實際問題，真正實現(xiàn)學(xué)以致用。

通過觀察與思考校園中每天生活和學(xué)習(xí)的點點滴滴，在課程第6周，大家自由組成團(tuán)隊，每隊3～4人，基本確立參賽項目選題，例如校內(nèi)知識與信息分享小程序項目、社團(tuán)/學(xué)生信息發(fā)布小程序項目、畢業(yè)設(shè)計課題雙選小程序項目等。

2.3 項目設(shè)計、實施與參賽（第7-16周）

每個團(tuán)隊確定項目選題之后，進(jìn)入到項目用戶需求研究、產(chǎn)品原型設(shè)計以及研發(fā)實施階段。教師首先為學(xué)生介紹目前業(yè)界成熟的互聯(lián)網(wǎng)產(chǎn)品團(tuán)隊核心由產(chǎn)品團(tuán)隊、研發(fā)團(tuán)隊和運(yùn)營團(tuán)隊3個子團(tuán)隊構(gòu)成[11]，以及每個團(tuán)隊包括哪些崗位，需要哪些專業(yè)知識積累。結(jié)合軟件工程專業(yè)學(xué)生實際情況，將項目開展重點放在產(chǎn)品設(shè)計與研發(fā)上，并建議每個項目團(tuán)隊成立模擬工作室，分為隊長、設(shè)計師、程序員以及測試員等項目崗位，分別由不同團(tuán)隊成員根據(jù)自己的專長承擔(dān)相應(yīng)崗位任務(wù)。每個階段具體實施過程描述如下：

（1）用戶需求研究階段（第7-8周課余時間準(zhǔn)備）。在課程的第7周與第8周（共計約2周時間），大家利用課余時間開展用戶需求研究相關(guān)工作。用戶需求研究工作整體可分為3部分——為什么要研究（明確研究目的）、研究什么問題（明確目標(biāo)用戶、研究內(nèi)容）、如何進(jìn)行研究（確定研究方法、執(zhí)行安排等）[12]。

“為什么要研究”是指需要明確為什么要開發(fā)該小程序項目?？梢龑?dǎo)學(xué)生自問如下問題：現(xiàn)實生活中遇到什么痛點問題促使我們?nèi)ニ伎冀鉀Q呢？小程序項目的達(dá)成是不是可以很好地解決該痛點問題？例如，畢業(yè)設(shè)計雙選小程序項目選題的初衷是因為現(xiàn)有本科畢設(shè)雙選環(huán)節(jié)存在大量繁復(fù)的電子文檔手工統(tǒng)計工作，校內(nèi)知識分享小程序項目以及社團(tuán)/學(xué)生信息發(fā)布小程序項目是為了解決校內(nèi)信息發(fā)布與獲取通道不順暢的痛點問題。

“研究什么問題”是指需要明確小程序產(chǎn)品目標(biāo)用戶群的心理特征及行為數(shù)據(jù)等[13]。在該部分需要項目團(tuán)隊成員緊密圍繞上個部分的研究目的開展用戶需求調(diào)查，將研究目標(biāo)分解成要考察的具體問題或需要搜集的信息，深入挖掘問題根源。每個團(tuán)隊根據(jù)研究目標(biāo)設(shè)計調(diào)查問題，通過用戶對問題的回答，進(jìn)一步明確研究內(nèi)容。

“如何進(jìn)行研究”是指需要明確上述用戶需求調(diào)查采取的具體方法，如用戶訪談、調(diào)查問卷、場景研究、背景調(diào)查等[14]，確保研究團(tuán)隊的時間安排、相關(guān)費(fèi)用等都能得到基本控制。

在結(jié)束用戶需求調(diào)查之后，需要對調(diào)查數(shù)據(jù)進(jìn)行統(tǒng)計分析，采用適當(dāng)?shù)臄?shù)據(jù)可視化方法進(jìn)行輸出，從而提煉出產(chǎn)品功能需求和性能需求，形成用戶需求文檔[15]。

（2）產(chǎn)品原型設(shè)計階段（第9周課余時間準(zhǔn)備，課上展示討論）。確定產(chǎn)品的功能需求之后，項目團(tuán)隊需要將功能需求轉(zhuǎn)化為具體的產(chǎn)品模型實現(xiàn)效果，作為后期開發(fā)的參考。項目團(tuán)隊使用Axure、xiaopiu或Mockplus等原型制作工具，參考官網(wǎng)的“微信小程序設(shè)計指南”準(zhǔn)則[16]，同時結(jié)合先修的“互聯(lián)網(wǎng)產(chǎn)品界面與交互設(shè)計”課程知識，設(shè)計項目產(chǎn)品原型并進(jìn)行展示與討論。對于有爭議的部分，采取用戶訪談或測試方式進(jìn)行修正。

（3）項目研發(fā)實施階段（第10-16周）。項目團(tuán)隊成員根據(jù)課堂上掌握的理論知識，根據(jù)原型設(shè)計階段生成的產(chǎn)品原型進(jìn)行開發(fā)，同時形成相應(yīng)技術(shù)開發(fā)文檔，按照小程序設(shè)計大賽要求，上傳小程序作品及相關(guān)素材。技術(shù)開發(fā)過程中可繼續(xù)參考騰訊課堂小程序開發(fā)相關(guān)視頻教程以及官方“微信公眾平臺”上的開發(fā)文檔資料[17]。每周上課時團(tuán)隊成員匯報上周的項目開發(fā)進(jìn)展情況，并總結(jié)開發(fā)過程中遇到的難點，大家一起討論，教師針對相關(guān)問題提出解決方案，并對開發(fā)過程提出指導(dǎo)意見。另外，每個團(tuán)隊還可在小程序開發(fā)管理后臺將教師添加為小程序體驗成員，方便教師隨時通過“小程序教學(xué)助手”工具體驗每個團(tuán)隊上傳的體驗版小程序階段性成果，并及時給出指導(dǎo)意見。

3 課程成效

從理論知識點掌握角度看，在前8周基于案例的知識點講解過程中，學(xué)生對于案例所涉及的理論知識都可以理解與掌握，對于微信小程序開發(fā)者賬號申請、微信認(rèn)證、微信支付、微信開發(fā)者工具使用、微信相關(guān)配置、認(rèn)證與申請方法及政策法規(guī)等都有了清晰的認(rèn)識，從技術(shù)理論方面已掌握了小程序項目開發(fā)基本思路與流程。

從實踐與就業(yè)角度看，在學(xué)生組隊確定參賽題目過程中，引導(dǎo)大家觀察與發(fā)現(xiàn)校園中存在的痛點問題，并考慮是否可以通過信息技術(shù)手段加以解決。在用戶需求研究與產(chǎn)品原型設(shè)計階段，團(tuán)隊成員深入到目標(biāo)用戶當(dāng)中，通過實地訪談或調(diào)查問卷，觀察分析用戶的心理及行為特征，探索與掌握用戶真實需求，探討原型設(shè)計于用戶而言是否真的方便、易用、易理解，是否真的符合用戶認(rèn)知習(xí)慣，在學(xué)生意識中真正建立“以用戶為中心”的思維習(xí)慣，真正開始從用戶角度考慮產(chǎn)品設(shè)計與開發(fā)，而不再像從前一樣直接開發(fā)自己認(rèn)為應(yīng)該有的功能，這是本課程的最大收獲。

4 結(jié)語

微信小程序項目實訓(xùn)課程通過理論強(qiáng)化、項目實訓(xùn)、大賽實戰(zhàn)等方式對學(xué)生專項能力進(jìn)行培養(yǎng)，使學(xué)生建立全面、合理的課程知識結(jié)構(gòu)。以大賽為抓手，“以賽促學(xué)”，全面培養(yǎng)學(xué)生專業(yè)技能;“以賽促教”，切實提升教育教學(xué)成效;“以賽促用”，綜合運(yùn)用課堂理論知識解決實際問題。學(xué)生通過參賽對產(chǎn)品設(shè)計與開發(fā)有了更深層次的理解，學(xué)習(xí)效果顯著。通過本次課程建設(shè)在一定程度上促進(jìn)了學(xué)校教育教學(xué)改革，提高了計算機(jī)專業(yè)人才培養(yǎng)質(zhì)量。

參考文獻(xiàn)：

[1] 張小龍.? 張小龍首次全面闡述小程序1月9日上線[EB/OL]. http：//tech.ifeng.com/a/20161228/44523289_0.shtml.

[2] 王勛. “微信小程序開發(fā)”課程構(gòu)建與教學(xué)實踐[J]. 計算機(jī)時代，2018（3）：46-49.

[3] 王娟. 微信小程序在高校教學(xué)中的應(yīng)用與推廣[J]. 電腦知識與技術(shù)，2017，13（27）：147-148.

[4] 常娜，梁其烺. 基于微信小程序的“網(wǎng)頁設(shè)計與制作”課程資源的研究與設(shè)計[J]. 計算機(jī)產(chǎn)品與流通，2018（10）：23.

[5] 郭全中. 小程序及其未來[J]. 新聞與寫作，2017（3）：28-30.

[6] 李善壽.? CDIO工程教學(xué)模式在實踐教學(xué)中的實施方法研究[J]. 重慶科技學(xué)院學(xué)報（社會科學(xué)版），2010（20）：164-166.

[7] 李志博，周剛，楊奎武，等. 以賽促學(xué)，實戰(zhàn)演練，全面提升學(xué)生軟件工程綜合素質(zhì)[J]. 大學(xué)教育，2019（8）：66-68.

[8] 劉玉佳. 微信小程序開發(fā)系統(tǒng)實現(xiàn)及前景分析[J]. 信息通信，2017（1）： 260-261.

[9] 微信教育. 2019中國高校計算機(jī)大賽—微信小程序應(yīng)用開發(fā)賽[EB/OL]. https：//edu.weixin.qq.com/cgi-bin/newreadtemplate？t=edu _portal/zh-hans/intro/intro-match/index.

[10] 周文潔. 微信小程序開發(fā)零基礎(chǔ)入門[M]. 北京：清華大學(xué)出版社，2019.

[11] 鄒志楠. 互聯(lián)網(wǎng)團(tuán)隊的構(gòu)成[EB/OL]. https：//www.jianshu.com/p/d570f21694f2.

[12] 章劍林，沈千里. 互聯(lián)網(wǎng)產(chǎn)品用戶體驗[M]. 北京：清華大學(xué)出版社，2013.

[13] [英]加文·阿蘭伍德，皮特·拜爾. 國際經(jīng)典交互設(shè)計教程：用戶體驗設(shè)計[M]. 孔祥富，路融雪，譯. 北京：電子工業(yè)出版社，2015.

[14] [日]樽本徹也. 用戶體驗與可用性測試[M]. 陳嘯，譯. 北京：人民郵電出版社，2015.

[15] 柯惠新，沈浩. 調(diào)查研究中的統(tǒng)計分析法[M]. 第2版. 北京：中國傳媒大學(xué)出版社，2011.

[16] 微信官方文檔. 微信小程序設(shè)計指南[EB/OL].? https：//developers.weixin.qq.com/miniprogram/design/.

[17] 微信官方文檔. 微信小程序開發(fā)[EB/OL].? https：//developers.weixin.qq.com/miniprogram/dev/framework/.

（責(zé)任編輯：黃 ?。?/p>