◆ 項(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)模式的教材，本書是編者對(duì)高職教材的一次探索，以符合高職教育規(guī)律的、基于工作過(guò)程的角度進(jìn)行編寫。

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

本書具有以下特色：

（1）項(xiàng)目驅(qū)動(dòng)。本書分為10個(gè)項(xiàng)目，每個(gè)項(xiàng)目包含若干個(gè)任務(wù)，每個(gè)任務(wù)通過(guò)多個(gè)案例來(lái)講解。本書從小程序開(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）一案到底。本書以商城小程序項(xiàng)目為中心來(lái)組織內(nèi)容，采用“一案到底”的組織方式使零散的知識(shí)具有連貫性，使學(xué)生對(duì)小程序開(kāi)發(fā)流程的認(rèn)識(shí)更加完整，同時(shí)加強(qiáng)案例與實(shí)際生活的聯(lián)系，使案例具有實(shí)用性和趣味性。

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

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

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

本書由廣東科貿(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)也參與了本書的編寫工作。在本書編寫過(guò)程中，我們得到了中國(guó)水利水電出版社和同行的大力支持和幫助，在此一并表示感謝。

由于編者水平有限，書中不足之處在所難免，懇請(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. 企業(yè)檔案工作實(shí)戰(zhàn)寶典百問(wèn)百答 [華俊 盧秀英 邵甜甜 著]
2. 計(jì)算機(jī)網(wǎng)絡(luò)原理及應(yīng)用 [主編 唐繼勇 葉坤 孫夢(mèng)娜]
3. 大學(xué)生創(chuàng)業(yè)基礎(chǔ) [主編 王麗莉 王 楊]
4. 船舶輔機(jī) [主編 王連海 于洋 姜淑翠]
5. 大學(xué)生就業(yè)指導(dǎo) [主編 王麗莉 董宴廷]
6. 系統(tǒng)架構(gòu)設(shè)計(jì)師章節(jié)習(xí)題與考點(diǎn)特訓(xùn) [主編 薛大龍 鄒月平]
7. 高校學(xué)生工作探索與實(shí)踐 [郭亮 著]
8. 大學(xué)生情商管理 [方雄 著]
9. 2023年長(zhǎng)沙市會(huì)展業(yè)發(fā)展報(bào)告 [主編 周棟良]
10. 2023年長(zhǎng)沙市金融業(yè)發(fā)展報(bào)告 [主編 任璐 王志輝]
11. 2023年長(zhǎng)沙市軟件業(yè)發(fā)展報(bào)告 [主編　肖玉朝 胡伏湘]
12. 久久回響——那些有溫度的課堂故事 [主編 薛麗霞]
13. 職業(yè)教育專業(yè)大數(shù)據(jù)分析 [鄧子云 著]
14. 微信小程序開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版） [黃龍泉 郭峰 朱倩]
15. 美國(guó)家庭親子英文52周 [劉胄　編著]
16. 瑞恩熊AI英語(yǔ)自然拼讀黃金法則 [科大訊飛學(xué)習(xí)機(jī)英語(yǔ)團(tuán)隊(duì)　編著]
17. 網(wǎng)絡(luò)運(yùn)維管理從基礎(chǔ)到實(shí)戰(zhàn) [許成剛 阮曉龍 杜宇飛 劉海濱]
18. 用英語(yǔ)介紹中國(guó)高頻100話題 [創(chuàng)想外語(yǔ) 編著]
19. 信息系統(tǒng)項(xiàng)目管理師（適用第4版大綱）一站通關(guān) [指尖瘋]
20. Photoshop平面設(shè)計(jì)（微課版）（第二版） [主編　趙艷莉]
21. 大學(xué)英語(yǔ)1 [主編　蔣戴麗　呂瑋]
22. 用英語(yǔ)介紹中國(guó)經(jīng)典小故事 [青閏　編譯]
23. 新概念英語(yǔ)單詞循環(huán)速記1：14天刻意練習(xí) [宋德偉　編著]
24. 新能源場(chǎng)站繼電保護(hù)傳動(dòng)作業(yè)指導(dǎo)書 [內(nèi)蒙古北方龍?jiān)达L(fēng)力發(fā)電有限責(zé)任]
25. 高職院校“德技并修·三育協(xié)同”的育人模式研究 [童世華 鄧丹楓 彭韓柳依 周葉]
26. 網(wǎng)絡(luò)規(guī)劃設(shè)計(jì)師真題及模考卷精析（適用機(jī)考） [主編 朱小平 施游]
27. 涼山脫貧地區(qū)鄉(xiāng)村治理研究 [余瀅 著]
28. 中國(guó)—東盟競(jìng)技體育文化共同體研究 [鄭花 著]
29. 數(shù)值分析 [主編 惠小健 王震 于蓉蓉]
30. 用英語(yǔ)介紹中國(guó)（四六級(jí)版） [李小麗　燕董嬌　編著]