微信小程序開發(fā)零基礎入門（第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  本章小結 19

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

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

2.1.1  新建項目 

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

2.1.3  代碼的提交  24 

2.1.4  小程序的版本  26 

2.1.5  制作空白模板代碼包  27 

2.1.6  我的第一個小程序  29 

2.2  小程序的目錄結構  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  基礎功能 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 本章小結 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  基礎內(nèi)容組件 ·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章網(wǎng)絡 API ·166 第 7章文件 API· 210 

5.1  小程序網(wǎng)絡基礎 ·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  發(fā)起請求和中斷請求 ·172 7.5  刪除本地文件 

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

· 223 

5.2.2  中斷請求 

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

· 226 

5.3  文件傳輸 180 7.8  本章小結 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  本章小結 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  預覽圖片 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  本章小結 247

208 第 9章位置 API· 248 

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

6.7  本章小結 2099.1  位置信息 248 

X 

9.1.1  經(jīng)緯度坐標 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  跳轉(zhuǎn)到新頁面 · 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  監(jiān)聽下拉刷新 · 320 

9.6  本章小結 26411.7.2  開始下拉刷新 · 320 第 10章設備 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本章小結· 323

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

10.2.1 網(wǎng)絡狀態(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本章小結 ·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  模態(tài)彈窗 

·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 項目創(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視圖設計  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邏輯實現(xiàn)  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  聊天記錄區(qū)域設計 

 416 

·374  邏輯 

13.4.4  底部輸入框設計 

378 14.6本章小結  423 

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

13.5.1  代碼復用 

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

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

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  聊天內(nèi)容自動上拉 

·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邏輯實現(xiàn)  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  自主開發(fā)組件模板配置 

·395 15.8結束語  460

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

XII