第1 章 微信小程序的框架及工具 .......... 1
1.1 app.json 配置 ............ 1
1.1.1 決定頁面文件路徑 .......... 2
1.1.2 配置窗口表現 ............ 3
1.1.3 配置tab 標簽導航 ........... 5
1.1.4 設置網絡超時時間 .......... 8
1.1.5 配置debug 模式 .......... 9
1.2 App()函數使用 ............. 10
1.3 Page()函數使用 ............ 12
1.3.1 初始化數據 ............ 13
1.3.2 生命周期函數 .......... 13
1.3.3 相關事件函數 .......... 14
1.4 數據綁定 .............. 14
1.5 wx:if 條件判斷 ............. 15
1.6 wx:for 列表渲染 ........... 16
1.7 定義和使用模板 ............ 17
1.8 import 引用模板 ........... 18
1.9 include 引用文件 ............ 19
1.10 Console 面板 ............ 20
1.11 Sources 面板 ............. 21
1.12 Network 面板 ............. 22
1.13 Storage 面板 ............. 24
1.14 Appdata 面板 ............ 24
目 錄 VII
1.15 Wxml 面板 ............. 26
1.16 Sensor 面板 ............ 27
第2 章 微信小程序豐富的組件 .......... 28
2.1 view 視圖容器組件 ............ 28
2.2 scroll-view 可滾動視圖容器組件 ......... 31
2.3 swiper 滑塊視圖容器組件 ........... 34
2.3.1 海報輪播效果 .......... 35
2.3.2 頁簽切換效果 .......... 36
2.4 movable-view 可移動的視圖容器組件 ....... 40
2.5 icon 圖標組件 ............ 42
2.6 text 文本組件 ............. 44
2.7 progress 進度條組件 ............ 45
2.8 button 按鈕組件 ........... 46
2.9 checkbox 多項選擇器組件 .......... 48
2.10 radio 單項選擇器組件 ........... 57
2.11 input 單行輸入框組件 ........... 59
2.12 textarea 多行輸入框組件 ........... 61
2.13 label 改進表單組件 ............ 63
2.14 picker 選擇器組件 ........... 70
2.14.1 picker 普通選擇器組件 ......... 71
2.14.2 picker 時間選擇器組件 ......... 73
2.14.3 picker 日期選擇器組件 ......... 74
2.15 picker-view 嵌入頁面的滾動選擇器 ........ 76
2.16 slider 滑動選擇器組件........... 78
2.17 switch 開關選擇器組件 ........... 80
2.18 form 表單組件 ............ 85
2.19 navigator 頁面鏈接導航組件 .......... 92
2.20 audio 音頻組件 ............ 95
2.21 image 圖片組件 ............ 102
2.22 video 視頻組件 ............ 104
2.23 map 地圖組件 ............ 106
2.24 canvas 畫布組件 ............ 112
VIII 微信小程序開發必備100 Tip
第3 章 微信小程序必備API 技能 ......... 118
3.1 wx.request 發起網絡請求 .......... 118
3.2 wx.uploadFile 上傳文件 .......... 122
3.3 wx.downloadFile 下載文件 .......... 123
3.4 WebSocket 會話連接 ........... 125
3.5 wx.chooseImage 選擇圖片 .......... 133
3.6 wx.previewImage 預覽圖片 ......... 134
3.7 wx.getImageInfo 獲取圖片信息 ........ 135
3.8 wx.saveImageToPhotosAlbum 保存圖片到相冊 ...... 136
3.9 wx.startRecord 開始錄音和wx.stopRecord 結束錄音 ..... 138
3.10 voice 音頻播放控制 ........... 139
3.11 wx.createAudioContext 音頻組件控制 ....... 140
3.12 wx.playBackgroundAudio 播放音樂 ....... 141
3.13 wx.seekBackgroundAudio(OBJECT)控制音樂播放進度 ..... 143
3.14 wx.getBackgroundAudioPlayerState 獲取音樂播放狀態 ..... 143
3.15 wx.createVideoContext(videoId)視頻組件控制 ...... 145
3.16 wx.chooseVideo(OBJECT)選擇視頻 ........ 146
3.17 wx.saveVideoToPhotosAlbum 保存視頻到相冊 ...... 147
3.18 wx.saveFile 保存文件 ........... 148
3.19 wx.getSavedFileList 獲取本地文件列表 ....... 149
3.20 wx. getSavedFileInfo 獲取本地文件信息 ....... 151
3.21 wx. removeSavedFile 刪除本地文件 ....... 153
3.22 wx. openDocument 打開文檔 .......... 154
3.23 wx.setStorage 和wx.setStorageSync 本地數據緩存 ..... 155
3.24 wx.getStorage 和wx.getStorageSync 獲取本地數據緩存 .... 157
3.25 wx.getStorageInfo 和wx.getStorageInfoSync 獲取緩存信息 .... 159
3.26 清理本地緩存數據 .......... 161
3.27 wx.getLocation 獲取位置 .......... 162
3.28 wx. chooseLocation 選擇位置 ......... 167
3.29 wx.openLocation 打開內置地圖 ........ 168
3.30 獲取設備系統信息 .......... 169
3.31 獲取網絡狀態 ............ 172
3.32 wx.onAccelerometerChange 加速度計 ........ 172
目 錄 IX
3.33 wx.onCompassChange 監聽羅盤數據 ....... 173
3.34 wx.makePhoneCall 撥打電話和wx.scanCode 掃碼 ..... 173
3.35 剪貼板和屏幕亮度 .......... 175
3.36 wx.addPhoneContact 添加聯系人 ......... 176
3.37 wx.showToast 和wx.showLoading 顯示提示框 ..... 178
3.38 wx.showModal 顯示模態彈窗 ......... 180
3.39 wx.showActionSheet 顯示操作菜單 ....... 182
3.40 設置導航條 ............ 183
3.41 wx.createAnimation 創建動畫 ......... 184
3.42 獲取第三方平臺數據 .......... 190
3.43 wx.login 登錄 ........... 191
3.44 wx.authorize 授權 ........... 193
3.45 wx.getUserInfo 用戶信息 .......... 195
3.46 wwx.requestPayment 微信支付 ......... 197
3.47 模板消息 ............ 199
3.48 轉發信息 ............ 202
3.49 wx.chooseAddress 收貨地址 ......... 203
3.50 卡券 .............. 204
第4 章 微信小程序高級交互設計 .......... 207
4.1 貓眼電影：海報輪播效果設計 ........ 207
4.2 許鮮全國送：頁簽切換效果設計 ........ 210
4.3 新聞頻道：水平滑動效果設計 ........ 215
4.4 京東到家：手風琴導航切換效果設計 ....... 219
4.5 鏈家：列表式導航設計 .......... 223
4.6 支付寶：九宮格導航設計 .......... 230
4.7 58 同城：區域條件檢索設計 ......... 237
4.8 12306 火車票：底部固定效果設計........ 242
4.9 當當購物：圖文列表設計 .......... 245
4.10 中信信用卡申請：向導型表單設計 ....... 255
第5 章 綜合案例：京東購物小程序 ......... 278
5.1 需求描述 ............ 279
X 微信小程序開發必備100 Tip
5.2 相關知識點 ............ 285
5.3 商品數據準備 ............ 286
5.4 首頁設計 ............ 290
5.5 商品詳情頁設計 ............ 305
5.6 立即購買頁面 ............ 320
5.7 商品搜索設計 ............ 329
5.8 顯示購物車商品設計 .......... 339
5.9 我的訂單頁面設計 ............ 350
5.10 優惠券設計 ............ 356
5.11 小結 .............. 366