第 1章微信小程序入門 2
1.1 微信小程序概述 ·2
1.1.1 小程序簡介 2
1.1.2 小程序的誕生 ·2
1.1.3 小程序的功能 ·3
1.1.4 小程序的創建流程 ·3
1.2 開發小程序的準備工作 ·4
1.2.1 注冊開發者賬號 ·4
1.2.2 小程序的信息完善 ·10
1.2.3 小程序的成員管理 ·13
1.3 小程序的開發工具 ·14
1.3.1 軟件的下載與安裝 ·14
1.3.2 開發者工具的登錄 ·16
1.3.3 其他輔助工具 ·17
1.4 小程序的未來展望 ·18
1.5 本章小結 19
第 2章第一個微信小程序 20
2.1 創建第一個微信小程序 ·20
20
2.1.1 新建項目
第 3章小程序框架 56
3.1 邏輯層 56
3.1.1 小程序 App·56
3.1.2 小程序頁面 59
3.1.3 生命周期 64
3.1.4 頁面路由 65
3.1.5 模塊化 66
3.1.6 基礎功能 67
3.1.7 API ·71
3.2 視圖層 72
3.2.1 WXML ·72
3.2.2 WXSS·84
3.2.3 組件86
2.2
2.3
2.4
2.5
3.3
3.4
3.5
第 4章
4.1
4.2
2.1.2 真機預覽和調試 23
2.1.3 代碼的提交 24
2.1.4 小程序的版本 26
2.1.5 制作空白模板代碼包
27
2.1.6 我的第一個小程序
29 小程序的目錄結構 34
2.2.1 項目配置文件 34
2.2.2 主體文件 34
2.2.3 頁面文件 42
2.2.4 sitemap配置文件· 43
2.2.5 其他文件 44 開發者工具的介紹 45
2.3.1 菜單工具欄 46
2.3.2 資源管理器 47
2.3.3 模擬器 · 47
2.3.4 編輯器 · 49
2.3.5 調試器 · 49 階段案例:簡易登錄小程序
· 53 本章小結 53
flex布局 · 87
3.3.1 基本概念 87
3.3.2 容器屬性
· 88
· 93 3.3.3 項目屬性
階段案例:通訊錄小程序
· 97
本章小結 97小程序組件 · 98
組件的介紹和分類 98
4.1.1 組件的介紹 98
4.1.2 組件的分類 99 視圖容器組件 99
4.2.1 view
· 99
1014.2.2 scroll-view 4.2.3 swiper
·102 4.4.9 slider
141
4.2.4 movable-view
·104 4.4.10 switch
· 142
4.2.5 cover-view 108 4.4.11 textarea
4.3 基礎內容組件 ·109
4.4.12 editor
· 144
146
4.3.1 icon
4.3.2 text
·109 4.5 導航組件 · 148
4.3.3 rich-text 111
4.6 媒體組件 150
112
4.6.1 image · 150 4.3.4 progress 116 4.6.2 video 154 4.4 表單組件
117 4.6.3 camera
156 4.4.1 button 117
·120 4.7 地圖組件 158 4.4.2 checkbox
4.7.1 markers· 159 4.4.3 input ·122
4.7.2 polyline 160 4.4.4 label 127 4.7.3 circles
· 160 4.4.5 form 128
130 4.8 畫布組件
162 4.4.6 picker
·137 4.9 階段案例:趣味心理測試小程序
163 4.4.7 picker-view
4.4.8 radio
·139 4.10本章小結 164
第 5章網絡 API ·166 第 7章文件 API· 210
5.1 小程序網絡基礎 ·166 7.1 保存文件
· 210
212 5.1.1 小程序/服務器架構 166 7.2 獲取文件信息
5.1.2 服務器域名配置 ·168 7.3 獲取本地文件列表
215 5.1.3 臨時服務器部署 ·170 7.4 獲取本地文件信息 218
221 5.2 發起請求和中斷請求 ·172 7.5 刪除本地文件
5.2.1 發起請求 172 7.6 打開文檔
· 223
5.2.2 中斷請求
173 7.7 階段案例:個人相冊小程序
· 226
5.3 文件傳輸 180 7.8 本章小結 226
5.3.1 文件的上傳
180 第 8章數據緩存 API · 227 5.3.2 文件的下載 184 8.1 本地緩存 227
5.4 階段案例:成語詞典小程序
·187 8.2 數據的存儲 228
5.5 本章小結 1888.2.1 異步存儲數據
228 第 6章媒體 API ·189 8.2.2 同步存儲數據
230
6.1 圖片管理 189 8.3 數據的獲取 232
6.1.1 選擇圖片 189 8.3.1 異步獲取數據
232 6.1.2 預覽圖片 190 8.3.2 同步獲取數據 234
6.1.3 獲取圖片信息 ·190 8.4 存儲信息的獲取 235
6.1.4 保存圖片
191 8.4.1 異步獲取存儲信息
235 6.2 錄音管理
193 8.4.2 同步獲取存儲信息 237
6.3 音頻管理 196 8.5 數據的刪除 239
6.3.1 背景音頻管理
196 8.5.1 異步刪除數據
239 6.3.2 內部音頻控制 198 8.5.2 同步刪除數據 241
6.4 視頻管理 201 8.6 數據的清空 243
6.4.1 選擇視頻 201 8.6.1 異步清空數據
243 6.4.2 保存視頻 202 8.6.2 同步清空數據 244
· 246 6.4.3 視頻組件控制 202 8.7 階段案例:極簡清單小程序
6.5 相機管理
205 8.8 本章小結 247
208 第 9章位置 API· 248
6.6 階段案例:音樂播放器小程序
6.7 本章小結 2099.1 位置信息 248
X
9.1.1 經緯度坐標 248 11.3.4 設置 tabBar樣式· 304
9.1.2 坐標的類別 248 11.3.5 顯示與隱藏 tabBar
305
9.2 獲取和選擇位置 ·249 11.4頁面導航· 308
9.2.1 獲取位置
249 11.4.1 跳轉到新頁面 · 308 9.2.2 選擇位置 251 11.4.2 返回指定頁面 · 309
9.3 查看位置
252 11.4.3 當前頁面重定向 · 310
9.4 地圖組件控制 ·254 11.4.4 重啟頁面 · 310
9.4.1 獲取地圖上下文對像 ·254 11.4.5 切換 tabBar頁面
· 310
9.4.2 獲取地圖中心坐標
·255 11.5動畫 313
9.4.3 移動到指定位置
·256 11.5.1 動畫實例 · 313
9.4.4 動畫平移標記
257 11.5.2 動畫的描述 · 314 9.4.5 展示全部坐標 259 11.5.3 動畫的導出
· 315
9.4.6 獲取視野範圍
260 11.6頁面位置
318
9.4.7 獲取地圖縮放級別
·262 11.7下拉刷新· 320
9.5 階段案例:紅色旅遊地圖小程序
·263 11.7.1 監聽下拉刷新 · 320
9.6 本章小結 26411.7.2 開始下拉刷新 · 320 第 10章設備 API265 11.7.3 停止下拉刷新
· 321
10.1繫統信息 ·265 11.8階段案例:幸運大轉盤抽獎
10.1.1 獲取繫統信息
·265 小程序
322
10.1.2 canIUse()
·267 11.9本章小結· 323
10.2網絡·269 第 12章畫布 API · 324
10.2.1 網絡狀態
·269 12.1準備工作
324
10.2.2 Wi-Fi
·271 12.1.1 畫布坐標繫 · 324
10.3傳感器·275 12.1.2 創建空白畫布 · 324
10.3.1 羅盤
·275 12.1.3 創建畫布上下文 · 325
10.3.2 加速度計
·277 12.2繪制矩形 327
10.4用戶行為 ·278 12.2.1 創建矩形 · 327
10.4.1 截屏·278 12.2.2 填充矩形 · 327
10.4.2 掃碼
·279 12.2.3 描邊矩形 · 327
10.4.3 剪貼板
·280 12.2.4 清空矩形區域
· 328
10.4.4 通話
·282 12.3繪制路徑 330
10.5手機狀態 ·285 12.3.1 繪制線段
330 10.5.1 內存·285 12.3.2 繪制圓弧 332
10.5.2 屏幕亮度
334 ·286 12.3.3 繪制曲線
10.5.3 振動
·288 12.4繪制文本 336
10.6階段案例:幸運抽簽小程序
289 12.4.1 填充文本 · 336
10.7本章小結 ·28912.4.2 設置文本基準線 · 336 第 11章界面 API290 12.4.3 設置文本對齊方式 · 336
11.1交互反饋 ·290 12.4.4 設置字體風格
· 337
11.1.1 消息提示框
·290 12.5繪制圖片 338 11.1.2 加載提示框 ·292 12.5.1 繪制步驟 · 338
11.1.3 模態彈窗
·293 12.5.2 繪制原圖 · 339 11.1.4 操作菜單 ·296 12.5.3 縮放圖片 · 340
11.2導航條設置 ·298 12.5.4 圖片的切割
· 340
11.2.1 當前頁面標題設置
298 12.6顏色與樣式 · 342
299 12.6.1 顏色透明度
· 342 11.2.2 導航條加載動畫
11.2.3 導航條顏色設置 301 12.6.2 線條樣式
344 11.3 tabBar設置302 12.6.3 漸變樣式
348
11.3.1 tabBar標記302 12.6.4 陰影樣式 350
11.3.2 tabBar紅點303 12.6.5 圖案填充
351 11.3.3 onTabItemTap() 303 12.7保存與恢復 · 352
XI
12.8變形與剪裁 ·352 12.9圖像的導出
359
12.8.1 圖像的變形
·352 12.10 階段案例:你畫我猜小程序
361
12.8.2 圖像的剪裁
·356 12.11本章小結 · 362
第 13章小程序 AI.基於騰訊智能對話14.3準備工作 396 平臺 ColorUI的機器人小程序 ·364 14.3.1 項目創建
· 396
13.1小程序插件——騰訊智能對話 14.3.2 頁面配置
· 396 平臺 TBP
364 14.3.3 自定義組件
397
13.1.1 什麼是小程序插件 ·364 14.3.4 公共 JS文件
397
13.1.2 騰訊智能對話平臺簡介 ·364 14.4視圖設計 398
13.1.3 在小程序管理後臺添加 14.4.1 導航欄設計
398 TBP插件366 14.4.2 自定義組件 bankcard
13.2小程序自定義組件
367 設計
· 399
13.2.1 什麼是自定義組件 ·367 14.4.3 【首頁】設計
402
13.2.2 小程序組件庫 ColorUI·368 14.4.4 【銀行卡信息錄入頁】
13.2.3 在小程序項目中添加 設計
· 403 ColorUI組件庫 369 14.4.5 【銀行名稱索引頁】
· 404
13.3準備工作 ·369 設計
13.3.1 服務器端準備
369 14.5邏輯實現 407
407
13.3.2 小程序端準備 372 14.5.1 【首頁】邏輯
13.4視圖設計 ·373 14.5.2 【銀行名稱索引頁】
13.4.1 代碼復用
373 邏輯
· 412
13.4.2 導航欄設計
374 14.5.3 【銀行卡信息錄入頁】
13.4.3 聊天記錄區域設計
416
·374 邏輯
13.4.4 底部輸入框設計
378 14.6本章小結 423
13.5邏輯實現 ·379 14.7參考資料 424
13.5.1 代碼復用
379 第 15章小程序全棧開發 .基於 WAMP
13.5.2 公共函數獲取當前時間
379 ThinkPHP 6.0的高校新聞小程序 425
425
13.5.3 獲取機器人列表 380 15.1需求分析
13.5.4 顯示用戶本人消息
·381 15.2準備工作 426
13.5.5 機器人對話服務接口
384 15.2.1 小程序端準備
426
428
13.5.6 聊天內容自動上拉
·385 15.2.2 服務器端準備
13.6本章小結 ·386 15.3視圖設計 436
13.7參考資料 ·38715.3.1 導航欄設計
436 第 14章小程序服務平臺 .基於微信 OCR識15.3.2 tabBar設計
437 別 Vant Weapp的銀行卡包小程序 388 15.3.3 頁面設計
· 437
14.1小程序服務平臺概述
388 15.4邏輯實現 445
· 445
14.1.1 什麼是小程序服務平臺 ·388 15.4.1 首頁邏輯
451
14.1.2 微信 OCR識別服務簡介 389 15.4.2 新聞詳情頁邏輯
14.1.3 微信 OCR識別服務接入 390 15.4.3 個人中心頁邏輯
455 14.2小程序自定義組件 394 15.5最終效果展示 · 459
14.2.1 小程序 UI組件庫—— 15.6本章小結 459 Vant Weapp
·394 15.7參考資料 460
14.2.2 自主開發組件模板配置
·395 15.8結束語 460
附錄 A 個人開發者服務類目 461附錄 B 小程序場景值 · 463附錄 C 小程序預定顏色 · 465
XII