微信小程序開發(fā)零基礎(chǔ)入門（第2版 微課視頻版）

第1章 微信小程序入門 2 

1.1  微信小程序概述 2 

1.1.1  小程序簡介 2 

1.1.2  小程序的誕生 2 

1.1.3  小程序的功能 3 

1.1.4  小程序的創(chuàng)建流程 3 

1.2  開發(fā)小程序的準備工作 4 

1.2.1  注冊開發(fā)者賬號 4 

1.2.2  小程序的信息完善 10 

1.2.3  小程序的成員管理 13 

1.3  小程序的開發(fā)工具 14 

1.3.1  軟件的下載與安裝 14 

1.3.2  開發(fā)者工具的登錄 16 

1.3.3  其他輔助工具 17 

1.4  小程序的未來展望 18 

1.5  本章小結(jié) 19

第2章 第一個微信小程序 20 

2.1  創(chuàng)建第一個微信小程序 20 

2.1.1  新建項目 

2.1.2  真機預(yù)覽和調(diào)試  23 

2.1.3  代碼的提交  24 

2.1.4  小程序的版本  26 

2.1.5  制作空白模板代碼包  27 

2.1.6  我的第一個小程序  29 

2.2  小程序的目錄結(jié)構(gòu)  34 

2.2.1  項目配置文件  34 

2.2.2  主體文件  34 

2.2.3  頁面文件  42 

2.2.4  sitemap配置文件 43 

2.2.5  其他文件  44 開發(fā)者工具的介紹  45 

2.3.1  菜單工具欄  46 

2.3.2  資源管理器  47 

2.3.3  模擬器  47 

2.3.4  編輯器  49 

2.3.5  調(diào)試器  49 

2.3  

2.4  

2.5  

第3章 小程序框架 56 

3.1  邏輯層 56 

3.1.1  小程序 App56 

3.1.2  小程序頁面 59 

3.1.3  生命周期 64 

3.1.4  頁面路由 65 

3.1.5  模塊化 66 

3.1.6  基礎(chǔ)功能 67 

3.1.7 API 71 

3.2  視圖層 72 

3.2.1 WXML 72 

3.2.2 WXSS84 

3.2.3  組件86 

3.3

3.4  

3.5  

第4章

4.1  

4.2  

階段案例：簡易登錄小程序 

 53 本章小結(jié) 53

  flex布局  87 

3.3.1  基本概念  87 

3.3.2  容器屬性 

 88 

 93 3.3.3  項目屬性 

階段案例：通訊錄小程序 

 97 

本章小結(jié) 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  基礎(chǔ)內(nèi)容組件 ·109 

4.4.12  editor 

· 144 

 146 

4.3.1  icon 

4.3.2  text 

·109 4.5  導(dǎo)航組件 · 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本章小結(jié) 164

第 5章網(wǎng)絡(luò) API ·166 第 7章文件 API· 210 

5.1  小程序網(wǎng)絡(luò)基礎(chǔ) ·166 7.1  保存文件 

· 210 

 212 5.1.1  小程序/服務(wù)器架構(gòu) 166 7.2  獲取文件信息 

5.1.2  服務(wù)器域名配置 ·168 7.3  獲取本地文件列表 

 215 5.1.3  臨時服務(wù)器部署 ·170 7.4  獲取本地文件信息  218 

 221 5.2  發(fā)起請求和中斷請求 ·172 7.5  刪除本地文件 

5.2.1  發(fā)起請求 172 7.6  打開文檔 

· 223 

5.2.2  中斷請求 

173 7.7  階段案例：個人相冊小程序 

· 226 

5.3  文件傳輸 180 7.8  本章小結(jié) 226

5.3.1  文件的上傳 

180 第 8章數(shù)據(jù)緩存 API · 227 5.3.2  文件的下載 184 8.1  本地緩存 227 

5.4  階段案例：成語詞典小程序 

·187 8.2  數(shù)據(jù)的存儲  228 

5.5  本章小結(jié) 1888.2.1  異步存儲數(shù)據(jù) 

 228 第 6章媒體 API ·189 8.2.2  同步存儲數(shù)據(jù) 

 230 

6.1  圖片管理 189 8.3  數(shù)據(jù)的獲取  232 

6.1.1  選擇圖片 189 8.3.1  異步獲取數(shù)據(jù) 

 232 6.1.2  預(yù)覽圖片 190 8.3.2  同步獲取數(shù)據(jù)  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  數(shù)據(jù)的刪除  239 

6.3.1  背景音頻管理 

196 8.5.1  異步刪除數(shù)據(jù) 

 239 6.3.2  內(nèi)部音頻控制 198 8.5.2  同步刪除數(shù)據(jù)  241 

6.4  視頻管理 201 8.6  數(shù)據(jù)的清空  243 

6.4.1  選擇視頻 201 8.6.1  異步清空數(shù)據(jù) 

 243 6.4.2  保存視頻 202 8.6.2  同步清空數(shù)據(jù)  244 

· 246 6.4.3  視頻組件控制 202 8.7  階段案例：極簡清單小程序 

6.5  相機管理 

205 8.8  本章小結(jié) 247

208 第 9章位置 API· 248 

6.6  階段案例：音樂播放器小程序 

6.7  本章小結(jié) 2099.1  位置信息 248 

X 

9.1.1  經(jīng)緯度坐標 248 11.3.4  設(shè)置 tabBar樣式· 304 

9.1.2  坐標的類別 248 11.3.5  顯示與隱藏 tabBar 

 305 

9.2  獲取和選擇位置 ·249 11.4頁面導(dǎo)航· 308 

9.2.1  獲取位置 

249 11.4.1  跳轉(zhuǎn)到新頁面 · 308 9.2.2  選擇位置 251 11.4.2  返回指定頁面 · 309 

9.3  查看位置 

252 11.4.3  當(dāng)前頁面重定向 · 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  動畫的導(dǎo)出 

· 315 

9.4.6  獲取視野范圍 

260 11.6頁面位置 

 318 

9.4.7  獲取地圖縮放級別 

·262 11.7下拉刷新· 320 

9.5  階段案例：紅色旅游地圖小程序 

·263 11.7.1  監(jiān)聽下拉刷新 · 320 

9.6  本章小結(jié) 26411.7.2  開始下拉刷新 · 320 第 10章設(shè)備 API265 11.7.3  停止下拉刷新 

· 321 

10.1系統(tǒng)信息 ·265 11.8階段案例：幸運大轉(zhuǎn)盤抽獎

10.1.1 獲取系統(tǒng)信息 

·265 小程序 

 322 

10.1.2 canIUse() 

·267 11.9本章小結(jié)· 323

10.2網(wǎng)絡(luò)·269 第 12章畫布 API · 324 

10.2.1 網(wǎng)絡(luò)狀態(tài) 

·269 12.1準備工作 

 324 

10.2.2 Wi-Fi 

·271 12.1.1 畫布坐標系 · 324 

10.3傳感器·275 12.1.2 創(chuàng)建空白畫布 · 324 

10.3.1 羅盤 

·275 12.1.3 創(chuàng)建畫布上下文 · 325 

10.3.2 加速度計 

·277 12.2繪制矩形  327 

10.4用戶行為 ·278 12.2.1 創(chuàng)建矩形 · 327 

10.4.1 截屏·278 12.2.2 填充矩形 · 327 

10.4.2 掃碼 

·279 12.2.3 描邊矩形 · 327 

10.4.3 剪貼板 

·280 12.2.4 清空矩形區(qū)域 

· 328 

10.4.4 通話 

·282 12.3繪制路徑  330 

10.5手機狀態(tài) ·285 12.3.1 繪制線段 

 330 10.5.1 內(nèi)存·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本章小結(jié) ·28912.4.2 設(shè)置文本基準線 · 336 第 11章界面 API290 12.4.3 設(shè)置文本對齊方式 · 336 

11.1交互反饋 ·290 12.4.4 設(shè)置字體風(fēng)格 

· 337 

11.1.1  消息提示框 

·290 12.5繪制圖片  338 11.1.2  加載提示框 ·292 12.5.1 繪制步驟 · 338 

11.1.3  模態(tài)彈窗 

·293 12.5.2 繪制原圖 · 339 11.1.4  操作菜單 ·296 12.5.3 縮放圖片 · 340 

11.2導(dǎo)航條設(shè)置 ·298 12.5.4 圖片的切割 

· 340 

11.2.1  當(dāng)前頁面標題設(shè)置 

298 12.6顏色與樣式 · 342 

299 12.6.1 顏色透明度 

· 342 11.2.2  導(dǎo)航條加載動畫 

11.2.3  導(dǎo)航條顏色設(shè)置 301 12.6.2 線條樣式 

 344 11.3  tabBar設(shè)置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保存與恢復(fù) · 352 

XI 

12.8變形與剪裁 ·352 12.9圖像的導(dǎo)出 

 359 

12.8.1  圖像的變形 

·352 12.10  階段案例：你畫我猜小程序 

 361 

12.8.2  圖像的剪裁 

·356 12.11本章小結(jié) · 362

第 13章小程序 AI.基于騰訊智能對話14.3準備工作  396 平臺 ColorUI的機器人小程序 ·364 14.3.1 項目創(chuàng)建 

· 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視圖設(shè)計  398 

13.1.3  在小程序管理后臺添加 14.4.1 導(dǎo)航欄設(shè)計 

 398 TBP插件366 14.4.2 自定義組件 bankcard 

13.2小程序自定義組件 

367  設(shè)計 

· 399 

13.2.1  什么是自定義組件 ·367 14.4.3 【首頁】設(shè)計 

 402 

13.2.2  小程序組件庫 ColorUI·368 14.4.4 【銀行卡信息錄入頁】

13.2.3  在小程序項目中添加 設(shè)計 

· 403 ColorUI組件庫 369 14.4.5 【銀行名稱索引頁】

· 404 

13.3準備工作 ·369  設(shè)計 

13.3.1  服務(wù)器端準備 

369 14.5邏輯實現(xiàn)  407 

 407 

13.3.2  小程序端準備 372 14.5.1 【首頁】邏輯 

13.4視圖設(shè)計 ·373 14.5.2 【銀行名稱索引頁】

13.4.1  代碼復(fù)用 

373  邏輯 

· 412 

13.4.2  導(dǎo)航欄設(shè)計 

374 14.5.3 【銀行卡信息錄入頁】

13.4.3  聊天記錄區(qū)域設(shè)計 

 416 

·374  邏輯 

13.4.4  底部輸入框設(shè)計 

378 14.6本章小結(jié)  423 

13.5邏輯實現(xiàn) ·379 14.7參考資料  424

13.5.1  代碼復(fù)用 

379 第 15章小程序全棧開發(fā) .基于 WAMP  

13.5.2  公共函數(shù)獲取當(dāng)前時間 

379 ThinkPHP 6.0的高校新聞小程序  425 

 425 

13.5.3  獲取機器人列表 380 15.1需求分析 

13.5.4  顯示用戶本人消息 

·381 15.2準備工作  426 

13.5.5  機器人對話服務(wù)接口 

384 15.2.1 小程序端準備 

 426 

 428 

13.5.6  聊天內(nèi)容自動上拉 

·385 15.2.2 服務(wù)器端準備 

13.6本章小結(jié) ·386 15.3視圖設(shè)計  436 

13.7參考資料 ·38715.3.1 導(dǎo)航欄設(shè)計 

 436 第 14章小程序服務(wù)平臺 .基于微信 OCR識15.3.2 tabBar設(shè)計 

 437 別 Vant Weapp的銀行卡包小程序 388 15.3.3 頁面設(shè)計 

· 437 

14.1小程序服務(wù)平臺概述 

388 15.4邏輯實現(xiàn)  445 

· 445 

14.1.1  什么是小程序服務(wù)平臺 ·388 15.4.1 首頁邏輯 

 451 

14.1.2 微信 OCR識別服務(wù)簡介 389 15.4.2 新聞詳情頁邏輯 

14.1.3 微信 OCR識別服務(wù)接入 390 15.4.3 個人中心頁邏輯 

 455 14.2小程序自定義組件 394 15.5最終效果展示 · 459 

14.2.1  小程序 UI組件庫—— 15.6本章小結(jié)  459 Vant Weapp 

·394 15.7參考資料  460 

14.2.2  自主開發(fā)組件模板配置 

·395 15.8結(jié)束語  460

附錄 A 個人開發(fā)者服務(wù)類目  461附錄 B 小程序場景值 · 463附錄 C 小程序預(yù)定顏色 · 465 

XII