●篇微信小程序快速入門
章認識微信小程序1
1.1微信小程序介紹2
1.1.1初識微信小程序2
1.1.2微信小程序的功能3
1.1.3微信小程序的使用場景3
1.1.4微信小程序能取代App嗎5
1.1.5微信小程序發展歷程5
1.1.6微信小程序帶來的機會6
1.2微信小程序開發準備6
1.2.1基礎技術準備6
1.2.2開發準備6
1.3微信小程序開發工具的使用8
1.3.1創建項目8
1.3.2開發者工具界面10
1.3.3模擬器區域10
1.3.4編輯器區域11
1.3.5調試器區域13
1.3.6工具欄區域15
1.3.7常用快捷鍵17
1.4沙場大練兵：HelloWorld的創建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.6setData設值函數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.1wx:if判斷單個組件39
2.5.2blockwx:if判斷多個組件40
2.6微信小程序列表渲染40
2.6.1wx:for列表渲染單個組件40
2.6.2blockwx:for列表渲染多個組件40
2.6.3wx:key指定唯一標識符40
2.7微信小程序定義模板41
2.7.1定義模板41
2.7.2使用模板41
2.8微信小程序的引用功能42
2.8.1import引用42
2.8.2include引用42
2.9WXS小程序腳本語言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.1view視圖容器62
3.1.2scroll-view可滾動視圖區域63
3.1.3swiper滑塊視圖容器66
3.1.4movable-view可移動視圖容器69
3.1.5cover-view覆蓋原生組件的視圖容器70
3.2基礎內容組件72
3.2.1icon圖標72
3.2.2text文本73
3.2.3progress進度條74
3.2.4rich-text富文本74
3.3豐富的表單組件75
3.3.1button按鈕75
3.3.2checkbox多項選擇器77
3.3.3radio單項選擇器78
3.3.4input單行輸入框79
3.3.5textarea多行輸入框82
3.3.6label改進表單可用性83
3.3.7picker滾動選擇器85
3.3.8slider滑動選擇器91
3.3.9switch開關選擇器93
3.3.10form表單95
3.4導航組件96
3.4.1navigator頁面鏈接組件97
3.4.2wx.navigateTo保留當前頁跳轉98
3.4.3wx.redirectTo關閉當前頁跳轉99
3.4.4跳轉到tabBar頁面101
3.4.5wx.navigateBack返回上一頁102
3.4.6設置導航條103
3.5媒體組件104
3.5.1audio音頻104
3.5.2image圖片107
3.5.3video視頻110
3.5.4camera相機112
3.5.5live-player實時音視頻播放113
3.5.6live-pusher實時音視頻錄制114
3.6地圖組件115
3.7畫布組件119
3.8沙場大練兵：表單登錄注冊微信小程序121
3.8.1登錄設計122
3.8.2手機號注冊設計127
3.8.3企業用戶注冊設計131
3.9小結138
第4章必備的微信小程序API139
4.1請求服務器數據API140
4.2文件上傳與API142
4.2.1wx.uploadFile文件上傳143
4.2.2wx.downloadFile文件145
4.3WebSocket會話API146
4.4圖片處理API151
4.4.1wx.chooseImage(OBJECT)選擇圖片152
4.4.2wx.previewImage(OBJECT)預覽圖片152
4.4.3wx.getImageInfo(OBJECT)獲得圖片信息153
4.4.4wx.saveImageToPhotosAlbum保存圖片到相冊154
4.5文件操作API155
4.5.1wx.saveFile保存文件到本地155
4.5.2wx.getSavedFileList獲取本地文件列表156
4.5.3wx.getSavedFileInfo獲取本地文件信息157
4.5.4wx.removeSavedFile刪除本地文件158
4.5.5wx.openDocument打開文檔159
4.5.6wx.getFileInfo獲取文件信息159
4.6數據緩存API160
4.6.1數據緩存到本地160
4.6.2獲取本地緩存數據162
4.6.3移除和清理本地緩存數據165
4.7位置信息API166
4.7.1獲得位置、選擇位置、打開位置166
4.7.2地圖組件控制169
4.8設備應用API171
4.8.1獲得繫統信息171
4.8.2獲取網絡狀態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交互反饋API181
4.9.1消息提示框181
4.9.2模態彈窗183
4.9.3操作菜單184
4.10登錄API185
4.11微信支付API191
4.11.1微信小程序支付介紹191
4.11.2微信小程序支付實戰193
4.12分享API212
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主次動作區分明顯234
5.1.3流程明確，避免打斷235
5.1.4局部加載反饋235
5.1.5模態窗口加載反饋235
5.1.6彈出式操作結果236
5.1.7模態對話框操作結果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
內容簡介
本書分兩篇，介紹了微信小程序設計的基本知識和實戰案例。篇為微信小程序快速入門，包括認識微信小程序、微信小程序框架分析、用微信小程序組件構建UI界面、推薦的微信小程序API、微信小程序設計及問答；第二篇為綜合案例應用，包括仿智行火車票12306微信小程序、仿糗事百科微信小程序、仿中國婚博會微信小程序3個綜合實戰案例。本書采用圖、表與詳細說明的示例代碼相結合的敘述方式，講解微信小程序設計的基本原理和知識，簡單易懂，提供了豐富詳盡的實戰案例，帶讀者邊做邊學，快速掌握微信小程序的設計和實現。
