內容提要
《微信小程式開發快速入門》全面系統地講解了微信小程式入門知識。開篇講解了小程式的特點與開發邏輯,以及如何申請和創建一個小程式項目與環境搭建,接著通過多個小程式實例來全面體驗和講解開發框架、實現過程及主要代碼框架等,然後介紹小程式組件、開發方式、網路、快取、位置和界面互動,以及開發過程與組件的套用技巧、各個微信原生API接口小程式開發的技巧等。每章具有多個小程式實戰案例,讓讀者快速掌握該章所講的知識,並實踐小程式各項功能的套用及使用技巧。
《微信小程式開發快速入門》結構清晰,由淺入深,可幫助讀者快速掌握小程式的開發。適合於各種前端開發者,以及各種APP設計、開發和自學者。
目錄
第1章 小程式特點與開發邏輯 1
1.1 網際網路正在變得越來越“輕” 1
1.2 什麼是小程式 5
1.2.1 小程式的由來 5
1.2.2 小程式的發展與展望 6
1.3 你的產品適合做小程式嗎 9
1.4 小程式特色:即用即走 12
1.5 小程式與訂閱號、服務號的異同 13
1.6 訊息推送與傳播分享 16
1.7 普通用戶怎么玩轉小程式 16
1.7.1 普通用戶啟動小程式方法 16
1.7.2 普通用戶在小程式裡面能做什麼 17
第2章 微信小程式開發申請入門與環境搭建 18
2.1 小程式申請方法以及流程 18
2.2 小程式開發環境搭建 20
第3章 初識微信小程式:小程式的Hello World 24
3.1 小程式MINA框架介紹 24
3.2 小程式基本結構 26
3.3 微信Web開發者工具使用方法介紹 35
3.4 手把手教你做Demo——Hello World小程式 39
3.4.1 Demo的簡要開發步驟 39
3.4.2 驗證小程式可執行目錄結構 42
3.4.3 數據與事件的綁定 44
3.5 本章要點總結 47
第4章 微信小程式入門:小程式的開發方式 48
4.1 WXML及其數據綁定 48
4.2 WXSS——小程式的CSS樣式 57
4.2.1 新的尺寸單位rpx 57
4.2.2 樣式導入 58
4.2.3 內聯樣式 59
4.2.4 選擇器 59
4.3 事件 60
4.4 視圖容器 63
4.4.1 view視圖容器 64
4.4.2 scroll-view可滾動視圖區域 64
4.4.3 swiper滑塊視圖容器 70
4.5 基礎內容 75
4.5.1 圖示組件icon 75
4.5.2 文本組件text 77
4.5.3 進度條組件progress 78
4.6 導航 81
4.7 手把手教你做Demo——簡易通訊錄 84
4.8 本章要點總結 93
第5章 小程式開發實戰:全面掌握小程式組件 95
5.1 表單組件 95
5.1.1 按鈕組件button 95
5.1.2 標籤組件label 98
5.1.3 多項選擇器組件checkbox 102
5.1.4 單項選擇器組件radio 106
5.1.5 滾動選擇器組件picker 107
5.1.6 滑動選擇器組件slider 115
5.1.7 開關選擇器組件switch 117
5.1.8 輸入框組件input 123
5.1.9 多行輸入框組件textarea 129
5.1.10 表單組件form 131
5.2 媒體組件 136
5.2.1 音頻組件audio 136
5.2.2 視頻組件video 140
5.2.3 圖片組件image 147
5.3 地圖組件map 151
5.4 畫布組件canvas 155
5.5 手把手教你做Demo——用表單完善通訊錄 156
5.6 本章要點總結 158
第6章 小程式API(1):網路、媒體和快取 159
6.1 小程式接口規範 159
6.2 網路 160
6.2.1 發起請求 160
6.2.2 上傳、下載 163
6.2.3 websocket 166
6.3 媒體 170
6.3.1 圖片 170
6.3.2 視頻 176
6.3.3 錄音 178
6.3.4 音頻播放控制 179
6.3.5 音樂播放控制 180
6.3.6 音頻組件控制 185
6.3.7 視頻組件控制 186
6.3.8 檔案 187
6.4 數據快取 191
6.4.1 wx.setStorage(OBJECT) 192
6.4.2 wx.setStorageSync(KEY,DATA) 193
6.4.3 wx.getStorage(OBJECT) 194
6.4.4 wx.getStorageSync(KEY) 195
6.4.5 wx.getStorageInfo(OBJECT) 195
6.4.6 wx.getStorageSync(KEY) 196
6.4.7 wx.removeStorage(OBJECT) 197
6.4.8 wx.removeStorageSync(KEY) 198
6.4.9 wx.clearStorage() 198
6.4.10 wx.clearStorageSync () 198
6.5 手把手教你做Demo——Websocket從服務端到小程式 199
6.5.1 安裝Node.js環境 199
6.5.2 新建app.js檔案回響請求 201
6.5.3 編寫小程式 205
6.5.4 傳送GET請求 215
6.6 本章要點總結 217
第7章 小程式API(2):位置、設備與界面設計 219
7.1 位置 219
7.1.1 wx.getLocation(OBJECT) 獲取位置 219
7.1.2 wx.chooseLocation(OBJECT) 打開地圖選擇位置 221
7.1.3 wx.openLocation(OBJECT) 使用微信內置地圖查看位置 223
7.1.4 wx.createMapContext(mapId) 地圖組件控制 224
7.2 設備 226
7.2.1 wx.getNetworkType(OBJECT) 獲取網路類型 226
7.2.2 wx.getSystemInfo(OBJECT) 獲取系統信息 227
7.2.3 wx.getSystemInfoSync () 獲取系統信息同步接口 228
7.2.4 wx.onAccelerometerChange(CALLBACK) 監聽重力感應數據 228
7.2.5 wx.onCompassChange(CALLBACK) 監聽羅盤數據 229
7.2.6 wx.makePhoneCall(OBJECT) 撥打電話 230
7.3 界面 230
7.3.1 互動反饋 231
7.3.2 設定導航條 236
7.3.3 導航 237
7.3.4 動畫 239
7.3.5 繪圖 246
7.3.6 其他 255
7.4 手把手教你做Demo——小地圖 255
7.5 本章要點總結 259
第8章 小程式API(3):開放接口 261
8.1 登錄 261
8.1.1 wx.login(OBJECT) 261
8.1.2 wx.checkSession(OBJECT) 264
8.1.3 用戶數據的簽名驗證和加解密 265
8.2 用戶信息 268
8.2.1 wx.getUserInfo(OBJECT) 268
8.2.2 UnionID機制 270
8.3 微信支付 270
8.4 客服訊息 272
8.4.1 接收訊息和事件 272
8.4.2 傳送客服訊息 276
8.4.3 臨時素材接口 277
8.5 分享 279
8.6 獲取二維碼 280
8.7 手把手教你做Demo——簡易登錄頁 281
8.8 本章要點總結 285