◆ 項(xiàng)目驅(qū)動(dòng)，真實(shí)案例，一案到底。

◆ 以用為本，學(xué)以致用，用而學(xué)之。

◆ 思政融合，資源豐富，代碼詳盡。

前 言

為貫徹落實(shí)黨的二十大精神和黨中央、國(guó)務(wù)院有關(guān)決策部署，按照《關(guān)于深化現(xiàn)代職業(yè)教育體系建設(shè)改革的意見(jiàn)》《國(guó)家職業(yè)教育改革實(shí)施方案》（國(guó)發(fā)〔2019〕4號(hào)）有關(guān)要求，堅(jiān)持以教促產(chǎn)、以產(chǎn)助教，不斷延伸教育鏈、服務(wù)產(chǎn)業(yè)鏈、支撐供應(yīng)鏈、打造人才鏈、提升價(jià)值鏈，加快形成產(chǎn)教良性互動(dòng)、校企優(yōu)勢(shì)互補(bǔ)的產(chǎn)教深度融合發(fā)展格局，持續(xù)優(yōu)化人力資源供給結(jié)構(gòu)，為全面建設(shè)社會(huì)主義現(xiàn)代化國(guó)家提供強(qiáng)大人力資源支撐，國(guó)家發(fā)展和改革委員會(huì)同有關(guān)部門研究制定的《職業(yè)教育產(chǎn)教融合賦能提升行動(dòng)實(shí)施方案（2023—2025年）》指出“夯實(shí)職業(yè)院校發(fā)展基礎(chǔ)”，為職業(yè)院校的教材開(kāi)發(fā)指引了方向。

教材建設(shè)是高職院校教育教學(xué)工作的重要組成部分，高質(zhì)量的教材是培養(yǎng)高質(zhì)量人才的基本保證，高職教材作為體現(xiàn)高職教育特色的知識(shí)載體和教學(xué)的基本工具，直接關(guān)系到高職教育能否為一線崗位培養(yǎng)符合要求的高技術(shù)型、高應(yīng)用型人才。但是長(zhǎng)期以來(lái)，高職院校所使用的教材大多為傳統(tǒng)模式的教材，本書(shū)是編者對(duì)高職教材的一次探索，以符合高職教育規(guī)律的、基于工作過(guò)程的角度進(jìn)行編寫。

本書(shū)以一個(gè)實(shí)際的商城小程序項(xiàng)目為中心，全面介紹了應(yīng)用小程序基礎(chǔ)知識(shí)和開(kāi)發(fā)流程所涉及的各種操作，包括常用組件、新聞模塊、商品模塊和數(shù)據(jù)接口等內(nèi)容。

本書(shū)具有以下特色：

（1）項(xiàng)目驅(qū)動(dòng)。本書(shū)分為10個(gè)項(xiàng)目，每個(gè)項(xiàng)目包含若干個(gè)任務(wù)，每個(gè)任務(wù)通過(guò)多個(gè)案例來(lái)講解。本書(shū)從小程序開(kāi)發(fā)實(shí)際應(yīng)用需求出發(fā)，從軟件開(kāi)發(fā)的角度組織知識(shí)內(nèi)容，將知識(shí)點(diǎn)融入實(shí)際項(xiàng)目開(kāi)發(fā)，注重解決具體應(yīng)用問(wèn)題的方法和實(shí)現(xiàn)技術(shù)。

（2）一案到底。本書(shū)以商城小程序項(xiàng)目為中心來(lái)組織內(nèi)容，采用“一案到底”的組織方式使零散的知識(shí)具有連貫性，使學(xué)生對(duì)小程序開(kāi)發(fā)流程的認(rèn)識(shí)更加完整，同時(shí)加強(qiáng)案例與實(shí)際生活的聯(lián)系，使案例具有實(shí)用性和趣味性。

（3）技能實(shí)用。本書(shū)選取內(nèi)容遵循實(shí)用原則和“80/20”原則，實(shí)用原則指的是所選技術(shù)是能夠解決工作中實(shí)際問(wèn)題的技術(shù)，“80/20”原則是指企業(yè)80%的時(shí)間在使用20%的核心技術(shù)。因此，本書(shū)摒棄了大量非核心的理論知識(shí)及技術(shù)，而專注于常用的核心技術(shù)講解及訓(xùn)練。“以用為本、學(xué)以致用、不用不學(xué)、學(xué)了就會(huì)”是本書(shū)內(nèi)容選擇的標(biāo)準(zhǔn)。

（4）“教、學(xué)、做”一體化。每一個(gè)任務(wù)均是先提出任務(wù)目標(biāo)，再由案例演示完成任務(wù)過(guò)程，最后由學(xué)生模仿完成類似的任務(wù)。本書(shū)在“教、學(xué)、做”過(guò)程中，通過(guò)三重循環(huán)使學(xué)生掌握知識(shí)點(diǎn)，第一重為認(rèn)識(shí)和模仿，第二重為熟練和深化，第三重為創(chuàng)新和提高。

為了方便教學(xué)和讀者使用，本書(shū)配備了豐富的二維碼資源和超星課程（https://www. xueyinonline.com/detail/249131016），幫助讀者全面掌握微信小程序開(kāi)發(fā)相關(guān)技能。

本書(shū)由廣東科貿(mào)職業(yè)學(xué)院黃龍泉老師組織編寫，由黃龍泉、郭峰（包頭輕工職業(yè)技術(shù)學(xué)院）、朱倩（河源市職業(yè)技術(shù)學(xué)校）任主編，由楊玉鳳（山東中醫(yī)藥大學(xué)）、李瑞國(guó)（山東中醫(yī)藥大學(xué)）、廖遠(yuǎn)來(lái)（河源職業(yè)技術(shù)學(xué)院）任副主編，廣州國(guó)為信息科技有限公司黎曉鋒、廣州鉑睿信息技術(shù)有限公司彭丹總監(jiān)也參與了本書(shū)的編寫工作。在本書(shū)編寫過(guò)程中，我們得到了中國(guó)水利水電出版社和同行的大力支持和幫助，在此一并表示感謝。

由于編者水平有限，書(shū)中不足之處在所難免，懇請(qǐng)讀者批評(píng)指正。

編 者

2024年10月

前言

項(xiàng)目1 初識(shí)微信小程序 1
任務(wù)1.1 注冊(cè)小程序 2
1.1.1 注冊(cè)小程序賬號(hào) 2
1.1.2 查看小程序ID 6
任務(wù)1.2 認(rèn)識(shí)小程序開(kāi)發(fā)者工具 7
1.2.1 安裝微信開(kāi)發(fā)者工具 7
1.2.2 體驗(yàn)微信小程序 9
1.2.3 開(kāi)發(fā)者工具的介紹 11
任務(wù)1.3 小程序目錄結(jié)構(gòu) 15
1.3.1 小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區(qū)別 15
1.3.2 項(xiàng)目配置文件 16
1.3.3 主體文件 18
1.3.4 頁(yè)面文件 20
1.3.5 其他文件 21
項(xiàng)目小結(jié) 23
學(xué)習(xí)評(píng)價(jià) 23
項(xiàng)目實(shí)訓(xùn) 24
項(xiàng)目2 小程序編程基礎(chǔ) 26
任務(wù)2.1 小程序的執(zhí)行順序 27
2.1.1 小程序注冊(cè)函數(shù)App() 28
2.1.2 頁(yè)面注冊(cè)函數(shù)Page() 29
任務(wù)2.2 構(gòu)建頁(yè)面數(shù)據(jù) 31
2.2.1 頁(yè)面數(shù)據(jù) 31
2.2.2 數(shù)據(jù)綁定 33
任務(wù)2.3 列表渲染 35
2.3.1 wx:for和wx:key的使用 35
2.3.2 block wx:for的使用 37
任務(wù)2.4 條件渲染 39
2.4.1 wx:if的使用 39
2.4.2 block wx:if的使用 39
2.4.3 hidden的使用 40
任務(wù)2.5 事件綁定 40
2.5.1 事件的使用方式 41
2.5.2 事件的分類 42
2.5.3 事件的捕獲階段 44
2.5.4 綁定事件示例 45
項(xiàng)目小結(jié) 48
學(xué)習(xí)評(píng)價(jià) 48
項(xiàng)目實(shí)訓(xùn) 48
項(xiàng)目3 小程序常用組件 52
任務(wù)3.1 Flex彈性盒模型布局 53
3.1.1 Flex布局相關(guān)屬性 54
3.1.2 Flex布局案例 57
3.1.3 Flex項(xiàng)目布局屬性 59
任務(wù)3.2 “天天打卡”布局設(shè)計(jì) 60
3.2.1 案例展示 60
3.2.2 案例初始化 61
3.2.3 頁(yè)面基本結(jié)構(gòu) 62
任務(wù)3.3 “天天打卡”功能實(shí)現(xiàn) 63
3.3.1 獲得個(gè)人信息—開(kāi)放數(shù)據(jù) 63
3.3.2 打卡名稱—輸入框組件 64
3.3.3 打卡地點(diǎn)—地理位置API 65
3.3.4 打卡時(shí)間—picker組件 67
3.3.5 重復(fù)日期—條件運(yùn)算符 70
任務(wù)3.4 “天天打卡”數(shù)據(jù)處理 71
3.4.1 消息提示框API 71
3.4.2 數(shù)據(jù)保存—寫入緩存 73
3.4.3 打卡標(biāo)簽—讀取緩存 74
項(xiàng)目小結(jié) 76
學(xué)習(xí)評(píng)價(jià) 76
項(xiàng)目實(shí)訓(xùn) 76
項(xiàng)目4 商城首頁(yè)模塊開(kāi)發(fā) 78
任務(wù)4.1 商城項(xiàng)目需求分析 79
4.1.1 首頁(yè)功能需求 80
4.1.2 新聞頁(yè)功能需求 80
4.1.3 產(chǎn)品頁(yè)功能需求 80
4.1.4 購(gòu)物車頁(yè)功能需求 80
4.1.5 個(gè)人中心頁(yè)功能需求 81
任務(wù)4.2 商城項(xiàng)目創(chuàng)建 81
4.2.1 新建小程序項(xiàng)目 82
4.2.2 新建頁(yè)面文件 82
4.2.3 導(dǎo)航欄設(shè)計(jì) 83
任務(wù)4.3 商城首頁(yè)視圖的設(shè)計(jì) 84
4.3.1 tabBar組件的設(shè)計(jì) 84
4.3.2 swiper組件的設(shè)計(jì) 86
4.3.3 navigator組件的設(shè)計(jì) 88
4.3.4 scroll-view組件的設(shè)計(jì) 90
4.3.5 公共樣式的設(shè)計(jì) 93
任務(wù)4.4 商城首頁(yè)動(dòng)畫的實(shí)現(xiàn) 94
4.4.1 Animation動(dòng)畫實(shí)例 94
4.4.2 關(guān)鍵幀動(dòng)畫 95
4.4.3 實(shí)現(xiàn)商品動(dòng)畫效果 97
項(xiàng)目小結(jié) 99
學(xué)習(xí)評(píng)價(jià) 100
項(xiàng)目實(shí)訓(xùn) 100
項(xiàng)目5 新聞頁(yè)面模塊開(kāi)發(fā) 102
任務(wù)5.1 新聞頁(yè)面視圖層的設(shè)計(jì) 103
5.1.1 項(xiàng)目展示 103
5.1.2 新聞列表頁(yè)面的設(shè)計(jì) 104
5.1.3 新聞列表樣式的設(shè)計(jì) 105
任務(wù)5.2 新聞列表頁(yè)面的實(shí)現(xiàn) 106
5.2.1 靜態(tài)數(shù)據(jù)的定義 106
5.2.2 新聞列表頁(yè)面數(shù)據(jù)綁定 108
5.2.3 篩選功能的設(shè)計(jì) 109
5.2.4 下拉刷新示例 113
5.2.5 上拉觸底示例 114
5.2.6 頁(yè)面跳轉(zhuǎn)API 115
任務(wù)5.3 新聞詳情頁(yè)面的實(shí)現(xiàn) 115
5.3.1 新聞詳情頁(yè)面的設(shè)計(jì) 116
5.3.2 獲取對(duì)應(yīng)的詳情數(shù)據(jù) 117
5.3.3 收藏功能的實(shí)現(xiàn) 118
5.3.4 轉(zhuǎn)發(fā)分享功能的實(shí)現(xiàn) 120
5.3.5 背景音樂(lè)的實(shí)現(xiàn) 123
項(xiàng)目小結(jié) 125
學(xué)習(xí)評(píng)價(jià) 125
項(xiàng)目實(shí)訓(xùn) 126
項(xiàng)目6 商品頁(yè)面模塊開(kāi)發(fā) 128
任務(wù)6.1 商品分類視圖層的設(shè)計(jì) 129
6.1.1 項(xiàng)目展示 129
6.1.2 定義靜態(tài)數(shù)據(jù) 131
6.1.3 商品分類區(qū)域 132
6.1.4 商品分類展示區(qū)域 134
6.1.5 商品分類列表滾動(dòng) 136
任務(wù)6.2 商品列表頁(yè)面的設(shè)計(jì) 137
6.2.1 商品列表頁(yè)的布局 138
6.2.2 商品列表頁(yè)的樣式 138
6.2.3 自定義組件的創(chuàng)建 140
6.2.4 自定義組件的使用 143
任務(wù)6.3 商品詳情頁(yè)面的設(shè)計(jì) 143
6.3.1 商品詳情頁(yè)輪播圖 143
6.3.2 商品詳情頁(yè)標(biāo)題信息 146
6.3.3 使用iconfont圖標(biāo)庫(kù) 147
6.3.4 picker組件的使用 149
6.3.5 商品詳情頁(yè)長(zhǎng)圖的實(shí)現(xiàn) 151
6.3.6 商品詳情頁(yè)底部的實(shí)現(xiàn) 151
項(xiàng)目小結(jié) 154
學(xué)習(xí)評(píng)價(jià) 154
項(xiàng)目實(shí)訓(xùn) 154
項(xiàng)目7 購(gòu)物車模塊開(kāi)發(fā) 156
任務(wù)7.1 定義購(gòu)物車基礎(chǔ)數(shù)據(jù) 157
7.1.1 項(xiàng)目展示 157
7.1.2 定義靜態(tài)數(shù)據(jù) 157
7.1.3 購(gòu)物車視圖頁(yè)面 158
任務(wù)7.2 購(gòu)物車頁(yè)面詳情 159
7.2.1 購(gòu)物車商品列表 159
7.2.2 購(gòu)物車商品數(shù)量 161
7.2.3 購(gòu)物車底部信息 163
7.2.4 購(gòu)物車為空狀態(tài) 165
任務(wù)7.3 購(gòu)物車結(jié)算金額 166
7.3.1 單選商品金額計(jì)算 166
7.3.2 全選商品金額計(jì)算 167
項(xiàng)目小結(jié) 168
學(xué)習(xí)評(píng)價(jià) 168
項(xiàng)目實(shí)訓(xùn) 169
項(xiàng)目8 用戶信息模塊開(kāi)發(fā) 171
任務(wù)8.1 用戶信息頁(yè)面 172
8.1.1 項(xiàng)目展示 172
8.1.2 用戶登錄流程 173
8.1.3 實(shí)現(xiàn)用戶授權(quán)登錄 175
8.1.4 退出登錄 177
任務(wù)8.2 模板的使用 177
8.2.1 模板語(yǔ)法 177
8.2.2 創(chuàng)建模板 179
8.2.3 使用模板 180
任務(wù)8.3 ECharts在小程序中的運(yùn)用 181
8.3.1 配置ECharts 181
8.3.2 柱狀圖的使用 182
8.3.3 餅圖的使用 184
8.3.4 折線圖的使用 186
項(xiàng)目小結(jié) 187
學(xué)習(xí)評(píng)價(jià) 187
項(xiàng)目實(shí)訓(xùn) 188
項(xiàng)目9 接口的設(shè)計(jì)與開(kāi)發(fā) 190
任務(wù)9.1 Node.js 191
9.1.1 Node.js基礎(chǔ) 191
9.1.2 Node.js安裝配置 191
9.1.3 創(chuàng)建Node.js項(xiàng)目 192
9.1.4 獲取項(xiàng)目靜態(tài)資源 195
任務(wù)9.2 路由配置 196
9.2.1 路由配置的概念 196
9.2.2 GET請(qǐng)求方式 197
9.2.3 POST請(qǐng)求方式 198
任務(wù)9.3 小程序訪問(wèn)數(shù)據(jù)接口 202
9.3.1 配置合法域名 202
9.3.2 小程序請(qǐng)求數(shù)據(jù)接口 203
任務(wù)9.4 項(xiàng)目綜合案例 206
9.4.1 小程序表單組件設(shè)計(jì) 206
9.4.2 創(chuàng)建Node.js項(xiàng)目 208
9.4.3 小程序與服務(wù)器數(shù)據(jù)交互 209
項(xiàng)目小結(jié) 210
學(xué)習(xí)評(píng)價(jià) 210
項(xiàng)目實(shí)訓(xùn) 211
項(xiàng)目10　新聞數(shù)據(jù)接口 213
任務(wù)10.1　數(shù)據(jù)庫(kù)基本操作 214
10.1.1 創(chuàng)建數(shù)據(jù)庫(kù)和數(shù)據(jù)表 214
10.1.2 新建項(xiàng)目 215
10.1.3 安裝數(shù)據(jù)庫(kù) 215
任務(wù)10.2　操作數(shù)據(jù)表 217
10.2.1 執(zhí)行添加語(yǔ)句 217
10.2.2 執(zhí)行查詢操作 218
10.2.3 執(zhí)行更新語(yǔ)句 219
10.2.4 執(zhí)行刪除語(yǔ)句 220
任務(wù)10.3 數(shù)據(jù)接口的實(shí)現(xiàn) 221
10.3.1 添加數(shù)據(jù)接口 221
10.3.2 查詢數(shù)據(jù)接口 223
項(xiàng)目小結(jié) 225
學(xué)習(xí)評(píng)價(jià) 225
項(xiàng)目實(shí)訓(xùn) 225
參考文獻(xiàn) 227

1. 零基礎(chǔ)玩轉(zhuǎn)國(guó)產(chǎn)大模型DeepSeek [徐永冰 張帥 編著]
2. 網(wǎng)絡(luò)工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
3. 信息系統(tǒng)項(xiàng)目管理師考試32小時(shí)通關(guān)（適用第4版考綱） [薛大龍]
4. 信息系統(tǒng)管理工程師考試32小時(shí)通關(guān)（適配第2版考綱） [薛大龍　劉偉]
5. 土木工程材料檢測(cè)實(shí)訓(xùn) [洪曉江 達(dá)則曉麗 錢波]
6. 科技信息檢索與論文寫作實(shí)用教程 [李振華]
7. 傳統(tǒng)山水畫論解讀與實(shí)踐 [陳鈉 著]
8. Python數(shù)據(jù)庫(kù)編程 [主編 殷樹(shù)友 邢 翀]
9. 計(jì)算機(jī)基礎(chǔ)實(shí)訓(xùn)指導(dǎo) [主編 袁春萍 朱妮]
10. 嵌入式人工智能技術(shù)應(yīng)用（數(shù)字教材） [主編 胡娜 楊國(guó)勇 晏廷榮]
11. Vienna整流器技術(shù) [桂存兵 著]
12. 變頻器與伺服應(yīng)用 [陳剛 葉云飛]
13. 物聯(lián)網(wǎng)工程設(shè)計(jì)與實(shí)踐 [湯琳 李敏]
14. 爐邊夜話——深入淺出話AI [汪建　著]
15. 電商運(yùn)營(yíng)與管理 [鐘肖英 陳瀟]
16. Java面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 姜春磊 陳虹潔]
17. 信息技術(shù)基礎(chǔ)（Windows 10+WPS Office）（微課版） [主編　石利平　田輝平　謝盛嘉]
18. 人工智能應(yīng)用 [主編　陳　萍　劉培培　陳孟軍]
19. 大學(xué)生職業(yè)發(fā)展與就業(yè)指導(dǎo) [主編　劉志堅(jiān)]
20. 高級(jí)辦公應(yīng)用項(xiàng)目教程 [主編 屈晶 趙成麗]
21. 企業(yè)檔案工作實(shí)戰(zhàn)寶典百問(wèn)百答 [華俊 盧秀英 邵甜甜 著]
22. 計(jì)算機(jī)網(wǎng)絡(luò)原理及應(yīng)用 [主編 唐繼勇 葉坤 孫夢(mèng)娜]
23. 大學(xué)生創(chuàng)業(yè)基礎(chǔ) [主編 王麗莉 王 楊]
24. 船舶輔機(jī) [主編 王連海 于洋 姜淑翠]
25. 大學(xué)生就業(yè)指導(dǎo) [主編 王麗莉 董宴廷]
26. 系統(tǒng)架構(gòu)設(shè)計(jì)師章節(jié)習(xí)題與考點(diǎn)特訓(xùn) [主編 薛大龍 鄒月平]
27. 高校學(xué)生工作探索與實(shí)踐 [郭亮 著]
28. 大學(xué)生情商管理 [方雄 著]
29. 2023年長(zhǎng)沙市會(huì)展業(yè)發(fā)展報(bào)告 [主編 周棟良]
30. 2023年長(zhǎng)沙市金融業(yè)發(fā)展報(bào)告 [主編 任璐 王志輝]