◆ 項目驅(qū)動，真實案例，一案到底。

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

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

前 言

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

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

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

本書具有以下特色：

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

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

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

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

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

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

由于編者水平有限，書中不足之處在所難免，懇請讀者批評指正。

編 者

2024年10月

前言

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

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