微信小程序開(kāi)發(fā)實(shí)戰(zhàn)詳解

【課程收益】

課程以項(xiàng)目驅(qū)動(dòng)為宗旨，循序漸進(jìn)、案例豐富，詳細(xì)介紹了微信小程序的入門基礎(chǔ)知識(shí)與使用技巧。

課程分為以下6個(gè)部分：

第一部分是入門篇，詳細(xì)講解如何注冊(cè)開(kāi)發(fā)者賬號(hào)和完善信息，以及開(kāi)發(fā)工具的下載與安裝；從零開(kāi)始講解如何新建項(xiàng)目、真機(jī)預(yù)覽調(diào)試等操作，并基于該項(xiàng)目介紹自動(dòng)生成和手動(dòng)創(chuàng)建小程序項(xiàng)目的方式。

第二部分是基礎(chǔ)篇，以列表和九宮格兩種布局為例，講解小程序如何使用flex布局進(jìn)行頁(yè)面規(guī)劃；從案例入手，介紹表單中文本輸入框、按鈕等組件的用法。

第三部分是應(yīng)用篇，應(yīng)用微信小程序中的網(wǎng)絡(luò)API、媒體API、文件API、數(shù)據(jù)API、位置API、設(shè)備API以及界面API，每個(gè)API均對(duì)應(yīng)一個(gè)完整的項(xiàng)目實(shí)例，包括天氣查詢、口述校史、電子書(shū)櫥、醫(yī)療急救卡、會(huì)議邀請(qǐng)函、指南針和手繪時(shí)鐘。

第四部分是游戲篇，基于畫(huà)布組件和繪圖相關(guān)API分別實(shí)現(xiàn)簡(jiǎn)易版的拼圖游戲、推箱子游戲和貪吃蛇游戲。

第五部分是提高篇，綜合應(yīng)用之前所學(xué)的小程序前端知識(shí)開(kāi)發(fā)一款基于模擬數(shù)據(jù)的小程序；對(duì)項(xiàng)目進(jìn)行改造，接入自行搭建的服務(wù)器后端，形成全棧小程序，引入云開(kāi)發(fā)的概念，直接開(kāi)通云環(huán)境即可快速迭代上線；

第六部分是綜合篇，包對(duì)全套云能力的綜合應(yīng)用，實(shí)現(xiàn)多用戶的圖片分享社區(qū)；結(jié)合云能力和第三方組件庫(kù)Vant Weapp快速搭建美觀、大方的UI界面，實(shí)現(xiàn)一款小程序。

【課程時(shí)長(zhǎng)】

2天（6小時(shí)/天）

【課程大綱】

第一部分 入門篇

第1章 開(kāi)發(fā)前的準(zhǔn)備

1.1注冊(cè)小程序

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

1.1.2完善小程序信息

1.1.3管理小程序成員

1.2小程序開(kāi)發(fā)工具

1.2.1軟件的下載與安裝

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

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

2.1自動(dòng)生成小程序

2.1.1項(xiàng)目創(chuàng)建

2.1.2真機(jī)預(yù)覽

2.1.3完整代碼展示

2.2手動(dòng)創(chuàng)建小程序

2.2.1項(xiàng)目創(chuàng)建

2.2.2頁(yè)面配置

2.2.3視圖設(shè)計(jì)

2.2.4邏輯實(shí)現(xiàn)

第二部分 基礎(chǔ)篇

第3章 小程序框架

3.1列表布局小程序

3.1.1項(xiàng)目創(chuàng)建

3.1.2頁(yè)面配置

3.1.3視圖設(shè)計(jì)

3.1.4邏輯實(shí)現(xiàn)

3.1.5完整代碼展示

3.2九宮格布局小程序

3.2.1項(xiàng)目創(chuàng)建

3.2.2頁(yè)面配置

3.2.3視圖設(shè)計(jì)

3.2.4邏輯實(shí)現(xiàn)

第4章小程序組件·猜數(shù)字游戲

4.1項(xiàng)目創(chuàng)建

4.2頁(yè)面配置

4.2.1創(chuàng)建頁(yè)面文件

4.2.2刪除和修改文件

4.3視圖設(shè)計(jì)

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

4.3.2公共樣式設(shè)計(jì)

4.3.3頁(yè)面設(shè)計(jì)

4.4邏輯實(shí)現(xiàn)

4.4.1游戲頁(yè)面的邏輯實(shí)現(xiàn)

4.4.2首頁(yè)的邏輯實(shí)現(xiàn)

4.5完整代碼講解

4.5.1主體文件代碼展示

4.5.2首頁(yè)代碼展示

4.5.3“游戲規(guī)則”頁(yè)面代碼展示

4.5.4“關(guān)于我們”頁(yè)面代碼展示

4.5.5?開(kāi)始游戲（game）代碼展示

第三部分 應(yīng)用篇

第5章 小程序網(wǎng)絡(luò)API·天氣查詢

5.1準(zhǔn)備工作

5.1.1API密鑰申請(qǐng)

5.1.2API調(diào)用方法

5.1.3服務(wù)器域名配置

5.2項(xiàng)目創(chuàng)建

5.3頁(yè)面配置

5.3.1創(chuàng)建頁(yè)面文件

5.3.2刪除和修改文件

5.3.3創(chuàng)建其他文件

5.4視圖設(shè)計(jì)

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

5.4.2頁(yè)面設(shè)計(jì)

5.5邏輯實(shí)現(xiàn)

5.5.1更新省、市、區(qū)信息

5.5.2獲取實(shí)況天氣數(shù)據(jù)

5.5.3更新頁(yè)面天氣信息

第6章 小程序媒體API?案例一

6.1項(xiàng)目創(chuàng)建

6.2頁(yè)面配置

6.2.1創(chuàng)建頁(yè)面文件

6.2.2刪除和修改文件

6.2.3創(chuàng)建其他文件

6.3視圖設(shè)計(jì)

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

6.3.2頁(yè)面設(shè)計(jì)

6.4邏輯實(shí)現(xiàn)

6.4.1更新播放列表

6.4.2點(diǎn)擊播放視頻

6.4.3發(fā)送彈幕

第7章小程序文件API?案例二

7.1準(zhǔn)備工作

7.2項(xiàng)目創(chuàng)建

7.3頁(yè)面配置

7.3.1創(chuàng)建頁(yè)面文件

7.3.2刪除和修改文件

7.4視圖設(shè)計(jì)

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

7.4.2頁(yè)面設(shè)計(jì)

7.5邏輯實(shí)現(xiàn)

7.5.1更新圖書(shū)列表

7.5.2封裝提示消息

7.5.3打開(kāi)指定圖書(shū)

7.5.4保存下載的圖書(shū)

7.5.5下載并閱讀圖書(shū)

第8章 小程序數(shù)據(jù)API?案例三

8.1項(xiàng)目介紹

8.2項(xiàng)目創(chuàng)建

8.3頁(yè)面配置

8.3.1創(chuàng)建頁(yè)面文件

8.3.2刪除和修改文件

8.4視圖設(shè)計(jì)

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

8.4.2頁(yè)面設(shè)計(jì)

8.5邏輯實(shí)現(xiàn)

8.5.1尚未創(chuàng)建醫(yī)療急救卡的首頁(yè)的邏輯實(shí)現(xiàn)

8.5.2醫(yī)療急救卡創(chuàng)建頁(yè)的邏輯實(shí)現(xiàn)

8.5.3已經(jīng)創(chuàng)建急救卡的首頁(yè)的邏輯實(shí)現(xiàn)

8.6完整代碼展示

8.6.1應(yīng)用文件代碼展示

8.6.2頁(yè)面文件代碼展示

第9章 小程序位置API?案例四

9.1項(xiàng)目創(chuàng)建

9.2頁(yè)面配置

9.2.1創(chuàng)建頁(yè)面文件

9.2.2刪除和修改文件

9.2.3創(chuàng)建其他文件

9.3視圖設(shè)計(jì)

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

9.3.2頁(yè)面設(shè)計(jì)

9.4邏輯實(shí)現(xiàn)

9.4.1更新嘉賓列表

9.4.2更新地圖位置

9.4.3查看地圖詳情

第10章小程序設(shè)備API?案例5

10.1項(xiàng)目創(chuàng)建

10.2頁(yè)面配置

10.2.1創(chuàng)建頁(yè)面文件

10.2.2刪除和修改文件

10.2.3創(chuàng)建其他文件

10.3視圖設(shè)計(jì)

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

10.3.2頁(yè)面設(shè)計(jì)

10.4邏輯實(shí)現(xiàn)

10.4.1指南針旋轉(zhuǎn)動(dòng)畫(huà)

10.4.2更新角度和方向信息

10.4.3更新地理位置信息

第11章小程序界面API?案例6

11.1項(xiàng)目創(chuàng)建

11.2頁(yè)面配置

11.2.1創(chuàng)建頁(yè)面文件

11.2.2刪除和修改文件

11.3視圖設(shè)計(jì)

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

11.3.2頁(yè)面設(shè)計(jì)

11.4邏輯實(shí)現(xiàn)

11.4.1創(chuàng)建畫(huà)布上下文

11.4.2繪制時(shí)鐘刻度

11.4.3繪制時(shí)鐘指針

11.4.4顯示數(shù)字電子時(shí)鐘

11.4.5每秒實(shí)時(shí)更新

第四部分 游戲篇

第12章 小程序游戲 案例1

12.1需求分析

12.1.1首頁(yè)功能需求

12.1.2游戲頁(yè)功能需求

12.2項(xiàng)目創(chuàng)建

12.3頁(yè)面配置

12.3.1創(chuàng)建頁(yè)面文件

12.3.2刪除和修改文件

12.3.3創(chuàng)建其他文件

12.4視圖設(shè)計(jì)

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

12.4.2頁(yè)面設(shè)計(jì)

12.5邏輯實(shí)現(xiàn)

12.5.1首頁(yè)邏輯

12.5.2游戲頁(yè)邏輯

第13章 小程序游戲 案例2

13.1需求分析

13.1.1首頁(yè)功能需求

13.1.2游戲頁(yè)功能需求

13.2項(xiàng)目創(chuàng)建

13.3頁(yè)面配置

13.3.1創(chuàng)建頁(yè)面文件

13.3.2刪除和修改文件

13.3.3創(chuàng)建其他文件

13.4視圖設(shè)計(jì)

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

13.4.2頁(yè)面設(shè)計(jì)

13.5邏輯實(shí)現(xiàn)

13.5.1公共邏輯

13.5.2首頁(yè)邏輯

13.5.3游戲頁(yè)邏輯

第14章小程序游戲 案例三

14.1需求分析

14.1.1首頁(yè)功能需求

14.1.2游戲頁(yè)功能需求

14.2項(xiàng)目創(chuàng)建

14.3頁(yè)面配置

14.3.1創(chuàng)建頁(yè)面文件

14.3.2刪除和修改文件

14.3.3創(chuàng)建其他文件

14.4視圖設(shè)計(jì)

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

14.4.2頁(yè)面設(shè)計(jì)

14.5數(shù)據(jù)模型設(shè)計(jì)

14.5.1貪吃蛇模型設(shè)計(jì)

14.5.2蛇身移動(dòng)模型

14.5.3蛇吃食物模型

14.6邏輯實(shí)現(xiàn)

14.6.1首頁(yè)邏輯

14.6.2游戲頁(yè)邏輯

第五部分 提高篇

第15章 小程序前端綜合實(shí)例 案例1

15.1需求分析

15.1.1首頁(yè)功能需求

15.1.2新聞頁(yè)功能需求

15.1.3個(gè)人中心頁(yè)功能需求

15.2項(xiàng)目創(chuàng)建

15.3頁(yè)面配置

15.3.1創(chuàng)建頁(yè)面文件

15.3.2刪除和修改文件

15.3.3創(chuàng)建其他文件

15.4視圖設(shè)計(jì)

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

15.4.2tabBar設(shè)計(jì)

15.4.3頁(yè)面設(shè)計(jì)

15.5邏輯實(shí)現(xiàn)

15.5.1公共邏輯

15.5.2首頁(yè)邏輯

15.5.3新聞頁(yè)邏輯

15.5.4個(gè)人中心頁(yè)邏輯

15.5.5清除臨時(shí)數(shù)據(jù)

15.6完整代碼展示

15.6.1應(yīng)用文件代碼展示

15.6.2公共函數(shù)文件代碼展示

15.6.3頁(yè)面文件代碼展示

15.7項(xiàng)目小結(jié)

第16章 小程序全棧開(kāi)發(fā) 案例2

16.1初始化項(xiàng)目

16.1.1現(xiàn)有項(xiàng)目導(dǎo)入

16.1.2后端邏輯實(shí)現(xiàn)

16.1.3公共邏輯

16.2首頁(yè)改造

16.2.1新聞列表展示

16.2.2加載更多新聞

16.2.3點(diǎn)擊跳轉(zhuǎn)新聞內(nèi)容

16.3新聞頁(yè)改造

16.4個(gè)人中心頁(yè)改造

16.5完整代碼展示

16.5.1應(yīng)用文件代碼展示

16.5.2公共函數(shù)文件代碼展示

16.5.3頁(yè)面文件代碼展示

第17章小程序云開(kāi)發(fā) 案例3

17.1云開(kāi)發(fā)簡(jiǎn)介

17.1.1什么是云開(kāi)發(fā)

17.1.2云開(kāi)發(fā)能力介紹

17.1.3云開(kāi)發(fā)的開(kāi)通步驟

17.2初始化項(xiàng)目

17.2.1創(chuàng)建云模板項(xiàng)目

17.2.2遷移老項(xiàng)目

17.2.3部署云數(shù)據(jù)庫(kù)

17.3首頁(yè)改造

17.3.1展示新聞列表

17.3.2展示滾動(dòng)圖片

17.3.3觸底自動(dòng)加載新聞列表

17.3.4點(diǎn)擊新聞列表傳遞新聞編號(hào)

17.4新聞閱讀頁(yè)改造

17.5個(gè)人中心頁(yè)改造

17.6完整代碼展示

17.6.1應(yīng)用文件代碼展示

17.6.2公共函數(shù)文件代碼展示

17.6.3頁(yè)面文件代碼展示

第18章小程序云開(kāi)發(fā) 案例4

18.1初始化項(xiàng)目

18.1.1創(chuàng)建云模板項(xiàng)目

18.1.2遷移老項(xiàng)目

18.1.3部署云文件存儲(chǔ)

18.1.4部署云數(shù)據(jù)庫(kù)

18.2首頁(yè)改造

18.2.1展示圖書(shū)列表

18.2.2點(diǎn)擊跳轉(zhuǎn)圖書(shū)詳情頁(yè)

18.3圖書(shū)詳情頁(yè)改造

18.3.1頁(yè)面設(shè)計(jì)

18.3.2頁(yè)面邏輯

18.3.3閱讀圖書(shū)功能

第六部分 綜合篇

第19章 小程序云開(kāi)發(fā)·基于全套云能力的案例

19.1初始化項(xiàng)目

19.1.1創(chuàng)建云模板項(xiàng)目

19.1.2部署云數(shù)據(jù)庫(kù)

19.1.3創(chuàng)建頁(yè)面文件

19.2視圖設(shè)計(jì)

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

19.2.2頁(yè)面設(shè)計(jì)

19.3邏輯實(shí)現(xiàn)

19.3.1用戶個(gè)人信息獲取邏輯

19.3.2上傳圖片頁(yè)邏輯

19.3.3首頁(yè)邏輯

19.3.4個(gè)人主頁(yè)邏輯

19.3.5圖片展示頁(yè)邏輯

19.4完整代碼詳解

19.4.1應(yīng)用文件代碼展示

19.4.2云函數(shù)文件代碼展示

19.4.3頁(yè)面文件代碼展示

第20章 小程序UI組件庫(kù) 案例

20.1小程序自定義組件簡(jiǎn)介

20.1.1什么是自定義組件

20.1.2自定義組件的引用方式

20.1.3小程序UI組件庫(kù)Vant Weapp

20.1.4Vant Weapp的下載和安裝

20.2需求分析

20.2.1首頁(yè)功能需求

20.2.2好友信息編輯頁(yè)功能需求

20.2.3好友信息展示頁(yè)功能需求

20.3初始化項(xiàng)目

20.3.1創(chuàng)建云模板項(xiàng)目

20.3.2部署云數(shù)據(jù)庫(kù)

20.3.3創(chuàng)建頁(yè)面文件

20.3.4創(chuàng)建其他文件

20.4視圖設(shè)計(jì)

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

20.4.2頁(yè)面設(shè)計(jì)

20.5邏輯實(shí)現(xiàn)

20.5.1公共邏輯

20.5.2好友信息編輯頁(yè)邏輯

20.5.3首頁(yè)邏輯

20.5.4好友信息展示頁(yè)邏輯

20.6完整代碼詳解

20.6.1應(yīng)用文件代碼展示

20.6.2公共函數(shù)文件代碼展示

20.6.3頁(yè)面文件代碼展示

?

劉暉老師的其它課程