第一篇 微信小程序快速入門
第 1章 認識微信小程序 1
1.1 微信小程序介紹 2
1.1.1 初識微信小程序 2
1.1.2 微信小程序的功能 3
1.1.3 微信小程序的使用場景 3
1.1.4 微信小程序能取代App嗎 5
1.1.5 微信小程序發(fā)展歷程 5
1.1.6 微信小程序帶來的機會 6
1.2 微信小程序開發(fā)準備 6
1.2.1 基礎技術準備 6
1.2.2 開發(fā)準備 6
1.3 微信小程序開發(fā)工具的使用 8
1.3.1 創(chuàng)建項目 8
1.3.2 開發(fā)者工具界面 10
1.3.3 模擬器區(qū)域 10
1.3.4 編輯器區(qū)域 11
1.3.5 調試器區(qū)域 13
1.3.6 工具欄區(qū)域 15
1.3.7 常用快捷鍵 17
1.4 沙場大練兵：Hello World的創(chuàng)建 18
1.5 小結 20
第 2章 微信小程序框架分析 21
2.1 微信小程序目錄結構介紹 22
2.1.1 框架全局文件 22
2.1.2 工具類文件 26
2.1.3 框架頁面文件 27
2.1.4 小試牛刀：制作貓眼電影底部
標簽導航 28
2.2 微信小程序注冊程序應用 29
2.3 微信小程序注冊頁面的使用 31
2.3.1 頁面初始化數據 32
2.3.2 生命周期函數 32
2.3.3 頁面相關事件處理函數 32
2.3.4 頁面路由管理 33
2.3.5 自定義函數 34
2.3.6 setData設值函數 34
2.4 微信小程序如何綁定數據 35
2.4.1 組件屬性綁定 35
2.4.2 控制屬性綁定 35
2.4.3 關鍵字綁定 36
2.4.4 運算 36
2.4.5 小試牛刀：天氣微信小程序 36
2.5 微信小程序條件渲染 39
2.5.1 wx:if判斷單個組件 39
2.5.2 block wx:if 判斷多個組件 40
2.6 微信小程序列表渲染 40
2.6.1 wx:for 列表渲染單個組件 40
2.6.2 block wx:for 列表渲染
多個組件 40
2.6.3 wx:key 指定唯一標識符 40
2.7 微信小程序定義模板 41
2.7.1 定義模板 41
2.7.2 使用模板 41
2.8 微信小程序的引用功能 42
2.8.1 import引用 42
2.8.2 include引用 42
2.9 WXS小程序腳本語言 42
2.9.1 模塊化 43
2.9.2 變量與數據類型 44
2.9.3 注釋 46
2.9.4 語句 46
2.10 沙場大練兵：仿香哈菜譜
微信小程序 48
2.10.1 底部標簽導航設計 49
2.10.2 宮格導航設計 50
2.10.3 香哈頭條初始化數據 53
2.10.4 香哈頭條列表渲染及
綁定數據 54
2.10.5 香哈頭條模板引用 58
2.11 小結 60
第3章 用微信小程序組件
構建UI界面 61
3.1 視圖容器組件 62
3.1.1 view視圖容器 62
3.1.2 scroll-view可滾動視圖區(qū)域 63
3.1.3 swiper滑塊視圖容器 66
3.1.4 movable-view可移動視圖
容器 69
3.1.5 cover-view覆蓋原生組件的
視圖容器 70
3.2 基礎內容組件 72
3.2.1 icon圖標 72
3.2.2 text文本 73
3.2.3 progress進度條 74
3.2.4 rich-text富文本 74
3.3 豐富的表單組件 75
3.3.1 button按鈕 75
3.3.2 checkbox多項選擇器 77
3.3.3 radio單項選擇器 78
3.3.4 input單行輸入框 79
3.3.5 textarea多行輸入框 82
3.3.6 label改進表單可用性 83
3.3.7 picker滾動選擇器 85
3.3.8 slider滑動選擇器 91
3.3.9 switch開關選擇器 93
3.3.10 form表單 95
3.4 導航組件 96
3.4.1 navigator頁面鏈接組件 97
3.4.2 wx.navigateTo保留當前頁
跳轉 98
3.4.3 wx.redirectTo關閉當前頁
跳轉 99
3.4.4 跳轉到tabBar頁面 101
3.4.5 wx.navigateBack返回上一頁 102
3.4.6 設置導航條 103
3.5 媒體組件 104
3.5.1 audio音頻 104
3.5.2 image圖片 107
3.5.3 video視頻 110
3.5.4 camera相機 112
3.5.5 live-player實時音視頻播放 113
3.5.6 live-pusher實時音視頻錄制 114
3.6 地圖組件 115
3.7 畫布組件 119
3.8 沙場大練兵：表單登錄注冊
微信小程序 121
3.8.1 登錄設計 122
3.8.2 手機號注冊設計 127
3.8.3 企業(yè)用戶注冊設計 131
3.9 小結 138
第4章 必備的微信小程序API 139
4.1 請求服務器數據API 140
4.2 文件上傳與下載API 142
4.2.1 wx.uploadFile文件上傳 143
4.2.2 wx.downloadFile文件下載 145
4.3 WebSocket會話API 146
4.4 圖片處理API 151
4.4.1 wx.chooseImage(OBJECT)
選擇圖片 152
4.4.2 wx.previewImage(OBJECT)
預覽圖片 152
4.4.3 wx.getImageInfo(OBJECT)
獲得圖片信息 153
4.4.4 wx.saveImageToPhotosAlbum
保存圖片到相冊 154
4.5 文件操作API 155
4.5.1 wx.saveFile保存文件到本地 155
4.5.2 wx.getSavedFileList獲取
本地文件列表 156
4.5.3 wx.getSavedFileInfo獲取
本地文件信息 157
4.5.4 wx.removeSavedFile刪除
本地文件 158
4.5.5 wx.openDocument打開文檔 159
4.5.6 wx.getFileInfo獲取文件信息 159
4.6 數據緩存API 160
4.6.1 數據緩存到本地 160
4.6.2 獲取本地緩存數據 162
4.6.3 移除和清理本地緩存數據 165
4.7 位置信息API 166
4.7.1 獲得位置、選擇位置、
打開位置 166
4.7.2 地圖組件控制 169
4.8 設備應用API 171
4.8.1 獲得系統(tǒng)信息 171
4.8.2 獲取網絡狀態(tài) 172
4.8.3 加速度計 172
4.8.4 羅盤 173
4.8.5 撥打電話 174
4.8.6 掃碼 174
4.8.7 剪貼板 175
4.8.8 藍牙 175
4.8.9 屏幕亮度 179
4.8.10 用戶截屏事件 179
4.8.11 振動 179
4.8.12 手機聯系人 180
4.9 交互反饋API 181
4.9.1 消息提示框 181
4.9.2 模態(tài)彈窗 183
4.9.3 操作菜單 184
4.10 登錄API 185
4.11 微信支付API 191
4.11.1 微信小程序支付介紹 191
4.11.2 微信小程序支付實戰(zhàn) 193
4.12 分享API 212
4.13 沙場大練兵：仿豆瓣電影
微信小程序 213
4.13.1 電影頂部頁簽切換效果 214
4.13.2 電影海報輪播效果 218
4.13.3 電影列表方式布局 220
4.13.4 電影詳情頁布局 224
4.13.5 項目上傳與預覽 231
4.14 小結 232
第5章 微信小程序設計及問答 233
5.1 微信小程序設計 234
5.1.1 突出重點，減少干擾項 234
5.1.2 主次動作區(qū)分明顯 234
5.1.3 流程明確，避免打斷 235
5.1.4 局部加載反饋 235
5.1.5 模態(tài)窗口加載反饋 235
5.1.6 彈出式操作結果 236
5.1.7 模態(tài)對話框操作結果 236
5.1.8 結果頁 237
5.1.9 表單填寫友好提示 237
5.2 微信小程序問答 238
5.3 小結 240
第二篇 綜合案例應用
第6章 綜合案例：仿智行火車票
12306微信小程序 241
6.1 需求描述 243
6.2 設計思路及相關知識點 244
6.2.1 設計思路 244
6.2.2 相關知識點 244
6.3 準備工作 245
6.4 設計流程 245
6.4.1 底部標簽導航設計 245
6.4.2 海報輪播效果設計 248
6.4.3 火車票查詢界面設計 250
6.4.4 火車票列表設計 261
6.4.5 個人中心界面設計 273
6.4.6 搶票界面設計 281
6.4.7 項目上傳和預覽 290
6.5 小結 291
第7章 綜合案例：仿糗事百科
微信小程序 292
7.1 需求描述 293
7.2 設計思路及相關知識點 294
7.2.1 設計思路 294
7.2.2 相關知識點 294
7.3 準備工作 294
7.4 設計流程 295
7.4.1 頂部頁簽菜單滑動設計 295
7.4.2 頂部頁簽菜單切換效果設計 297
7.4.3 糗事列表頁設計 299
7.4.4 視頻列表頁設計 307
7.4.5 分享設計 309
7.4.6 項目預覽 310
7.5 小結 311
第8章 綜合案例：仿中國婚博會
微信小程序 312
8.1 需求描述 314
8.2 設計思路及相關知識點 315
8.2.1 設計思路 315
8.2.2 相關知識點 315
8.3 準備工作 316
8.4 設計流程 317
8.4.1 底部標簽導航設計 317
8.4.2 海報輪播效果設計 319
8.4.3 宮格導航設計 321
8.4.4 全部分類導航設計 326
8.4.5 現金券下拉菜單篩選
條件設計 332
8.4.6 現金券列表頁設計 335
8.4.7 婚博會索票界面設計 341
8.4.8 獲知渠道彈出層設計 346
8.5 小結 352
鄂公網安備 42010302001612號 