◆ 項目驅動，真實案例，一案到底。

◆ 以用為本，學以致用，用而學之。

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

前 言

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

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

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

本書具有以下特色：

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

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

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

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

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

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

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

編 者

2024年10月

前言

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

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