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

第1章 微信小程序入門(mén) 2 

1.1  微信小程序概述 2 

1.1.1  小程序簡(jiǎn)介 2 

1.1.2  小程序的誕生 2 

1.1.3  小程序的功能 3 

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

1.2  開(kāi)發(fā)小程序的準(zhǔn)備工作 4 

1.2.1  注冊(cè)開(kāi)發(fā)者賬號(hào) 4 

1.2.2  小程序的信息完善 10 

1.2.3  小程序的成員管理 13 

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

1.3.1  軟件的下載與安裝 14 

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

1.3.3  其他輔助工具 17 

1.4  小程序的未來(lái)展望 18 

1.5  本章小結(jié) 19

第2章 第一個(gè)微信小程序 20 

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

2.1.1  新建項(xiàng)目 

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

2.1.3  代碼的提交  24 

2.1.4  小程序的版本  26 

2.1.5  制作空白模板代碼包  27 

2.1.6  我的第一個(gè)小程序  29 

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

2.2.1  項(xiàng)目配置文件  34 

2.2.2  主體文件  34 

2.2.3  頁(yè)面文件  42 

2.2.4  sitemap配置文件 43 

2.2.5  其他文件  44 開(kāi)發(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  小程序頁(yè)面 59 

3.1.3  生命周期 64 

3.1.4  頁(yè)面路由 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  

階段案例：簡(jiǎn)易登錄小程序 

 53 本章小結(jié) 53

  flex布局  87 

3.3.1  基本概念  87 

3.3.2  容器屬性 

 88 

 93 3.3.3  項(xiàng)目屬性 

階段案例：通訊錄小程序 

 97 

本章小結(jié) 97小程序組件  98 

組件的介紹和分類(lèi)  98 

4.1.1  組件的介紹  98 

4.1.2  組件的分類(lèi)  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  畫(huà)布組件 

 162 4.4.6  picker 

·137 4.9  階段案例：趣味心理測(cè)試小程序 

 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  臨時(shí)服務(wù)器部署 ·170 7.4  獲取本地文件信息  218 

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

5.2.1  發(fā)起請(qǐng)求 172 7.6  打開(kāi)文檔 

· 223 

5.2.2  中斷請(qǐng)求 

173 7.7  階段案例：個(gè)人相冊(cè)小程序 

· 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  階段案例：成語(yǔ)詞典小程序 

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

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

 228 第 6章媒體 API ·189 8.2.2  同步存儲(chǔ)數(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  存儲(chǔ)信息的獲取  235 

6.1.4  保存圖片 

191 8.4.1  異步獲取存儲(chǔ)信息 

 235 6.2  錄音管理 

193 8.4.2  同步獲取存儲(chǔ)信息  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  階段案例：極簡(jiǎn)清單小程序 

6.5  相機(jī)管理 

205 8.8  本章小結(jié) 247

208 第 9章位置 API· 248 

6.6  階段案例：音樂(lè)播放器小程序 

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

X 

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

9.1.2  坐標(biāo)的類(lèi)別 248 11.3.5  顯示與隱藏 tabBar 

 305 

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

9.2.1  獲取位置 

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

9.3  查看位置 

252 11.4.3  當(dāng)前頁(yè)面重定向 · 310 

9.4  地圖組件控制 ·254 11.4.4  重啟頁(yè)面 · 310 

9.4.1  獲取地圖上下文對(duì)象 ·254 11.4.5  切換 tabBar頁(yè)面 

· 310 

9.4.2  獲取地圖中心坐標(biāo) 

·255 11.5動(dòng)畫(huà)  313 

9.4.3  移動(dòng)到指定位置 

·256 11.5.1  動(dòng)畫(huà)實(shí)例 · 313 

9.4.4  動(dòng)畫(huà)平移標(biāo)記 

257 11.5.2  動(dòng)畫(huà)的描述 · 314 9.4.5  展示全部坐標(biāo) 259 11.5.3  動(dòng)畫(huà)的導(dǎo)出 

· 315 

9.4.6  獲取視野范圍 

260 11.6頁(yè)面位置 

 318 

9.4.7  獲取地圖縮放級(jí)別 

·262 11.7下拉刷新· 320 

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

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

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

· 321 

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

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

·265 小程序 

 322 

10.1.2 canIUse() 

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

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

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

·269 12.1準(zhǔn)備工作 

 324 

10.2.2 Wi-Fi 

·271 12.1.1 畫(huà)布坐標(biāo)系 · 324 

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

10.3.1 羅盤(pán) 

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

10.3.2 加速度計(jì) 

·277 12.2繪制矩形  327 

10.4用戶(hù)行為 ·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手機(jī)狀態(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 振動(dòng) 

·288 12.4繪制文本  336 

10.6階段案例：幸運(yùn)抽簽小程序 

289 12.4.1 填充文本 · 336 

10.7本章小結(jié) ·28912.4.2 設(shè)置文本基準(zhǔn)線 · 336 第 11章界面 API290 12.4.3 設(shè)置文本對(duì)齊方式 · 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)前頁(yè)面標(biāo)題設(shè)置 

298 12.6顏色與樣式 · 342 

299 12.6.1 顏色透明度 

· 342 11.2.2  導(dǎo)航條加載動(dòng)畫(huà) 

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

 344 11.3  tabBar設(shè)置302 12.6.3 漸變樣式 

 348 

11.3.1  tabBar標(biāo)記302 12.6.4 陰影樣式  350 

11.3.2  tabBar紅點(diǎn)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  階段案例：你畫(huà)我猜小程序 

 361 

12.8.2  圖像的剪裁 

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

第 13章小程序 AI.基于騰訊智能對(duì)話14.3準(zhǔn)備工作  396 平臺(tái) ColorUI的機(jī)器人小程序 ·364 14.3.1 項(xiàng)目創(chuàng)建 

· 396 

13.1小程序插件——騰訊智能對(duì)話 14.3.2 頁(yè)面配置 

· 396 平臺(tái) TBP 

364 14.3.3 自定義組件 

 397 

13.1.1  什么是小程序插件 ·364 14.3.4 公共 JS文件 

 397 

13.1.2  騰訊智能對(duì)話平臺(tái)簡(jiǎn)介 ·364 14.4視圖設(shè)計(jì)  398 

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

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

13.2小程序自定義組件 

367  設(shè)計(jì) 

· 399 

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

 402 

13.2.2  小程序組件庫(kù) ColorUI·368 14.4.4 【銀行卡信息錄入頁(yè)】

13.2.3  在小程序項(xiàng)目中添加 設(shè)計(jì) 

· 403 ColorUI組件庫(kù) 369 14.4.5 【銀行名稱(chēng)索引頁(yè)】

· 404 

13.3準(zhǔn)備工作 ·369  設(shè)計(jì) 

13.3.1  服務(wù)器端準(zhǔn)備 

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

 407 

13.3.2  小程序端準(zhǔn)備 372 14.5.1 【首頁(yè)】邏輯 

13.4視圖設(shè)計(jì) ·373 14.5.2 【銀行名稱(chēng)索引頁(yè)】

13.4.1  代碼復(fù)用 

373  邏輯 

· 412 

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

374 14.5.3 【銀行卡信息錄入頁(yè)】

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

 416 

·374  邏輯 

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

378 14.6本章小結(jié)  423 

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

13.5.1  代碼復(fù)用 

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

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

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

 425 

13.5.3  獲取機(jī)器人列表 380 15.1需求分析 

13.5.4  顯示用戶(hù)本人消息 

·381 15.2準(zhǔn)備工作  426 

13.5.5  機(jī)器人對(duì)話服務(wù)接口 

384 15.2.1 小程序端準(zhǔn)備 

 426 

 428 

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

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

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

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

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

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

· 437 

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

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

· 445 

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

 451 

14.1.2 微信 OCR識(shí)別服務(wù)簡(jiǎn)介 389 15.4.2 新聞詳情頁(yè)邏輯 

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

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

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

·394 15.7參考資料  460 

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

·395 15.8結(jié)束語(yǔ)  460

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

XII