微信小程序項目實戰(AI編程+視頻圖解)

劉剛，從事軟件開發 10 餘年， 過醫護、餐飲、物流行業等多個領域的重大項目開發，編寫過《微信小程序開發圖解案例教程》《Java 程序設計基礎教程 (慕課版)》等多本暢銷書。

第 1章 AI編程工具與*小程序　1
1.1 AI輔助編程　2
1.1.1 AI輔助編程的概念　2
1.1.2 AI輔助編程的應用場景　2
1.1.3 常見的幾種AI編程工具　2
1.2 *小程序開發環境搭建與基礎技術準備　3
1.2.1 *小程序開發環境搭建　3
1.2.2 基礎技術準備　5
1.3 **工具的使用　6
1.3.1 創建項目　6
1.3.2 **工具界面　8
1.3.3 常用的快捷鍵　13
1.4 VS Code　13
1.4.1 VS Code的安裝與使用　14
1.4.2 下載與安裝AI編程工具插件　16
1.4.3 對AI編程工具提問的技巧　20
1.5 莫凡商城小程序項目　21
1.5.1 “我的”模塊的功能　21
1.5.2 “*頁”模塊的功能　21
1.5.3 “購物車”模塊的功能　22
1.5.4 “分類”模塊的功能　22
1.6 項目實戰：使用AI編程工具輔助創建莫凡商城小程序項目　22
第 2章 莫凡商城小程序項目結構　27
2.1 項目的目錄樹結構　27
2.1.1 框架全局文件　28
2.1.2 項目實戰：使用AI編程工具輔助實現底部標簽導航　29
2.1.3 工具類文件　32
2.1.4 框架頁面文件　33
2.2 *小程序邏輯層框架接口　33
2.2.1 使用App()函數註冊小程序　33
2.2.2 使用Page()函數註冊頁面　35
2.3 *小程序視圖層　37
2.3.1 *ML　37
2.3.2 動態綁定數據　38
2.3.3 組件屬性動態綁定數據　38
2.3.4 控制屬性動態綁定數據　38
2.3.5 關鍵字動態綁定數據　39
2.3.6 運算　39
2.4 *小程序樣式渲染　40
2.4.1 尺寸單位　40
2.4.2 樣式導入　41
2.4.3 內聯樣式　41
2.4.4 選擇器　42
2.4.5 常用樣式的屬性　42
2.5 *小程序條件渲染　46
2.5.1 使用wx:if判斷單個組件　46
2.5.2 使用wx:if一次性判斷多個組件　47
2.6 *小程序列表渲染　47
2.6.1 使用wx:for列表渲染單個組件　47
2.6.2 使用wx:for一次性列表渲染多個組件　48
2.6.3 使用wx:key指定*標識符　48
2.7 項目實戰：使用AI編程工具輔助實現“我的”頁面　49
第3章 莫凡商城*頁的靜態布局設計　52
3.1 需求分析　53
3.2 視圖容器組件的應用　53
3.2.1 視圖容器組件view　53
3.2.2 可滾動視圖容器組件scroll-view　53
3.2.3 滑塊視圖容器組件swiper　54
3.2.4 可移動視圖容器組件movable-view　55
3.2.5 項目實戰：使用AI編程工具輔助實現搜索區域布局與海報輪播　56
3.3 基礎內容組件　58
3.3.1 圖標組件icon　58
3.3.2 文本組件text　58
3.3.3 進度條組件progress　59
3.3.4 富文本組件rich-text　59
3.3.5 富文本編輯器editor　60
3.4 圖片組件image及圖片API　60
3.4.1 圖片組件image　60
3.4.2 圖片API　61
3.4.3 項目實戰：使用AI編程工具輔助實現圖書列表的靜態布局　64
3.5 導航組件和導航API　66
3.5.1 頁面鏈接組件navigator　66
3.5.2 保留當前頁跳轉API（wx.navigateTo()）　67
3.5.3 關閉當前頁跳轉API（wx.redirectTo()）　68
3.5.4 跳轉到tabBar頁面API（wx.switchTab()）　68
3.5.5 返回上一頁API（wx.navigateBack()）　69
3.5.6 關閉所有頁面，打開某個頁面API（wx.reLaunch()）　69
3.5.7 導航條API　69
3.5.8 項目實戰：使用AI編程工具輔助實現圖書搜索功能　71
3.6 項目實戰：使用AI編程工具輔助實現“更多”圖書列表頁面的靜態布局　73
第4章 莫凡商城*頁的動態綁定設計　77
4.1 *小程序函數處理　78
4.1.1 生命周期函數　78
4.1.2 頁面事件函數　79
4.1.3 頁面路由管理　79
4.1.4 自定義函數　80
4.1.5 setData()函數　82
4.2 *小程序網絡請求　83
4.2.1 網絡訪問配置　83
4.2.2 請求數據API　86
4.2.3 文件上傳API　87
4.2.4 文件下載API　89
4.2.5 項目實戰：使用AI編程工具輔助實現動態獲取圖書列和動態渲染頁面
效果　91
4.3 下拉刷新及窗口設置　93
4.3.1 下拉刷新API及事件處理函數　93
4.3.2 wx.setBackgroundColor()　95
4.3.3 wx.pageScrollTo()　96
第5章 莫凡商城的註冊、登錄功能　97
5.1 *小程序表單組件　98
5.1.1 按鈕組件button　98
5.1.2 多選項目組件checkbox　101
5.1.3 單選項目組件radio　103
5.1.4 輸入框組件input　104
5.1.5 多行輸入框組件textarea　109
5.1.6 改進表單可用性組件label　110
5.1.7 滾動選擇器組件picker　112
5.1.8 滑動選擇器組件slider　123
5.1.9 開關選擇器組件switch　125
5.1.10 表單組件form　127
5.1.11 項目實戰：使用AI編程工具輔助實現註冊頁面　129
5.2 *小程序界面交互API　131
5.2.1 顯示/隱藏消息提示框API　131
5.2.2 顯示模態對話框API　133
5.2.3 顯示/隱藏loading提示框API　134
5.2.4 顯示操作菜單API　135
5.3 定時器API　136
5.4 數據緩存API　137
5.4.1 將數據緩存到本地　137
5.4.2 獲取本地緩存數據　138
5.4.3 清理本地緩存數據　139
5.5 登錄相關API　140
5.5.1 登錄API　141
5.5.2 獲取賬號信息API　143
5.5.3 獲取用戶信息API　143
5.5.4 授權API　145
5.6 項目實戰：使用AI編程工具輔助實現登錄頁面　148
5.7 項目實戰：使用AI編程工具輔助實現從“我的”頁面跳轉到登錄頁面　150
5.8 項目實戰：使用AI編程工具輔助實現修改密碼頁面　151
5.9 項目實戰：使用AI編程工具輔助實現意見反饋頁面　154
5.10 項目實戰：使用AI編程工具輔助實現*緩存功能　155
第6章 莫凡商城的商品詳情頁設計　157
6.1 使用AI編程工具學習在頁面間傳遞數據　157
6.2 媒體組件及媒體API的應用　160
6.2.1 音頻組件audio及音頻API　160
6.2.2 視頻組件video及視頻API　162
6.2.3 相機組件camera及相機API　166
6.2.4 實時音視頻播放組件live-player　168
6.2.5 實時音視頻錄制組件live-pusher　169
6.3 項目實戰：使用AI編程工具輔助實現商品詳情頁　170
6.4 項目實戰：使用AI編程工具輔助實現商品加入購物車功能　172
6.5 項目實戰：使用AI編程工具輔助實現購物車頁面　174
6.6 分享與轉發API的應用　176
第7章 莫凡商城的獲取收貨地址功能設計　178
7.1 位置API　178
7.1.1 獲得當前位置API、選擇位置API、打開位置API　179
7.1.2 開啟/停止接收位置信息API　181
7.1.3 監聽實時地理位置API　181
7.2 收貨地址API　182
7.3 地圖組件及地圖API　183
7.3.1 地圖組件map　183
7.3.2 地圖API　187
7.4 項目實戰：使用AI編程工具輔助實現立即購買頁面　188
7.5 項目實戰：使用AI編程工具輔助實現收貨地址列表頁面　190
7.6 項目實戰：使用AI編程工具輔助實現新增或編輯地址頁面　192
第8章 莫凡商城的支付功能及訂單詳情頁設計　195
8.1 支付API　196
8.2 項目實戰：使用AI編程工具輔助實現支付功能　197
8.3 畫布組件及畫布API　199
8.4 項目實戰：使用AI編程工具輔助實現支付完成頁　203
8.5 項目實戰：使用AI編程工具輔助實現我的訂單頁面　204
8.6 項目實戰：實現訂單詳情頁　206
第9章 小程序擴展應用　208
9.1 設備應用API　209
9.1.1 獲得系統信息　209
9.1.2 獲取網絡狀態　211
9.1.3 加速度計　212
9.1.4 撥打電話　212
9.1.5 掃碼　212
9.1.6 剪貼板　213
9.1.7 屏幕亮度　214
9.2 文件操作API　214
9.2.1 保存文件到本地API　214
9.2.2 獲取本地文件列表API　215
9.2.3 獲取本地文件信息API　216
9.2.4 刪除本地文件API　216
9.2.5 打開文檔API　217
9.2.6 獲取文件信息API　217
9.2.7 文件管理器API　218
9.3 項目實戰：使用AI編程工具輔助實現圖書分類頁面　218
9.4 項目實戰：使用AI編程工具輔助實現圖書分類結果頁面　220