從零開始學微信小程式開發

從零開始學微信小程式開發

《從零開始學微信小程式開發》 一書作者高洪濤,電子工業出版社2017年2月出版

內容提要

《從零開始學微信小程式開發》共分3篇12章,第1篇介紹微信小程式的基礎知識,包括微信小程式開發工具、微信小程式架構分析;第2篇介紹微信小程式的常用模組,通過一些小案例詳細介紹了微信小程式提供的各種組件的使用、API函式的使用,訪問手機硬體的函式;第3篇是綜合案例,以微天氣、微音樂這兩個完整案例的開發,演示微信小程式開發的全過程。

《從零開始學微信小程式開發》內容由淺入深,每個知識點都通過小案例進行演示,適合希望通過微信小程式開發套用的讀者,具有HTML 5基礎知識的讀者都可閱讀本書。

目錄

第1篇 微信小程式基礎

第1章 初識微信小程式 2

1.1 微信小程式開發工具 2

1.1.1 獲取開發工具 2

1.1.2 安裝開發工具 3

1.2 開發第一個微信小程式 5

1.2.1 獲取微信小程式的AppID 5

1.2.2 創建項目 5

1.2.3 微信小程式主要檔案 8

1.3 認識開發工具 9

1.3.1 開發工具界面 9

1.3.2 程式調試 9

1.3.3 代碼編輯 15

1.4 查看小程式效果 19

1.4.1 在開發工具中查看效果 19

1.4.2 在手機中查看效果 19

第2章 微信小程式架構分析 21

2.1 微信小程式框架結構 21

2.1.1 目錄結構 22

2.1.2 主體檔案 23

2.1.3 頁面檔案 23

2.1.4 其他檔案 24

2.2 配置檔案詳解 24

2.2.1 主配置檔案app.json 24

2.2.2 頁面配置檔案 29

2.3 邏輯層js檔案 29

2.3.1 用App函式註冊小程式 30

2.3.2 用Page函式註冊頁面 31

2.4 頁面描述檔案wxml 34

2.4.1 初識組件 34

2.4.2 數據綁定 35

2.4.3 條件渲染 39

2.4.4 列表渲染 40

2.4.5 使用模板 42

2.4.6 引用其他頁面檔案 45

2.5 頁面的事件 46

2.5.1 事件類型 46

2.5.2 事件綁定 47

2.5.3 事件對象 47

2.6 頁面樣式檔案wxss 50

2.6.1 尺寸單位 50

2.6.2 樣式導入 50

第2篇 微信小程式常用模組

第3章 快速開發UI界面 54

3.1 認識小程式的組件 54

3.1.1 小程式的組件 54

3.1.2 組件的使用 56

3.1.3 組件的通用屬性 57

3.2 加法計算器 59

3.2.1 認識view組件 60

3.2.2 認識input組件 62

3.2.3 認識button組件 64

3.2.4 計算機器界面UI 69

3.2.5 編寫計算代碼 71

3.2.6 測試加法計算器 72

3.3 另一種輸入數據的方式 73

3.3.1 認識slider組件 74

3.3.2 用slider輸入整數 74

第4章 美化UI界面 76

4.1 計算器功能需求 76

4.2 設計計算器界面 77

4.2.1 計算器小程式布局設計 77

4.2.2 搭建計算器小程式開發框架 77

4.2.3 用組件實現布局 78

4.2.4 設計組件的樣式 79

4.3 編寫計算器代碼 84

4.3.1 初始化數據 84

4.3.2 編寫按鈕代碼 88

4.3.3 編寫計算代碼 89

4.3.4 測試計算器小程式 92

4.4 美化計算器界面 93

4.4.1 認識icon組件 93

4.4.2 用icon美化計算器界面 94

4.4.3 小程式提供的icon組件 94

第5章 保存數據到本地 97

5.1 保存計算歷史界面設計 97

5.1.1 認識switch組件 97

5.1.2 switch組件簡單案例 98

5.2 修改計算器UI 99

5.2.1 添加switch組件 99

5.2.2 獲取switch的選擇 100

5.3 保存計算到本地快取 101

5.3.1 保存數據的API接口函式 101

5.3.2 本地快取計算過程 103

5.4 從本地快取讀取數據 108

5.4.1 顯示歷史記錄的界面設計 108

5.4.2 頁面切換的相關接口函式 110

5.4.3 獲取本地快取數據 111

5.5 保存多條歷史記錄 112

5.5.1 使用數組保存多條歷史記錄 113

5.5.2 清理本地快取 115

第6章 旅行計畫調查 116

6.1 用form組件收集信息 116

6.1.1 認識form組件 116

6.1.2 表單的提交 118

6.1.3 表單的重置 120

6.2 設計旅行計畫調查 121

6.3 選擇性別(單選) 122

6.3.1 認識radio和radio-group組件 122

6.3.2 用radio組件列出性別 122

6.3.3 獲取性別內容 124

6.3.4 根據數據生成radio組件 125

6.4 選擇想去的國家(多選) 126

6.4.1 認識checkbox和checkbox-group組件 127

6.4.2 國家名稱的多選 127

6.4.3 獲取選中的數據 128

6.5 選擇日期和時間 129

6.5.1 認識picker組件 129

6.5.2 picker組件小案例 131

6.5.3 收集出發日期 135

6.5.4 獲取picker選擇的日期 135

6.6 輸入建議 137

6.7 廣告輪播 138

6.7.1 認識swiper組件 139

6.7.2 swiper組件案例 139

6.7.3 測試案例 143

第7章 微信小程式的互動反饋 144

7.1 等待提示 144

7.1.1 認識loading組件 145

7.1.2 修改旅行計畫調查表單 148

7.2 用toast顯示提示信息 150

7.3 使用新版API顯示提示 153

7.3.1 接口函式wx.showToast 153

7.3.2 顯示loading提示信息 153

7.3.3 顯示toast提示信息 155

7.4 用modal組件顯示彈出框 156

7.4.1 認識modal組件 157

7.4.2 修改彈出框 159

7.4.3 在彈出框中輸入內容 160

7.5 使用新版API顯示彈出框 163

7.6 底部彈出選單 164

7.6.1 認識action-sheet組件 165

7.6.2 使用新版API顯示底部選單 168

第8章 用多媒體展示更多 171

8.1 用audio組件播放音樂 171

8.1.1 認識audio組件 171

8.1.2 控制audio組件 173

8.2 使用audio API播放音樂 175

8.2.1 audio API簡介 175

8.2.2 audio API播放音樂示例 177

8.3 用video組件播放視頻 180

8.3.1 認識video組件 180

8.3.2 獲取視頻上下文 182

8.3.3 給視頻添加彈幕 182

第9章 與後台互動 187

9.1 網路訪問API 187

9.1.1 認識wx.request接口函式 188

9.1.2 獲取網上信息 188

9.2 手機歸屬地查詢 191

9.2.1 了解手機歸屬地查詢接口 191

9.2.2 編寫小程式代碼 195

9.2.3 調試修改小程式 198

第10章 使用手機設備 203

10.1 拍照 203

10.1.1 了解wx.chooseImage函式 203

10.1.2 編寫實例代碼 204

10.1.3 在電腦端測試選擇照片 206

10.1.4 在手機端測試選擇照片 207

10.2 錄音 210

10.2.1 認識wx.startRecord函式 210

10.2.2 認識wx.stopRecord函式 210

10.2.3 認識wx.playVoice函式 210

10.2.4 編寫錄音實例 211

10.2.5 測試錄音實例 213

10.3 獲取地理位置 214

10.3.1 認識wx.openLocation函式 214

10.3.2 認識wx.getLocation函式 215

10.3.3 獲取地理位置實例 215

10.3.4 在電腦中測試獲取地理位置實例 217

10.3.5 在手機中測試獲取地理位置實例 219

10.4 獲取網路狀態 220

10.5 獲取系統信息 223

第3篇 微信小程式綜合案例

第11章 綜合案例——微天氣 228

11.1 天氣預報API 228

11.1.1 中國天氣網天氣預報接口 229

11.1.2 中華萬年曆的天氣預報接口 234

11.2 界面設計 236

11.3 編寫界面代碼 236

11.3.1 創建項目 237

11.3.2 編寫界面代碼 237

11.3.3 編寫界面樣式代碼 239

11.4 編寫邏輯層代碼 242

11.4.1 編寫數據初始化代碼 242

11.4.2 獲取當前位置的城市名稱 244

11.4.3 根據城市名稱獲取天氣預報 246

11.4.4 查詢天氣預報 248

第12章 綜合案例——微音樂 250

12.1 QQ音樂API 250

12.1.1 認識易源接口網站 250

12.1.2 QQ音樂接口 251

12.2 界面設計 255

12.3 創建項目 257

12.3.1 準備資源 257

12.3.2 創建項目 257

12.3.3 創建配置檔案 259

12.4 音樂分類列表 260

12.4.1 開發頁面檔案 260

12.4.2 開發頁面樣式檔案 261

12.4.3 開發頁面邏輯代碼 261

12.5 音樂列表 263

12.5.1 開發頁面檔案 263

12.5.2 開發頁面樣式檔案 264

12.5.3 開發頁面邏輯代碼 265

12.6 播放音樂 267

12.6.1 開發頁面檔案 267

12.6.2 開發頁面樣式檔案 268

12.6.3 開發頁面邏輯代碼 269

12.7 搜尋音樂 271

12.7.1 開發頁面檔案 271

12.7.2 開發頁面樣式檔案 272

12.7.3 開發頁面邏輯代碼 273

相關詞條

熱門詞條

聯絡我們