《微信小程序項目案例開發(fā)》教學大綱

微信小程序項目案例開發(fā)教學大綱

課程名稱：微信小程序開發(fā)

學分：3.0總學時數(shù)：48

課程性質(zhì):選修課考核方式：考查/考試

總評成績：平時成績40%+期末考試成績60%

或：過程考評40%（平時作業(yè)20%+實驗20%）+最終作品及答辯30%+報

告30%

先修課程：數(shù)據(jù)庫原理，前端開發(fā)基礎(chǔ)，Web技術(shù)及應(yīng)用

01課程簡介

隨著社會的發(fā)展，互聯(lián)網(wǎng)新技術(shù)日益層出不窮。根植于微信內(nèi)部的微信小程序，

由于微信本身強大的社交屬性帶來了巨大的流量和超高的商業(yè)價值，其涉及的

應(yīng)用領(lǐng)域也在日益擴大，不久的將來很可能超過APP的數(shù)量。微信小程序(Mini

Program)是一種輕量級的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶無

需下載安裝即可在微信中使用小程序。本課程將以項目驅(qū)動為宗旨，以豐富案

例作實踐，從零開始講授微信小程序開發(fā)的入門基礎(chǔ)知識與開發(fā)技巧。

02課程目標及畢業(yè)要求指標點

目標1：了解微信小程序的特點、功能，學會從零創(chuàng)建一個微信小程序項目，

并進行調(diào)試開發(fā)，提交代碼。

目標2：了解小程序的基礎(chǔ)框架、組件，學會靈活運用相關(guān)組件進行應(yīng)用開發(fā)。

目標3：掌握微信小程序的各類應(yīng)用API使用技巧和云開發(fā)技能，理解其運行

原理。

目標4：掌握HTML、CSS、JavaScript知識并綜合運用，包括布局樣式設(shè)計

和邏輯的處理等，根據(jù)應(yīng)用需求實現(xiàn)完整的微信小程序項目的開發(fā)

表1課程教學目標及畢業(yè)要求支撐對照列表

03課程重點、難點

重點：小程序框架原理，各類視圖組件API的效果和使用方式，網(wǎng)絡(luò)通信、媒

體組件應(yīng)用、文件操作、讀寫緩存等應(yīng)用，小程序云開發(fā)方法。難點：理解

native、視圖層和渲染層的通信原理，掌握網(wǎng)絡(luò)通信、媒體組件應(yīng)用、文件

操作、讀寫緩存等機制原理與限制，canvas畫圖和動畫設(shè)計，小程序云開發(fā)

技巧等。

04教學內(nèi)容和學時分配

（一）第1章淺談微信小程序2學時

主要內(nèi)容：介紹小程序的誕生、特點和主要功能，講解如何注冊開發(fā)者賬號和

完善信息、開發(fā)工具的下載與安裝使用，以及簡單小程序項目目錄結(jié)構(gòu)。

重點：微信小程序發(fā)者賬號的創(chuàng)建，開發(fā)者工具的使用。

難點：熟悉開發(fā)者工具的使用及理解小程序項目各類主體文件的作用。

(二）第2章小程序的視圖與渲染2學時

主要內(nèi)容：介紹小程序的視圖層及渲染過程，講解各種頁面的數(shù)據(jù)綁定方法，

使用模板與引用代碼段的步驟及其相關(guān)案例。

重點：WXML文件代碼的基礎(chǔ)語法，數(shù)據(jù)綁定與渲染標簽。

難點：條件渲染及列表渲染的方法，模板的引用。

(三）第3章小程序的事件1學時

主要內(nèi)容：介紹小程序的事件與事件對象的概念，講解事件類型及事件綁定類

型的案例。

重點：常用的事件對象及其對應(yīng)的綁定方式。

難點：事件的兩大類型冒泡與非冒泡事件，以及如何阻止冒泡事件。

(四）第4章【扶貧超市Part1】開發(fā)準備1學時

主要內(nèi)容：介紹扶貧超市實戰(zhàn)項目的基本功能及需求分析，申請賬號并新建項

目，完成扶貧超市項目的第一部分內(nèi)容。

重點：項目需求分析和功能模塊劃分，申請賬號并創(chuàng)建項目雛形框架。

難點：項目需求分析和功能模塊劃分。

(五）第5章小程序項目的配置與生命周期1學時

主要內(nèi)容：介紹小程序項目的app.json全局配置，講解小程序的生命周期和

全局變量與函數(shù)。

重點：小程序項目的全局配置，頁面、窗口、tabBar等配置方法。

難點：小程序的生命周期，app對象和變量函數(shù)。

(六）第6章小程序頁面的配置與生命周期2學時

主要內(nèi)容：講解微信小程序頁面的窗口配置，頁面生命周期函數(shù)及執(zhí)行過程，

并結(jié)合新聞客戶端案例學習頁面跳轉(zhuǎn)和參數(shù)傳遞。

重點：掌握小程序的頁面生命周期函數(shù)，頁面跳轉(zhuǎn)和參數(shù)傳遞的過程。

難點：理解小程序頁面生命周期函數(shù)的執(zhí)行順序和過程。

(七）第7章【扶貧超市Part2】項目頁面框架配置1學時

主要內(nèi)容：完成扶貧超市項目頁面框架配置，主要包含項目目錄整理、項目

tarBar配置以及項目窗口配置。

重點：項目目錄結(jié)構(gòu)的搭建與tarBar和window配置。

難點：項目頁面框架的全局設(shè)計與屬性值配置。

(八）第8章頁面布局2學時

主要內(nèi)容：講解視圖層和基礎(chǔ)布局模型flex的用法，相對定位與絕對定位布局，

并通過簡易計算器案例講解布局實戰(zhàn)。

重點：flex布局與相對、絕對定位布局。

難點：flex布局的理解和配置。

(九）第9章小程序的樣式基礎(chǔ)2學時

主要內(nèi)容：講解樣式的基本使用、樣式屬性的配置，以及樣式選擇器的使用。

重點：樣式的基本用法和樣式屬性的配置。

難點：樣式選擇器的用法

(十）第10章組件4學時

主要內(nèi)容：按照功能分類依次介紹視圖容器、基礎(chǔ)內(nèi)容、表單、導航、多媒體

和地圖組件的用法。

重點：掌握小程序視圖層各類組件的用法

難點：小程序組件的運用場景，了解各組件的主要配置屬性及效果

(十一）第11章操作反饋工具與簡單的界面API2學時

主要內(nèi)容：講解四種操作反饋工具toast、modal、loading和action-sheet

的基本使用，并結(jié)合案例介紹幾種頁面反饋API的基本使用，包括設(shè)置背景、

設(shè)置tabBar、動態(tài)加載字體、下拉刷新等。

重點：小程序各種頁面反饋工具和界面API的使用

難點：tabBar與頁面導航的切換方法，Background背景樣式的設(shè)置

(十二）第12章【扶貧超市Part3】主要頁面的UI2學時

主要內(nèi)容：講解扶貧超市項目的主要頁面UI設(shè)計過程，包括首頁頁面、分類

頁面、購物車頁面、“我的”頁面、管理端商品管理頁面等頁面的UI設(shè)計。

重點：各主要頁面的UI設(shè)計和樣式代碼編寫。

難點：頁面UI的flex布局和樣式效果調(diào)試。

(十三）第13章認識云開發(fā)項目2學時

主要內(nèi)容：介紹微信小程序云開發(fā)的概念及其組成部分，創(chuàng)建云開發(fā)項目實例

講解構(gòu)建和部署云環(huán)境，完成新建云函數(shù)、獲取openid、管理文件和操作數(shù)

據(jù)庫等任務(wù)內(nèi)容。

重點：云函數(shù)的創(chuàng)建和調(diào)用，云開發(fā)數(shù)據(jù)庫的原理理解和操作使用。

難點：云開發(fā)數(shù)據(jù)庫的原理理解和操作過程。

(十四）第14章云開發(fā)數(shù)據(jù)庫2學時

主要內(nèi)容：介紹云開發(fā)數(shù)據(jù)庫的概念，并詳細介紹其數(shù)據(jù)類型、權(quán)限控制、安

全規(guī)則等，并演示云開發(fā)數(shù)據(jù)庫的復(fù)雜操作。

重點：掌握小程序云開發(fā)的數(shù)據(jù)庫類型和權(quán)限控制，并學會基本的數(shù)據(jù)庫操作。

難點：云開發(fā)數(shù)據(jù)庫的查詢匹配及聯(lián)表查詢。

(十五）第15章云函數(shù)及其調(diào)試2學時

主要內(nèi)容：講解小程序的云函數(shù)新建、部署和調(diào)用過程，包括云函數(shù)的常見操

作和調(diào)試測試。

重點：掌握熟悉云函數(shù)中JS語法書寫、函數(shù)調(diào)用和調(diào)試。

難點：云函數(shù)的云端調(diào)試和本地調(diào)試方法。

(十六）第16章【扶貧超市Part4】構(gòu)建數(shù)據(jù)庫與商品管理2學時

主要內(nèi)容：講解扶貧超市項目的后臺部分，主要包括數(shù)據(jù)庫設(shè)計和云端集合操

作，并結(jié)合云端數(shù)據(jù)庫完善項目中的商品管理wxml代碼和JS邏輯函數(shù)設(shè)計。

重點：數(shù)據(jù)庫的設(shè)計，相關(guān)邏輯函數(shù)的編寫。

難點：云函數(shù)的調(diào)用。

(十七）第17章系統(tǒng)底層的基礎(chǔ)API2學時

主要內(nèi)容：介紹了獲取系統(tǒng)信息API、定時器API和掃碼API，并講解了API

函數(shù)的調(diào)試方法。

重點：小程序系統(tǒng)底層API的用法和調(diào)試方法。

難點：小程序開發(fā)工具調(diào)試模式調(diào)試方法及斷點調(diào)試方法。

(十八）第18章網(wǎng)絡(luò)與文件上傳API2學時

主要內(nèi)容：講解微信小程序網(wǎng)絡(luò)API和文件API的用法，包括發(fā)起和中斷請求，

文件傳輸、保存、信息獲取，文件的打開刪除等操作，以及號碼歸屬地查詢小

程序案例講解了wx.request的應(yīng)用。

重點：小程序各類網(wǎng)絡(luò)API和文件API的用法與限制

難點：網(wǎng)絡(luò)請求的原理，本地文件與臨時文件區(qū)別用法，以及各類API對文

件源的要求。

(十九）第19章數(shù)據(jù)緩存API2學時

主要內(nèi)容：講解微信小程序數(shù)據(jù)緩存API的用法，包括本地緩存、數(shù)據(jù)的存儲、

獲取、刪除、清空等操作，并講解與緩存相關(guān)的API函數(shù)測試案例。

重點：小程序各類數(shù)據(jù)緩存API的用法。

難點：異步數(shù)據(jù)與同步數(shù)據(jù)的區(qū)別，緩存原理與限制。

(二十）第20章位置API2學時

主要內(nèi)容：講解微信小程序位置API的用法，包括位置信息的獲取，獲取和選

擇位置，查看位置，地圖組件控制，并講解位置API測試和路徑導航案例。

重點：小程序各類位置API的用法。

難點：兩種地圖坐標系的區(qū)別，標記的處理。

(二十一）第21章獲取用戶信息及登錄態(tài)管理2學時

主要內(nèi)容：介紹用戶數(shù)據(jù)信息分類與開放數(shù)據(jù)獲取流程，講解用戶登錄態(tài)管理

及其實現(xiàn)機制。

重點：小程序獲取用戶信息的相關(guān)API及其用法。

難點：用戶登錄態(tài)的實現(xiàn)機制。

(二十二）第22章【扶貧超市Part5】商品圖片上傳功能2學時

主要內(nèi)容：完成扶貧超市項目的商品圖片上傳功能部分，包括本地圖片選擇及

云開發(fā)端將圖片寫入數(shù)據(jù)庫等操作，實現(xiàn)圖片的選擇上傳、預(yù)覽與刪除等功能。

重點：圖片選擇上傳、預(yù)覽與刪除功能的實現(xiàn)

難點：圖片的選擇上傳與刪除邏輯實現(xiàn)。

(二十三）第23章扶貧超市項目功能完善6學時

主要內(nèi)容：完善扶貧超市項目的其他主要功能，包括商品詳情頁面、購物車管

理、結(jié)算與確認訂單、設(shè)置收貨地址、提交訂單并支付等相關(guān)功能頁面的頁面

效果和業(yè)務(wù)邏輯實現(xiàn)。

重點：項目各主要功能部分的頁面和邏輯代碼編寫。

難點：云函數(shù)的調(diào)用以及部分功能如訂單支付的邏輯處理。

09教學日歷

05選用教材

12教案

課程

微信小程序開發(fā)總計：48學時

名稱

課程專業(yè)選修

學分3.0

類別課

課程開課

周學時：04學時

編碼學期

任課

職稱

教師

授課具有數(shù)據(jù)庫、WEB開發(fā)或前端基礎(chǔ)選課

對象的學生人數(shù)

出版社

微信小程

教材作及清華大學出版社

序貫穿式蘭紅

者出版時2021年1月

名稱項目實戰(zhàn)

間

隨著社會的發(fā)展，互聯(lián)網(wǎng)新技術(shù)日益層出不窮。根植于微信內(nèi)部的微信小程序，

由于微信本身強大的社交屬性帶來了巨大的流量和超高的商業(yè)價值，其涉及的應(yīng)用領(lǐng)

域也在日益擴大，不久的將來很可能超過APP的數(shù)量。微信小程序(MiniProgram)是

一種輕量級的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶無需下載安裝即可在微

信中使用小程序。本課程將以項目驅(qū)動為宗旨，以豐富案例作實踐，從零開始講授微

信小程序開發(fā)的入門基礎(chǔ)知識與開發(fā)技巧。

本課程基于微信小程序平臺開發(fā)，從基礎(chǔ)開始學習，循序漸進，通過理論知識與

大量的案例來介紹微信小程序開發(fā)的各方面知識。具體內(nèi)容包括：微信小程序的前端

課程

基礎(chǔ)知識、小程序項目全局配置、頁面配置以及生命周期、小程序開發(fā)的頁面布局、

簡介樣式、組件使用、云開發(fā)的項目構(gòu)建及數(shù)據(jù)庫、API函數(shù)的使用，最后講解“扶貧超

市購物程序”微信小程序項目案例的綜合設(shè)計與完整實現(xiàn)。

通過本課程的學習，使學生對微信小程序有較好的理解，對小程序的開發(fā)有較好

的掌握。專業(yè)技能方面，加強實訓教學，通過大量的上機練習、代碼閱讀、代碼改錯、

規(guī)范化檢查，訓練學生編寫程序的熟練度和規(guī)范性；通過項目實踐，提升動手能力，

將所學知識整合運用到項目中。職業(yè)素質(zhì)方面，通過項目組角色分配、技術(shù)研討等多

種訓練手段，培養(yǎng)學生具備良好的職業(yè)習慣，實現(xiàn)學生在校即具備準職業(yè)人素養(yǎng)的目

標。

本課程將以項目驅(qū)動為宗旨，以豐富案例作實踐，并以“扶貧超市購物程

教學序”項目作為貫穿課程的實戰(zhàn)項目，從零開始系統(tǒng)講授微信小程序開發(fā)的入門

目的基礎(chǔ)知識與開發(fā)技巧。結(jié)合課堂講授、課程實驗、網(wǎng)絡(luò)教學資源共享等方式，

使學生系統(tǒng)地理解和掌握微信小程序的設(shè)計、開發(fā)和實現(xiàn)方法。

程序設(shè)計類的課程需要大量的實操訓練，因而課程教學采用機房授課，便于加強

教學

學生實踐操作，同時課堂教學與網(wǎng)絡(luò)教學相結(jié)合，以提高學生的思維能力、綜合能力

方法與創(chuàng)新能力。

1.1.本課程主要采用機房授課，理論方面多媒體課件+板書，實踐方面帶領(lǐng)

學生針對具體問題分析需求，設(shè)計解決方案，學習相關(guān)知識點和API，然后代碼實現(xiàn)。

2.2.通過網(wǎng)絡(luò)教學平臺+課程實驗+課程視頻的授課方式，幫助學生理解重

點難點內(nèi)容。

3.2.師生通過電話、QQ、微信、課程網(wǎng)絡(luò)教學平臺留言窗口等多種方式建立聯(lián)

系、答疑。

4.3.通過案例演示和新技術(shù)新方法介紹，讓學生學會使用文獻檢索工具查找資

料并將理論與實際應(yīng)用結(jié)合起來，激發(fā)學習興趣。

課程的重點在于培養(yǎng)學生基于微信平臺開發(fā)的能力，了解小程序框架原理，各類

課程

組件API的應(yīng)用效果和使用方式，靈活應(yīng)用前端基本編程方法和技巧，掌握微信小程

重點序開發(fā)的完整設(shè)計、實現(xiàn)、測試和發(fā)布。

課程

課程的難點在于培養(yǎng)學生面對具體需求獨立思考、分析問題和創(chuàng)新設(shè)計的能力。

難點

使學習者在學習過程中逐步理解微信小程序框架基本原理，熟悉常用的API，掌

教學

握各類組件及事件處理，能夠結(jié)合Web后臺實現(xiàn)程序前端設(shè)計，為學生學習后續(xù)從事

要求計算機專業(yè)開發(fā)、考研、考軟件設(shè)計師等打下良好的軟件開發(fā)基礎(chǔ)。

1.本課程以考核為主：

過程考評40%（平時作業(yè)20%+實驗20%）+最終作品及答辯30%+報告30%

2.過程考評可增加在線測驗，題型主要有：選擇題、填空題、簡答題、代碼閱讀

題、代碼設(shè)計題。

考核3.實驗注重過程考核：包括平時的上機實驗（20%）+結(jié)課前的機考（10%），上

方式機實驗包括：實驗預(yù)習(5%)、出勤率(5%)、完成情況(30%)、現(xiàn)場提問(30%)、實驗報

告(30%)。實驗內(nèi)容主要是根據(jù)課程進度完成所需的項目功能，為最終實現(xiàn)完整項目

做準備。

4.最終作品為微信小程序前端+PHP/Servlet后臺的完整項目，作品發(fā)布并演

示，撰寫報告。

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華大學出版社,

2021.

參考

[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清華大學出版

資料社,2019.

起周

第1周~第12周

止周

第1講

授課內(nèi)容淺談微信小程序

了解小程序的誕生、特點和主要功能，學會如何注冊開發(fā)者賬

教學目的

號和完善信息、開發(fā)工具的下載與安裝使用，以及理解簡單小程序

與要求項目目錄結(jié)構(gòu)。

重點重點：微信小程序發(fā)者賬號的創(chuàng)建，開發(fā)者工具的使用。

難點：熟悉開發(fā)者工具的使用及理解項目各類主體文件的作用。

難點

1.1小程序簡介

教學進程

1.2小程序開發(fā)準備

安排1.3小程序開發(fā)工具的使用

1.4小程序項目目錄結(jié)構(gòu)

課后學習小程序開發(fā)者工具環(huán)境配置，完善開發(fā)者賬號信息

簡單小程序的調(diào)試運行和真機測試

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華

主要大學出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清

華大學出版社,2019.

開發(fā)者賬號注冊的注意事項，運用開發(fā)者工具進行簡單小程序

課后總結(jié)分析項目真機調(diào)試，在手機端實現(xiàn)成功運行第一個微信小程序“Hello，

Word！”。

第2講

授課內(nèi)容小程序的視圖與渲染

教學目的了解小程序的視圖層及渲染過程，學會各種頁面的數(shù)據(jù)綁定方

法，標簽渲染、模板與代碼段的定義和引用使用等

與要求

重點重點：WXML文件代碼的基礎(chǔ)語法，數(shù)據(jù)綁定與渲染標簽。

難點：條件渲染及列表渲染的方法，模板的引用。

難點

2.1視圖與渲染過程

教學進程2.2數(shù)據(jù)綁定

2.3渲染標簽

安排

2.4模板與引用

案例九九乘法表

課后學習

完善九九乘法表案例

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華

主要大學出版社,2021.

[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清

參考資料

華大學出版社,2019.

課后

復(fù)習WXML、WXSS、JS代碼語法，參考HTML網(wǎng)頁知識。

總結(jié)分析

第3講

授課內(nèi)容小程序的事件基礎(chǔ)與項目基本配置

理解小程序的事件與事件對象的概念，了解事件類型及事件綁定類

教學目的

型的知識；學會小程序項目的全局配置，掌握小程序的生命周期和全局

與要求變量與函數(shù)的用法。

重點重點：常用的事件對象及其對應(yīng)的綁定方式，項目的全局配置方法。

難點：冒泡與非冒泡事件，小程序的生命周期。

難點

3.1事件對象3.2事件類型3.3事件綁定類

型

5.1app.json配置屬性5.2頁面配置

教學進程5.3窗口配置5.4tab

Bar配置

安排

5.5網(wǎng)絡(luò)超時配置5.6權(quán)限配

置

5.7小程序的生命周期

案例使用app對象的案例

課后學習1.冒泡事件測試案例實現(xiàn)。

任務(wù)布置2.生命周期測試案例和app對象測試案例實現(xiàn)。

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華大學

主要

出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清華大

學出版社,2019.

課后及時復(fù)習熟悉項目配置和生命周期的執(zhí)行過程，并熟練使用事件和獲取

事件相關(guān)對象的數(shù)據(jù)信息。

總結(jié)分析

第4講

授課內(nèi)容小程序頁面的配置與生命周期

了解微信小程序頁面的窗口配置，并能區(qū)分頁面配置和全局配置；

教學目的

理解頁面生命周期函數(shù)及執(zhí)行過程，并結(jié)合新聞客戶端案例掌握頁面跳

與要求轉(zhuǎn)和參數(shù)傳遞方法。

重點重點：掌握頁面生命周期函數(shù)，頁面跳轉(zhuǎn)和參數(shù)傳遞的過程。

難點：理解小程序頁面生命周期函數(shù)的執(zhí)行順序和過程。

難點

6.1小程序的頁面配置

教學進程6.2頁面的生命周期

6.3頁面跳轉(zhuǎn)

安排

6.4頁面間的參數(shù)傳遞

案例新聞客戶端

課后學習

完善新聞客戶端案例

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華大學

主要出版社,2021.

[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清華大

參考資料

學出版社,2019.

課后

復(fù)習頁面生命周期函數(shù)的用法，頁面的三種切換方式。

總結(jié)分析

第5講

授課內(nèi)容實戰(zhàn)項目“扶貧超市”的前期工作

完成“扶貧超市”項目Part1和Part2:了解項目基本功能及需求分

教學目的

析，申請賬號并新建項目；對項目進行頁面框架配置，主要包含項目目

與要求錄整理、項目tarBar配置以及項目窗口配置。

重點：項目需求分析和功能模塊劃分，申請賬號，創(chuàng)建項目框架并

重點進行項目目錄結(jié)構(gòu)的搭建與全局配置

難點：需求分析和功能模塊劃分，頁面框架的全局設(shè)計與屬性值配

難點

置

4.1項目背景與需求

教學進程4.2開發(fā)準備

7.1項目目錄整理

安排

7.2項目tabBar配置

7.3項目窗口配置

課后學習

完善該項目的前期框架設(shè)計與tabBar和window配置

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華大學

主要出版社,2021.

[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清華大

參考資料

學出版社,2019.

課后

熟悉新建小程序項目的流程步驟，并熟練掌握相關(guān)屬性配置

總結(jié)分析

第6講

授課內(nèi)容頁面布局

教學目的掌握視圖層和基礎(chǔ)布局模型flex的用法，相對定位與絕對定位

布局，并通過簡易計算器案例進行布局實戰(zhàn)

與要求

重點重點：flex布局與相對、絕對定位布局。

難點：flex布局的理解和配置。

難點

8.1頁面布局概述

8.2flex布局基本概念

教學進程8.3flex布局案例

8.4flex容器屬性詳解

安排

8.5flex項目屬性詳解

8.6相對定位和絕對定位布局

案例簡易計算器

課后學習1.課本flex布局相關(guān)內(nèi)容的源碼學習；

任務(wù)布置2.完善簡易計算器案例。

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華

主要大學出版社,2021.

[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清

參考資料

華大學出版社,2019.

課后總結(jié)分析復(fù)習flex布局，相對定位與絕對定位的樣式編寫。

第7講

授課內(nèi)容小程序的樣式基礎(chǔ)

教學目的掌握樣式的基本使用、樣式屬性的配置，以及樣式選擇器的使

用。

與要求

重點重點：掌握樣式的基本用法和樣式屬性的配置。

難點：樣式選擇器的用法。

難點

教學進程9.1樣式的基本使用

9.2樣式的屬性

安排

9.3樣式選擇器的使用

課后學習1.尺寸屬性測試案例

任務(wù)布置2.邊距屬性測試案例

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華

主要大學出版社,2021.

[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清

參考資料

華大學出版社,2019.

課后總結(jié)分析復(fù)習樣式選擇器的用法。

第8講

授課內(nèi)容組件

教學目的

掌握視圖容器、基礎(chǔ)內(nèi)容、表單組件的用法

與要求

重點重點：掌握小程序視圖層各類組件的用法。

難點：小程序組件的運用場景，各組件的主要屬性配置及效果。

難點

教學進程10.1初始組件

10.2視圖容器組件

安排

10.3基礎(chǔ)內(nèi)容組件

10.4表單組件

課后學習

各組件的測試案例源碼學習

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華

主要大學出版社,2021.

[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清

參考資料

華大學出版社,2019.

課后

及時復(fù)習熟悉各組件的使用場景及API函數(shù)用法。

總結(jié)分析

第9講

授課內(nèi)容組件（續(xù)）

教學目的掌握form表單提交組件、導航組件、多媒體組件和地圖組件的

用法

與要求

重點重點：掌握小程序視圖層各類組件的用法。

難點：小程序組件的運用場景，各組件的主要屬性配置及效果。

難點

教學進程10.5form表單提交組件

10.6導航組件navigator

安排

10.7多媒體組件

10.8地圖map

課后學習

各組件的測試案例源碼學習

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華

主要大學出版社,2021.

[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清

參考資料

華大學出版社,2019.

課后

及時復(fù)習熟悉各組件的使用場景及API函數(shù)用法。

總結(jié)分析

第10講

授課內(nèi)容操作反饋工具與簡單的界面API

了解四種操作反饋工具toast、modal、loading和action-shee

教學目的

t的基本使用，并結(jié)合案例學習幾種頁面反饋API的基本使用，包括

與要求

設(shè)置背景、設(shè)置tabBar、動態(tài)加載字體、下拉刷新等

重點：小程序各種頁面反饋工具和界面API的使用。

重點

難點：tabBar與頁面導航的切換方法，Background背景樣式的

難點

設(shè)置。

11.1toast吐司提示

11.2modal彈窗提示

11.3loading加載提示

教學進程

11.4action-sheet操作菜單

安排

11.5背景Background樣式

11.6動態(tài)設(shè)置TabBar屬性

11.7加載第三方字體wx.loadFontFace

11.8下拉刷新PullDownRefresh

課后學習

操作反饋測試案例源碼學習

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華大

主要學出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清華

大學出版社,2019.

課后

總結(jié)各種操作反饋工具的使用場景及API函數(shù)的用法。

總結(jié)分析

第11講

授課內(nèi)容【扶貧超市Part3】主要頁面的UI設(shè)計

學習扶貧超市項目的主要頁面UI設(shè)計過程，包括首頁頁面、分

教學目的

類頁面、購物車頁面、“我的”頁面、管理端商品管理頁面等頁面

與要求

的UI設(shè)計

重點重點：各主要頁面的UI設(shè)計和樣式代碼編寫。

難點難點：頁面UI的flex布局和樣式效果調(diào)試。

12.1首頁UI設(shè)計

教學進程12.2分類頁面UI設(shè)計

安排12.3購物車頁面UI設(shè)計

12.4“我的”頁面UI設(shè)計

12.5管理員端商品管理頁面UI設(shè)計

課后學習

完善扶貧超市項目各主要頁面UI設(shè)計

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華

主要大學出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清

華大學出版社,2019.

課后復(fù)習flex布局知識并學會靈活運用flex布局以及WXML面板進

總結(jié)分析行樣式調(diào)試。

第12講

授課內(nèi)容認識云開發(fā)項目

了解微信小程序云開發(fā)的概念及其組成部分，通過創(chuàng)建云開發(fā)

教學目的

項目實例講解構(gòu)建和部署云環(huán)境，完成新建云函數(shù)、獲取openid、

與要求

管理文件和操作數(shù)據(jù)庫等任務(wù)內(nèi)容。

重點：云函數(shù)的創(chuàng)建和調(diào)用，云開發(fā)數(shù)據(jù)庫的原理理解和操作

重點

使用。

難點

難點：云開發(fā)數(shù)據(jù)庫的原理理解和操作過程。

13.1云開發(fā)概念與組成部分

13.2創(chuàng)建與開通云開發(fā)項目

教學進程

13.4新建云函數(shù)案并部署例

安排

13.5云開發(fā)之用戶管理案例

13.6上傳文件案例以及云空間文件管理

13.7數(shù)據(jù)庫操作案例

課后學習

查閱云開發(fā)文檔，完善并實現(xiàn)數(shù)據(jù)庫操作案例

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華

主要大學出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清

華大學出版社,2019.

課后

復(fù)習云開發(fā)項目的操作流程。

總結(jié)分析

第13講

授課內(nèi)容云開發(fā)數(shù)據(jù)庫

教學目的了解云開發(fā)數(shù)據(jù)庫的概念，并學習其數(shù)據(jù)類型、權(quán)限控制、安全規(guī)

則等，以及云開發(fā)數(shù)據(jù)庫的復(fù)雜操作。

與要求

重點：掌握小程序云開發(fā)的數(shù)據(jù)庫類型和權(quán)限控制，并學會基本的

重點

數(shù)據(jù)庫操作。

難點難點：云開發(fā)數(shù)據(jù)庫的查詢匹配及聯(lián)表查詢。

14.1基本概念

教學進程

14.2數(shù)據(jù)類型

安排14.3權(quán)限控制

14.4數(shù)據(jù)庫復(fù)雜操作

課后學習

完成云開發(fā)數(shù)據(jù)庫的復(fù)雜操作聯(lián)表查詢

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華大學

主要出版社,2021.

[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清華大

參考資料

學出版社,2019.

課后

復(fù)習小程序云開發(fā)數(shù)據(jù)庫的基本操作方法。

總結(jié)分析

第14講

授課內(nèi)容云函數(shù)及其調(diào)試

教學目的掌握小程序的云函數(shù)新建、部署和調(diào)用過程，包括云函數(shù)的常見操

與要求作和調(diào)試測試。

重點重點：云函數(shù)中JS語法書寫、函數(shù)調(diào)用和調(diào)試。

難點難點：云函數(shù)的云端調(diào)試和本地調(diào)試方法。

15.1云函數(shù)基礎(chǔ)

教學進程

15.2wx-server-sdk初始化

安排

15.3云函數(shù)的常見操作

15.4云開發(fā)調(diào)試

課后學習

云函數(shù)調(diào)用及云開發(fā)云端和本地調(diào)試練習

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華大學

主要出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清華大

學出版社,2019.

課后

及時復(fù)習云函數(shù)常見操作方法。

總結(jié)分析

第15講

授課內(nèi)容【扶貧超市Part4】構(gòu)建數(shù)據(jù)庫與商品管理

講解扶貧超市項目的后臺部分，主要包括數(shù)據(jù)庫設(shè)計和云端集合操

教學目的

作，并結(jié)合云端數(shù)據(jù)庫完善項目中的商品管理wxml代碼和JS邏輯函數(shù)

與要求

設(shè)計。

重點重點：數(shù)據(jù)庫的設(shè)計，相關(guān)邏輯函數(shù)的編寫。

難點難點：項目中的云函數(shù)的調(diào)用。

16.1建立數(shù)據(jù)庫

教學進程16.2用戶與管理員身份的登錄判斷

安排16.3添加商品

16.4修改商品信息

16.5刪除商品

課后學習

完善本項目數(shù)據(jù)庫設(shè)計與商品管理部分的編碼。

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華大學

主要出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清華大

學出版社,2019.

課后

復(fù)習數(shù)據(jù)庫的設(shè)計方法以及UI樣式設(shè)計。

總結(jié)分析

第16講

授課內(nèi)容系統(tǒng)底層的基礎(chǔ)API

教學目的了解獲取系統(tǒng)信息API、定時器API和掃碼API，掌握API函

與要求數(shù)的調(diào)試方法。

重點重點：小程序系統(tǒng)底層API的用法和調(diào)試方法。

難點難點：小程序開發(fā)工具調(diào)試模式調(diào)試方法及斷點調(diào)試方法。

17.1獲取系統(tǒng)信息的API

教學進程

17.2定時器

安排

17.3調(diào)試API

17.4掃碼

課后學習

實現(xiàn)定時器測試案例，Console測試案例，scanCode示例案例

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清

主要華大學出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:

清華大學出版社,2019.

課后

熟悉其他系統(tǒng)底層API的用法和API調(diào)試方法。

總結(jié)分析

第17講

授課內(nèi)容網(wǎng)絡(luò)與文件上傳API

了解和掌握微信小程序網(wǎng)絡(luò)API和文件API的用法，包括發(fā)

教學目的

起和中斷請求，文件傳輸、保存、信息獲取，文件的打開刪除等

與要求

操作，以及號碼歸屬地查詢小程序案例講解wx.request的應(yīng)用。

重點：小程序各類網(wǎng)絡(luò)API和文件API的用法與限制。

重點

難點：網(wǎng)絡(luò)請求的原理，本地文件與臨時文件區(qū)別用法，以

難點

及各類API對文件源的要求。

18.1網(wǎng)絡(luò)基礎(chǔ)

教學進程18.2wx.request

安排18.3圖片選擇、預(yù)覽與保存

18.4文件的上傳與下載

案例號碼歸屬地查詢小程序

課后學習

完善號碼歸屬地查詢小程序案例

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清

主要華大學出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:

清華大學出版社,2019.

復(fù)習網(wǎng)絡(luò)請求和文件上傳的原理和流程，以及小程序?qū)?yīng)AP

課后

I

總結(jié)分析

的用法。

第18講

授課內(nèi)容數(shù)據(jù)緩存API

掌握微信小程序數(shù)據(jù)緩存API的用法，包括本地緩存、數(shù)據(jù)的

教學目的

存儲、獲取、刪除、清空等操作，并講解與緩存相關(guān)的API函數(shù)測

與要求

試案例。

重點重點：小程序各類數(shù)據(jù)緩存API的用法。

難點難點：異步數(shù)據(jù)與同步數(shù)據(jù)的區(qū)別，緩存原理與限制。

19.1wx.setStorage寫入緩存

19.2wx.getStorage讀取緩存

教學進程19.3wx.removeStorage移除緩存

安排19.4wx.getStorageInfo獲取全部緩存信息

19.5wx.clearStorage清理緩存

19.6數(shù)據(jù)緩存API函數(shù)同步版本

案例數(shù)據(jù)緩存API測試案例

課后學習

完善數(shù)據(jù)緩存API測試案例

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華

主要大學出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清

華大學出版社,2019.

課后

掌握緩存原理和功能作用，區(qū)分異步數(shù)據(jù)與同步數(shù)據(jù)。

總結(jié)分析

第19講

授課內(nèi)容位置API

掌握微信小程序位置API的用法，包括位置信息的獲取，獲取和

教學目的

選擇位置，查看位置，地圖組件控制，并講解位置API測試和路徑

與要求

導航案例。

重點重點：小程序各類位置API的用法。

難點難點：兩種地圖坐標系的區(qū)別，標記的處理。

20.1wx.getLocation獲取當前位置

20.2wx.chooseLocation用地圖選擇位置

教學進程20.3wx.openLocation用內(nèi)置地圖查看位置

安排20.4wx.onLocationChange監(jiān)聽實時位置

20.5wx.offLocationChange關(guān)閉監(jiān)聽

案例位置API測試案例

案例路徑導航案例

課后學習

完善并實現(xiàn)路徑導航案例

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華

主要大學出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清

華大學出版社,2019.

課后結(jié)合實際應(yīng)用，學習和掌握小程序中地圖和導航相關(guān)功能設(shè)

總結(jié)分析計。

第20講

授課內(nèi)容獲取用戶信息及登錄態(tài)管理

教學目的了解用戶數(shù)據(jù)信息分類與開放數(shù)據(jù)獲取流程，掌握用戶登錄態(tài)管理及

與要求其實現(xiàn)機制。

重點重點：小程序獲取用戶信息的相關(guān)API及其用法。

難點難點：用戶登錄態(tài)的實現(xiàn)機制。

21.1用戶數(shù)據(jù)分類與開發(fā)數(shù)據(jù)獲取

21.2敏感信息兩種獲取方式

教學進程21.3wx.login

安排21.4wx.getUserInfo獲取信息

21.5與授權(quán)相關(guān)的API

21.6用戶登錄態(tài)管理

21.7獲取用戶信息編碼說明

課后學習

查閱資料，進一步了解和學習小程序登錄態(tài)實現(xiàn)機制。

任務(wù)布置

教材：

[1]蘭紅.微信小程序貫穿式項目實戰(zhàn)[M].北京:清華大學

主要出版社,2021.

參考資料[2]周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京:清華大

學出版社,2019.

課后結(jié)合Web應(yīng)用中的session與cookie講解登錄態(tài)實現(xiàn)機制，講解利

總結(jié)分析用開發(fā)者自己的服務(wù)器實現(xiàn)登錄機制的具體編碼過程。

第21講

授課內(nèi)容【扶貧超市Part5】商品圖片上傳功能

講解扶貧超市項目的商品圖片上傳功能部分，包括本地圖片選擇及云

教學目的

開發(fā)端將圖片寫入數(shù)據(jù)庫等操作，實現(xiàn)圖片的選擇上傳、預(yù)覽