《微信小程序項(xiàng)目實(shí)戰(zhàn)》全套教學(xué)課件

項(xiàng)目Ⅰ豆瓣評(píng)分《微信小程序項(xiàng)目實(shí)戰(zhàn)》項(xiàng)目Ⅰ豆瓣評(píng)分.pptx項(xiàng)目Ⅱ琪斐定制家居館.pptx項(xiàng)目Ⅲ番茄時(shí)鐘.pptx全套可編輯PPT課件目錄單元一

項(xiàng)目準(zhǔn)備單元二

自定義組件的封裝單元三

首頁(yè)單元四

列表頁(yè)單元五

搜索功能單元六

詳情頁(yè)單元七

短評(píng)列表功能163單元一項(xiàng)目準(zhǔn)備單元一：項(xiàng)目準(zhǔn)備本單元主要介紹微信小程序項(xiàng)目開發(fā)之前的準(zhǔn)備工作，包括TAPD的使用、Git的使用、碼云（Gitee）的使用，以及在微信開發(fā)者工具中完成項(xiàng)目的創(chuàng)建。1.掌握TAPD工具的使用方法2.掌握Git版本控制系統(tǒng)的基本配置與使用方法3.掌握碼云（Gitee）的基本操作方法4.掌握微信開發(fā)者工具的使用方法5.掌握微信小程序項(xiàng)目的創(chuàng)建6.熟悉微信小程序基本目錄結(jié)構(gòu)任務(wù)一：TAPD的使用任務(wù)一：TAPD的使用注冊(cè)個(gè)人賬號(hào)。（進(jìn)入官網(wǎng)/，導(dǎo)航欄右側(cè)“注冊(cè)”按鈕）步驟1登錄帳號(hào)。（進(jìn)入官網(wǎng)/，導(dǎo)航欄右側(cè)“登錄”按鈕）步驟2注冊(cè)公司。（注冊(cè)個(gè)人賬號(hào)后進(jìn)入TAPD官網(wǎng)注冊(cè)頁(yè)面）步驟3創(chuàng)建項(xiàng)目。步驟4邀請(qǐng)成員。步驟5知識(shí)鏈接任務(wù)考評(píng)【TAPD的使用】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01注冊(cè)個(gè)人賬號(hào)10

02登錄帳號(hào)10

03注冊(cè)公司20

04創(chuàng)建項(xiàng)目25

05邀請(qǐng)成員25

06完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)二：Git的安裝與使用任務(wù)二：產(chǎn)品展示頁(yè)下載Git離線安裝包。網(wǎng)址https:///downloads。步驟1安裝Git。步驟2Git的使用。步驟3Git基本操作。步驟4知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【Git的安裝和使用】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01下載電腦系統(tǒng)對(duì)應(yīng)git安裝包5

02正確安裝git10

03創(chuàng)建git倉(cāng)庫(kù)10

04添加文件到git暫存區(qū)25

05將暫存區(qū)文件提交到倉(cāng)庫(kù)25

06檢查是否有未提交文件15

07完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)三：碼云（Gitee）的使用任務(wù)三：碼云（Gitee）的使用創(chuàng)建碼云帳號(hào)。步驟1代碼托管。步驟2向倉(cāng)庫(kù)提交代碼。步驟3知識(shí)鏈接任務(wù)考評(píng)【碼云的使用】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01創(chuàng)建碼云gitee帳號(hào)5

02創(chuàng)建gitee遠(yuǎn)程倉(cāng)庫(kù)15

03提交代碼：方式一所有步驟35

04提交代碼：方式二所有步驟35

05完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)四：創(chuàng)建項(xiàng)目任務(wù)四：創(chuàng)建項(xiàng)目在TAPD中創(chuàng)建項(xiàng)目，邀請(qǐng)項(xiàng)目參與者，給項(xiàng)目參與者分配任務(wù)，協(xié)同完成項(xiàng)目。步驟1在碼云（Gitee）上創(chuàng)建“豆瓣評(píng)分”倉(cāng)庫(kù)，并獲取倉(cāng)庫(kù)地址：“/用戶個(gè)人空間地址/倉(cāng)庫(kù)名”。步驟2注冊(cè)登錄微信公眾平臺(tái)以及安裝微信開發(fā)者工具。步驟3在微信開發(fā)者工具中配置版本管理（git）工具。步驟5整理項(xiàng)目初始代碼。步驟6利用微信開發(fā)者工具創(chuàng)建“豆瓣評(píng)分”項(xiàng)目。步驟4新建所需頁(yè)面，并設(shè)置pages屬性。步驟7知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【創(chuàng)建項(xiàng)目】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01在TAPD中創(chuàng)建項(xiàng)目，邀請(qǐng)項(xiàng)目參與者，給項(xiàng)目參與者分配任務(wù)，協(xié)同完成項(xiàng)目。20

02在碼云（Gitee）上創(chuàng)建“豆瓣評(píng)分”倉(cāng)庫(kù)，并獲取倉(cāng)庫(kù)地址。15

03注冊(cè)登錄微信公眾平臺(tái)及其安裝微信開發(fā)者工具。10

04利用微信開發(fā)者工具創(chuàng)建“豆瓣評(píng)分”項(xiàng)目。10

05在微信開發(fā)者工具中配置版本管理（git）工具。15

06整理初始代碼，刪除部分文件及代碼。10

07新建所需頁(yè)面，并設(shè)置pages屬性。10

08完成任務(wù)收獲積累：10

總評(píng)分100

單元二自定義組件的封裝單元二：自定義組件的封裝在微信小程序開發(fā)項(xiàng)目中封裝自定義組件，有助于代碼的重用，可以大大提高開發(fā)效率，本單元主要完成了五個(gè)任務(wù)分別是，搜索欄、評(píng)分星星組件、數(shù)據(jù)模塊組件、首頁(yè)模塊組件、短評(píng)組件的實(shí)現(xiàn)。1.熟悉微信小程序MVC框架2.掌握微信小程序自定義組件的基本知識(shí)和使用方法3.掌握view、navigator組件的使用方法4.掌握image組件、wx:for列表渲染的使用5.掌握scroll-view可滾動(dòng)視圖容器組件的使用任務(wù)一：搜索欄的實(shí)現(xiàn)任務(wù)一：搜索欄的實(shí)現(xiàn)新建components/searchbar目錄。步驟1搜索欄的視圖層渲染。步驟2為組件添加功能。步驟3組件測(cè)試。步驟4知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【搜索欄的實(shí)現(xiàn)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01創(chuàng)建組件目錄15

02組件視圖層渲染25

03組件引用10

04組件樣式添加20

05添加組件事件20

06完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)二：評(píng)分星星組件的實(shí)現(xiàn)任務(wù)二：評(píng)分星星組件的實(shí)現(xiàn)新建components/stars目錄。步驟1評(píng)分星星組件的視圖層渲染。步驟2打開stars.js文件，為該自定義組件添加updateRate方法，根據(jù)傳入分值計(jì)算出滿星星、半星星和灰色星星的個(gè)數(shù)，在methods對(duì)象下添加代碼。步驟3為該自定義組件添加屬性值，在properties對(duì)象下添加代碼。步驟4添加生命周期函數(shù)，在組件掛載時(shí)調(diào)用星星個(gè)數(shù)統(tǒng)計(jì)，添加代碼。步驟5打開index.json文件，在usingComponents對(duì)象下添加組件引用代碼。步驟6打開index.wxml文件，添加搜索欄組件代碼。步驟7知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【評(píng)分星星的實(shí)現(xiàn)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01創(chuàng)建文件及目錄5

02評(píng)分星星視圖層構(gòu)建渲染10

03添加評(píng)分星星樣式5

04添加評(píng)分星星計(jì)算方法25

05設(shè)置評(píng)分星星傳入屬性25

06組件測(cè)試20

07完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)三：數(shù)據(jù)模塊組件的實(shí)現(xiàn)任務(wù)三：數(shù)據(jù)模塊組件的實(shí)現(xiàn)新建components/itemview目錄。步驟1數(shù)據(jù)模塊組件的視圖層渲染。步驟2打開itemview.js文件為該自定義組件添加屬性值，在properties對(duì)象下添加代碼。步驟3組件測(cè)試。步驟4知識(shí)鏈接任務(wù)考評(píng)【數(shù)據(jù)模塊組件的實(shí)現(xiàn)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01創(chuàng)建目錄與文件5

02數(shù)據(jù)模塊視圖層的渲染10

03添加數(shù)據(jù)模塊樣式5

04星星評(píng)價(jià)組件引入25

05添加數(shù)據(jù)模塊方法25

06組件測(cè)試20

07完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)四：首頁(yè)模塊組件的實(shí)現(xiàn)任務(wù)四：首頁(yè)模塊組件的實(shí)現(xiàn)新建components/indexmodule目錄。步驟1首頁(yè)模塊組件視圖層渲染。步驟2打開indexmodule.wxss文件,為視圖層添加樣式文件。步驟3打開indexmodule.js文件為該自定義組件添加屬性值，在properties對(duì)象下添加代碼。步驟4打開index.json文件，在usingComponents對(duì)象下添加組件引用代碼。步驟5知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【首頁(yè)模塊組件的實(shí)現(xiàn)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01建立indexmodule目錄及文件5

02引用數(shù)據(jù)模塊組件5

03構(gòu)建首頁(yè)模塊視圖層10

04添加首頁(yè)模塊樣式25

05添加首頁(yè)模塊屬性與方法25

06組件測(cè)試20

07完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)五：短評(píng)組件的實(shí)現(xiàn)任務(wù)五：短評(píng)組件的實(shí)現(xiàn)新建components/onecomment目錄。步驟1短評(píng)組件的視圖層渲染。步驟2打開onecomment.js文件為該自定義組件添加屬性值，在properties對(duì)象下添加代碼。步驟3組件測(cè)試。步驟4知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【短評(píng)組件的實(shí)現(xiàn)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01建立目錄及文件5

02引用星星評(píng)分組件5

03構(gòu)建短評(píng)組件視圖層10

04添加短評(píng)組件樣式25

05添加短評(píng)組件屬性與方法25

06組件測(cè)試20

07完成任務(wù)收獲積累：10

總評(píng)分100

單元三首頁(yè)單元三：首頁(yè)豆瓣評(píng)分小程序的首頁(yè)分為搜索欄和主體內(nèi)容兩部分，在首頁(yè)中既可以搜索查看自己感興趣的影視作品，也可以分模塊快速瀏覽最新上映的影片評(píng)分情況。1.掌握使用微信小程序網(wǎng)絡(luò)請(qǐng)求方法。2.掌握ES6模塊中的export與import的使用方法。3.了解小程序頁(yè)面生命周期。任務(wù)：首頁(yè)的實(shí)現(xiàn)任務(wù)：首頁(yè)的實(shí)現(xiàn)為首頁(yè)添加頁(yè)面渲染。步驟1添加工具類，方便網(wǎng)絡(luò)請(qǐng)求地址集中管理及網(wǎng)絡(luò)接口統(tǒng)一調(diào)用。步驟2為首頁(yè)頁(yè)面添加業(yè)務(wù)邏輯代碼。步驟3知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【首頁(yè)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01引用組件5

02構(gòu)建首頁(yè)視圖10

03建立工具類5

04封裝函數(shù)25

05拋出與引用函數(shù)25

06在生命周期中使用封裝函數(shù)20

07完成任務(wù)收獲積累：10

總評(píng)分100

單元四列表頁(yè)單元四：列表頁(yè)在“豆瓣評(píng)分”微信小程序中，列表頁(yè)用于展示電影、電視劇、綜藝類型影片的全部數(shù)據(jù)內(nèi)容，需要引用自定義組件searchbar和itemview，具體任務(wù)通過頁(yè)面渲染和業(yè)務(wù)邏輯實(shí)現(xiàn)。1.掌握微信小程序中使用wx:for實(shí)現(xiàn)對(duì)象的遍歷2.掌握使用setData函數(shù)將數(shù)據(jù)從邏輯層發(fā)送到視圖層的實(shí)現(xiàn)方法任務(wù)：列表頁(yè)的實(shí)現(xiàn)任務(wù)：列表頁(yè)的實(shí)現(xiàn)為列表頁(yè)添加頁(yè)面渲染。步驟1為列表頁(yè)面添加業(yè)務(wù)邏輯代碼。步驟2知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【列表頁(yè)功能】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01引用組件10

02列表頁(yè)頁(yè)面渲染20

03頁(yè)面樣式20

04邏輯實(shí)現(xiàn)40

05完成任務(wù)收獲積累：10

總評(píng)分100

單元五搜索功能單元五：搜索功能豆瓣小程序首頁(yè)最上方為搜索欄圖片，單擊可跳轉(zhuǎn)至搜索頁(yè)面。在搜索頁(yè)面上方的搜索欄中輸入關(guān)鍵字，可查找到相關(guān)的電影、電視劇等影視作品信息，并在頁(yè)面下方通過列表信息呈現(xiàn)，通過搜索頁(yè)面可實(shí)現(xiàn)小程序的搜索功能。1.熟悉如何使用API實(shí)現(xiàn)本地?cái)?shù)據(jù)緩存和清理本地緩存數(shù)據(jù)2.掌握wx.setStorage和wx.removeStorageAPI接口使用方法任務(wù)：搜索功能的實(shí)現(xiàn)任務(wù)：搜索功能的實(shí)現(xiàn)為搜索頁(yè)添加頁(yè)面渲染。步驟1修改工具類，方便網(wǎng)絡(luò)請(qǐng)求地址集中管理及網(wǎng)絡(luò)接口統(tǒng)一調(diào)用。步驟2為搜索頁(yè)面添加業(yè)務(wù)邏輯代碼。步驟3知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【搜索功能】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01搜索頁(yè)視圖渲染10

02添加搜索頁(yè)樣式25

03添加修改工具類25

04添加業(yè)務(wù)邏輯30

05完成任務(wù)收獲積累：10

總評(píng)分100

單元六詳情頁(yè)單元六：詳情頁(yè)“豆瓣評(píng)分”小程序中的詳情頁(yè)是對(duì)影視作品的具體介紹，包括作品簡(jiǎn)介及評(píng)論。本單元主要介紹詳情頁(yè)中基本信息、標(biāo)簽信息和短評(píng)信息展示的實(shí)現(xiàn)。1.熟悉微信小程序中的網(wǎng)絡(luò)請(qǐng)求。2.熟悉小程序頁(yè)面生命周期。3.掌握flex布局樣式。4.熟悉text組件使用方法。5.掌握封裝函數(shù)的使用任務(wù)一：基本信息展示任務(wù)一：基本信息展示為詳情頁(yè)中添加頁(yè)面渲染。步驟1修改工具類，方便網(wǎng)絡(luò)請(qǐng)求地址集中管理及網(wǎng)絡(luò)接口統(tǒng)一調(diào)用。步驟2為詳情頁(yè)頁(yè)面添加業(yè)務(wù)邏輯代碼。步驟3知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【詳情頁(yè)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01

“基本信息展示”部分頁(yè)面構(gòu)建20

02添加樣式25

03修改工具類25

04添加業(yè)務(wù)邏輯代碼20

05完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)二：標(biāo)簽信息展示任務(wù)二：標(biāo)簽信息展示為詳情頁(yè)的視圖層添加標(biāo)簽信息展示部分的渲染。步驟1修改工具類，方便網(wǎng)絡(luò)請(qǐng)求地址集中管理及網(wǎng)絡(luò)接口統(tǒng)一調(diào)用。步驟2為詳情頁(yè)頁(yè)面添加業(yè)務(wù)邏輯代碼。步驟3知識(shí)鏈接任務(wù)考評(píng)【標(biāo)簽信息展示】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01標(biāo)簽信息視圖構(gòu)建10

02添加標(biāo)簽信息樣式25

03添加修改工具類25

04添加業(yè)務(wù)邏輯30

05完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)三：短評(píng)信息展示任務(wù)三：短評(píng)信息展示為短評(píng)信息添加頁(yè)面渲染。步驟1修改工具類，方便網(wǎng)絡(luò)請(qǐng)求地址集中管理及網(wǎng)絡(luò)接口統(tǒng)一調(diào)用。步驟2為詳情頁(yè)頁(yè)面添加業(yè)務(wù)邏輯代碼。步驟3任務(wù)考評(píng)【短評(píng)信息展示】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01視圖層構(gòu)建15

02添加樣式15

03修改工具類20

04封裝函數(shù)20

05添加業(yè)務(wù)邏輯20

06完成任務(wù)收獲積累：10

總評(píng)分100

單元七短評(píng)列表功能單元七：短評(píng)列表功能“豆瓣評(píng)分”小程序中的短評(píng)列表頁(yè)用于顯示每個(gè)影視作品的所有評(píng)論內(nèi)容，該頁(yè)面的具體實(shí)現(xiàn)主要通過頁(yè)面構(gòu)建、添加樣式、封裝函數(shù)和添加業(yè)務(wù)邏輯完成。1.熟悉button組件的使用2.熟練掌握事件函數(shù)的創(chuàng)建與使用3.掌握wx.navigateBack()接口的功能與使用方法任務(wù)：短評(píng)列表功能實(shí)現(xiàn)任務(wù)：短評(píng)列表功能實(shí)現(xiàn)為短評(píng)列表頁(yè)添加頁(yè)面渲染。步驟1為短評(píng)列表頁(yè)面添加業(yè)務(wù)邏輯代碼。步驟2知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【短評(píng)列表功能】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01短評(píng)列表頁(yè)面構(gòu)建20

02添加樣式25

03封裝函數(shù)25

04添加業(yè)務(wù)邏輯20

05完成任務(wù)收獲積累：10

總評(píng)分100

THANK

YOU!項(xiàng)目Ⅱ：琪斐定制家居館《微信小程序項(xiàng)目實(shí)戰(zhàn)》目錄單元一

產(chǎn)品展示和聯(lián)系我們單元二

首頁(yè)模塊單元一產(chǎn)品展示和聯(lián)系我們單元一：產(chǎn)品展示和聯(lián)系我們本單元介紹了“琪斐定制家居館”小程序中“產(chǎn)品展示”和“聯(lián)系我們”模塊的實(shí)現(xiàn)，具體分為3個(gè)任務(wù)，配置tab標(biāo)簽導(dǎo)航、產(chǎn)品展示頁(yè)和聯(lián)系我們頁(yè)面。1.熟悉小程序全局配置文件app.json功能；2.掌握app.json文件中“pages”屬性、“window”對(duì)象、“tabBar”屬性的使用方法；3.掌握image組件的使用方法；4.掌握內(nèi)置地圖與撥打電話API的使用。任務(wù)一：配置tab標(biāo)簽導(dǎo)航任務(wù)一：配置tab標(biāo)簽導(dǎo)航整理初始代碼，刪除部分文件及代碼。步驟1配置底部tab標(biāo)簽導(dǎo)航。步驟2圖2-1-3products目錄配置底部tab標(biāo)簽導(dǎo)航。步驟2知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01整理初始代碼，刪除部分文件及代碼。40

02配置底部tab標(biāo)簽導(dǎo)航。50

03完成任務(wù)收獲積累：10

總評(píng)分100

【配置tab標(biāo)簽導(dǎo)航】考評(píng)記錄任務(wù)二：產(chǎn)品展示頁(yè)任務(wù)二：產(chǎn)品展示頁(yè)為視圖層添加頁(yè)面渲染，打開文件products.wxml，并添加代碼：步驟1打開樣式文件products.wxss，添加代碼：步驟2知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【產(chǎn)品展示頁(yè)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01視圖層頁(yè)面渲染40

02添加頁(yè)面樣式50

03完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)三：聯(lián)系我們頁(yè)任務(wù)三：聯(lián)系我們頁(yè)為“聯(lián)系我們”頁(yè)視圖層添加渲染，打開me.wxml文件，并添加代碼。步驟1添加樣式文件，打開me.wxss文件，添加代碼。步驟2打開me.js文件，為公司地址添加click單擊事件，調(diào)用內(nèi)置地圖API。為電話按鈕添加teltoUs單擊事件，調(diào)用撥打電話的小程序API。在Page對(duì)象下，添加代碼。步驟3知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【聯(lián)系我們】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01視圖層頁(yè)面渲染30

02添加頁(yè)面樣式30

03添加單擊事件，調(diào)用內(nèi)置地圖與撥打電話API30

04完成任務(wù)收獲積累：10

總評(píng)分100

單元二首頁(yè)模塊單元二：首頁(yè)模塊“琪斐定制家居館”小程序的首頁(yè)模塊由首頁(yè)展示、公司簡(jiǎn)介頁(yè)、產(chǎn)品服務(wù)頁(yè)、典型案例頁(yè)和最新產(chǎn)品頁(yè)5個(gè)任務(wù)組成。1.熟悉輪播圖與九宮格導(dǎo)航欄的制作2.掌握swiper組件和blockwx:for的使用方法3.掌握頁(yè)面與js文件的數(shù)據(jù)綁定4.熟悉bindtap點(diǎn)擊事件的使用5.掌握wx.makePhoneCall撥打電話API的使用任務(wù)一：首頁(yè)展示任務(wù)一：首頁(yè)展示頂部輪播圖效果實(shí)現(xiàn)。步驟1構(gòu)建九宮格導(dǎo)航欄。步驟2底部廣告效果實(shí)現(xiàn)。步驟3知識(shí)鏈接任務(wù)考評(píng)【首頁(yè)展示】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01頂部輪播圖效果實(shí)現(xiàn)40

02構(gòu)建九宮格導(dǎo)航欄40

03底部廣告效果實(shí)現(xiàn)10

04完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)二：公司簡(jiǎn)介頁(yè)任務(wù)二：公司簡(jiǎn)介頁(yè)為公司簡(jiǎn)介頁(yè)視圖層添加渲染，打開company.wxml文件，并添加代碼：步驟1添加樣式文件，打開company.wxss文件，添加代碼：步驟2為該頁(yè)面添加數(shù)據(jù)綁定，打開company.js文件，在data中添加如下代碼，實(shí)現(xiàn)頁(yè)面與js文件的數(shù)據(jù)綁定操作：步驟3任務(wù)考評(píng)【公司簡(jiǎn)介頁(yè)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01頁(yè)面視圖層渲染30

02添加樣式40

03頁(yè)面與js文件的數(shù)據(jù)綁定20

04完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)三：產(chǎn)品服務(wù)頁(yè)任務(wù)三：產(chǎn)品服務(wù)頁(yè)為產(chǎn)品服務(wù)頁(yè)視圖層添加渲染，采用wx:for列表渲染減少代碼量。打開service.wxml文件，并添加代碼。步驟1為其添加樣式文件，打開service.wxss文件，添加代碼。步驟2為該頁(yè)面添加數(shù)據(jù)綁定，打開service.js文件，在data下添加代碼，實(shí)現(xiàn)頁(yè)面與js文件的數(shù)據(jù)綁定操作。步驟3知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【產(chǎn)品服務(wù)頁(yè)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01頁(yè)面視圖層渲染30

02添加樣式30

03頁(yè)面與js文件的數(shù)據(jù)綁定30

04完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)四：典型案例頁(yè)任務(wù)四：典型案例頁(yè)為典型案例頁(yè)視圖層添加渲染，采用顯示數(shù)據(jù)與列表數(shù)據(jù)相結(jié)合的方式實(shí)施。打開classic.wxml文件，并添加代碼。步驟1為其添加樣式文件，打開classic.wxss文件，添加代碼。步驟2為該頁(yè)面添加數(shù)據(jù)綁定，打開classic.js文件，在data下添加如下代碼，實(shí)現(xiàn)頁(yè)面與js文件的數(shù)據(jù)綁定操作。步驟3任務(wù)考評(píng)【典型案例頁(yè)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01頁(yè)面視圖層渲染30

02添加樣式30

03頁(yè)面與js文件的數(shù)據(jù)綁定30

04完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)五：最新產(chǎn)品頁(yè)任務(wù)五：最新產(chǎn)品頁(yè)為最新產(chǎn)品頁(yè)視圖層添加渲染。打開newest.wxml文件，并添加代碼。步驟1為頁(yè)面添加樣式文件，打開newest.wxss文件，添加代碼。步驟2為電話訂單按鈕添加單擊事件，調(diào)用撥打電話的小程序API。步驟3知識(shí)鏈接任務(wù)考評(píng)【最新產(chǎn)品頁(yè)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01頁(yè)面視圖層渲染30

02添加樣式30

03添加單擊事件，調(diào)用撥打電話小程序API30

04完成任務(wù)收獲積累：10

總評(píng)分100

THANK

YOU!項(xiàng)目Ⅲ番茄時(shí)鐘《微信小程序項(xiàng)目實(shí)戰(zhàn)》目錄單元一

主頁(yè)單元二

記錄頁(yè)單元三

設(shè)置頁(yè)單元四

項(xiàng)目測(cè)試及審核與發(fā)布單元一主頁(yè)單元一：主頁(yè)“番茄時(shí)鐘”小程序中的主頁(yè)能夠在點(diǎn)擊按鈕時(shí)實(shí)現(xiàn)“工作”與“休息”兩種狀態(tài)下的倒計(jì)時(shí)，功能實(shí)現(xiàn)具體通過頁(yè)面設(shè)計(jì)和邏輯層兩個(gè)任務(wù)完成。1.熟悉app.wxss文件的作用2.掌握input組件的使用方法3.熟悉wx.getStorage和wx.getStorageSync緩存數(shù)據(jù)的使用任務(wù)一：頁(yè)面設(shè)計(jì)任務(wù)一：頁(yè)面設(shè)計(jì)整理初始代碼，刪除部分文件及代碼。步驟1打開app.json文件，添加tab標(biāo)簽導(dǎo)航頁(yè)設(shè)置，順序添加如下代碼。步驟2主頁(yè)視圖層渲染。步驟3知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【頁(yè)面設(shè)計(jì)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01整理初始代碼20

02添加tab標(biāo)簽導(dǎo)航30

03主頁(yè)視圖層渲染40

04完成任務(wù)收獲積累：10

總評(píng)分100

任務(wù)二：邏輯層開發(fā)任務(wù)二：產(chǎn)品展示頁(yè)定義全局默認(rèn)數(shù)據(jù)變量步驟1定義頁(yè)面臨時(shí)變量，用來(lái)控制按鈕顯示內(nèi)容展示和圓環(huán)顯示角度。打開index.js文件，在Page函數(shù)前添加臨時(shí)變量，添加代碼。步驟2添加頁(yè)面數(shù)據(jù)綁定變量，在Page函數(shù)中添加data對(duì)象，與xml文件綁定顯示,添加代碼。步驟3在頁(yè)面展示時(shí)，將緩存中保存的數(shù)據(jù)提取出來(lái)，顯示在頁(yè)面上。在onShow生命周期函數(shù)中添加代碼。步驟5實(shí)現(xiàn)倒計(jì)時(shí)功能并且保存操作記錄。。步驟6定義formatTime函數(shù)，作用是時(shí)間轉(zhuǎn)換，保證都是二位數(shù)顯示。如將1轉(zhuǎn)換成01，2轉(zhuǎn)換成02，添加代碼。步驟4知識(shí)鏈接任務(wù)考評(píng)【邏輯層開發(fā)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01定義全局默認(rèn)數(shù)據(jù)變量、頁(yè)面臨時(shí)變量、15

02添加頁(yè)面數(shù)據(jù)綁定變量、formatTime函數(shù)15

03提取緩存數(shù)據(jù)，顯示在頁(yè)面上20

04實(shí)現(xiàn)倒計(jì)時(shí)功能并保存操作記錄40

05完成任務(wù)收獲積累：10

總評(píng)分100

單元二記錄頁(yè)單元二：記錄頁(yè)“番茄時(shí)鐘”小程序記錄頁(yè)是一個(gè)將倒計(jì)時(shí)發(fā)生開始與停止時(shí)間與狀態(tài)進(jìn)行展示的頁(yè)面，頁(yè)面及功能實(shí)現(xiàn)主要通過視圖層渲染、添加樣式和邏輯層開發(fā)完成。1.熟悉wx.setNavigationBarTitle小程序API的使用2.掌握scroll-view組件的使用3.掌握wx.showToast、wx.showModal小程序API的使用任務(wù)：記錄頁(yè)的實(shí)現(xiàn)任務(wù)：記錄頁(yè)的實(shí)現(xiàn)記錄頁(yè)視圖層渲染，打開record.wxml文件，并添加代碼。步驟1為記錄頁(yè)添加樣式文件，打開record.wxss文件，添加代碼。步驟2為記錄頁(yè)添加業(yè)務(wù)邏輯代碼。步驟3知識(shí)鏈接知識(shí)鏈接知識(shí)鏈接任務(wù)考評(píng)【記錄頁(yè)】考評(píng)記錄姓名

完成日期

序號(hào)考核內(nèi)容標(biāo)準(zhǔn)分評(píng)分01記錄頁(yè)視圖層渲染30

02添加樣式30

03邏輯層開發(fā)30

04完成任務(wù)收獲積累：10

總評(píng)分100

單元三設(shè)置頁(yè)單元三：設(shè)置頁(yè)番茄時(shí)鐘小程序的“設(shè)置頁(yè)”可以對(duì)工作和休息狀態(tài)下倒計(jì)時(shí)時(shí)長(zhǎng)等參數(shù)進(jìn)行設(shè)置，頁(yè)面及功能實(shí)現(xiàn)通過頁(yè)面視圖層渲染、添加樣式和邏輯層開發(fā)完