內容提要
《微信小程式開發必備100Tip》提供了微信小程式開發必備的100 個Tip 和一個完整的電商案例京東購物微信小程式，100 個Tip分為四類：關於微信小程式的框架及工具16 個Tip、關於微信小程式豐富的組件24 個Tip、關於微信小程式必備API 技能50 個Tip、關於微信小程式高級互動設計10 個Tip，每一個Tip 都會有詳細的介紹和相關的示例，方便開發人員快速學習這些Tip，同時也可以作為工具書指南進行查詢，套用到哪個知識點可以到這裡快速的查詢進行使用。京東購物微信小程式是綜合套用這些Tip，將這些Tip 綜合套用到實際項目開發過程中。通過學習100 個Tip 和項目案例，讓讀者全面、深入、透徹地理解微信小程式開發，提高微信小程式開發能力和項目實戰能力。
《微信小程式開發必備100Tip》內容豐富，實例典型，實用性強，適合各個層次想要學習微信小程式開發技術的人員閱讀，《微信小程式開發必備100Tip》也可以作為微信小程式開發查詢工具書使用，方便快速查詢微信小程式開發所套用到的知識點。
目錄
第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
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
第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
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
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
