前言
項(xiàng)目1 初識(shí)微信小程序
任務(wù)1.1 注冊(cè)小程序
1.1.1 注冊(cè)小程序賬號(hào)
1.1.2 查看小程序ID
任務(wù)1.2 認(rèn)識(shí)小程序開(kāi)發(fā)者工具
1.2.1 安裝微信開(kāi)發(fā)者工具
1.2.2 體驗(yàn)微信小程序
1.2.3 開(kāi)發(fā)者工具的介紹
任務(wù)1.3 小程序目錄結(jié)構(gòu)
1.3.1 小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區(qū)別
1.3.2 項(xiàng)目配置文件
1.3.3 主體文件
1.3.4 頁(yè)面文件
1.3.5 其他文件
項(xiàng)目小結(jié)
學(xué)習(xí)評(píng)價(jià)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目2 小程序編程基礎(chǔ)
任務(wù)2.1 小程序的執(zhí)行順序
2.1.1 小程序注冊(cè)函數(shù)App()
2.1.2 頁(yè)面注冊(cè)函數(shù)Page()
任務(wù)2.2 構(gòu)建頁(yè)面數(shù)據(jù)
2.2.1 頁(yè)面數(shù)據(jù)
2.2.2 數(shù)據(jù)綁定
任務(wù)2.3 列表渲染
2.3.1 wx:for 和 wx:key的使用
2.3.2 block wx:for的使用
任務(wù)2.4 條件渲染
2.4.1 wx:if的使用
2.4.2 block wx:if的使用
2.4.3 hidden的使用
任務(wù)2.5 事件綁定
2.5.1 事件的使用方式
2.5.2 事件的分類(lèi)
2.5.3 事件的捕獲階段
2.5.4 綁定事件示例
項(xiàng)目小結(jié)
學(xué)習(xí)評(píng)價(jià)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目3 小程序常用組件
任務(wù)3.1 Flex彈性盒模型布局
3.1.1 Flex布局相關(guān)屬性
3.1.2 Flex布局案例
3.1.3 Flex項(xiàng)目布局屬性
任務(wù)3.2 “天天打卡”布局設(shè)計(jì)
3.2.1 案例展示
3.2.2 案例初始化
3.2.3 頁(yè)面基本結(jié)構(gòu)
任務(wù)3.3 “天天打卡”功能實(shí)現(xiàn)
3.3.1 獲得個(gè)人信息——開(kāi)放數(shù)據(jù)
3.3.2 打卡名稱(chēng)——輸入框組件
3.3.3 打卡地點(diǎn)——地理位置API
3.3.4 打卡時(shí)間——picker組件
3.3.5 重復(fù)日期——條件運(yùn)算符
任務(wù)3.4 “天天打卡”數(shù)據(jù)處理
3.4.1 消息提示框API
3.4.2 數(shù)據(jù)保存——寫(xiě)入緩存
3.4.3 打卡標(biāo)簽——讀取緩存
項(xiàng)目小結(jié)
學(xué)習(xí)評(píng)價(jià)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目4 商城首頁(yè)模塊開(kāi)發(fā)
任務(wù)4.1 商城項(xiàng)目需求分析
4.1.1 首頁(yè)功能需求
4.1.2 新聞頁(yè)功能需求
4.1.3 產(chǎn)品頁(yè)功能需求
4.1.4 購(gòu)物車(chē)頁(yè)功能需求
4.1.5 個(gè)人中心頁(yè)功能需求
任務(wù)4.2 商城項(xiàng)目創(chuàng)建
4.2.1 新建小程序項(xiàng)目
4.2.2 新建頁(yè)面文件
4.2.3 導(dǎo)航欄設(shè)計(jì)
任務(wù)4.3 商城首頁(yè)視圖的設(shè)計(jì)
4.3.1 tabBar組件的設(shè)計(jì)
4.3.2 swiper組件的設(shè)計(jì)
4.3.3 navigator組件的設(shè)計(jì)
4.3.4 scroll-view組件的設(shè)計(jì)
4.3.5 公共樣式的設(shè)計(jì)
任務(wù)4.4 商城首頁(yè)動(dòng)畫(huà)的實(shí)現(xiàn)
4.4.1 Animation動(dòng)畫(huà)實(shí)例
4.4.2 關(guān)鍵幀動(dòng)畫(huà)
4.4.3 實(shí)現(xiàn)商品動(dòng)畫(huà)效果
項(xiàng)目小結(jié)
學(xué)習(xí)評(píng)價(jià)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目5 新聞頁(yè)面模塊開(kāi)發(fā)
任務(wù)5.1 新聞頁(yè)面視圖層的設(shè)計(jì)
5.1.1 項(xiàng)目展示
5.1.2 新聞列表頁(yè)面的設(shè)計(jì)
5.1.3 新聞列表樣式的設(shè)計(jì)
任務(wù)5.2 新聞列表頁(yè)面的實(shí)現(xiàn)
5.2.1 靜態(tài)數(shù)據(jù)的定義
5.2.2 新聞列表頁(yè)面數(shù)據(jù)綁定
5.2.3 篩選功能的設(shè)計(jì)
5.2.4 下拉刷新示例
5.2.5 上拉觸底示例
5.2.6 頁(yè)面跳轉(zhuǎn)API
任務(wù)5.3 新聞詳情頁(yè)面的實(shí)現(xiàn)
5.3.1 新聞詳情頁(yè)面的設(shè)計(jì)
5.3.2 獲取對(duì)應(yīng)的詳情數(shù)據(jù)
5.3.3 收藏功能的實(shí)現(xiàn)
5.3.4 轉(zhuǎn)發(fā)分享功能的實(shí)現(xiàn)
5.3.5 背景音樂(lè)的實(shí)現(xiàn)
項(xiàng)目小結(jié)
學(xué)習(xí)評(píng)價(jià)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目6 商品頁(yè)面模塊開(kāi)發(fā)
任務(wù)6.1 商品分類(lèi)視圖層的設(shè)計(jì)
6.1.1 項(xiàng)目展示
6.1.2 定義靜態(tài)數(shù)據(jù)
6.1.3 商品分類(lèi)區(qū)域
6.1.4 商品分類(lèi)展示區(qū)域
6.1.5 商品分類(lèi)列表滾動(dòng)
任務(wù)6.2 商品列表頁(yè)面的設(shè)計(jì)
6.2.1 商品列表頁(yè)的布局
6.2.2 商品列表頁(yè)的樣式
6.2.3 自定義組件的創(chuàng)建
6.2.4 自定義組件的使用
任務(wù)6.3 商品詳情頁(yè)面的設(shè)計(jì)
6.3.1 商品詳情頁(yè)輪播圖
6.3.2 商品詳情頁(yè)標(biāo)題信息
6.3.3 使用iconfont圖標(biāo)庫(kù)
6.3.4 picker組件的使用
6.3.5 商品詳情頁(yè)長(zhǎng)圖的實(shí)現(xiàn)
6.3.6 商品詳情頁(yè)底部的實(shí)現(xiàn)
項(xiàng)目小結(jié)
學(xué)習(xí)評(píng)價(jià)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目7 購(gòu)物車(chē)模塊開(kāi)發(fā)
任務(wù)7.1 定義購(gòu)物車(chē)基礎(chǔ)數(shù)據(jù)
7.1.1 項(xiàng)目展示
7.1.2 定義靜態(tài)數(shù)據(jù)
7.1.3 購(gòu)物車(chē)視圖頁(yè)面
任務(wù)7.2 購(gòu)物車(chē)頁(yè)面詳情
7.2.1 購(gòu)物車(chē)商品列表
7.2.2 購(gòu)物車(chē)商品數(shù)量
7.2.3 購(gòu)物車(chē)底部信息
7.2.4 購(gòu)物車(chē)為空狀態(tài)
任務(wù)7.3 購(gòu)物車(chē)結(jié)算金額
7.3.1 單選商品金額計(jì)算
7.3.2 全選商品金額計(jì)算
項(xiàng)目小結(jié)
學(xué)習(xí)評(píng)價(jià)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目8 用戶(hù)信息模塊開(kāi)發(fā)
任務(wù)8.1 用戶(hù)信息頁(yè)面
8.1.1 項(xiàng)目展示
8.1.2 用戶(hù)登錄流程
8.1.3 實(shí)現(xiàn)用戶(hù)授權(quán)登錄
8.1.4 退出登錄
任務(wù)8.2 模板的使用
8.2.1 模板語(yǔ)法
8.2.2 創(chuàng)建模板
8.2.3 使用模板
任務(wù)8.3 ECharts在小程序中的運(yùn)用
8.3.1 配置ECharts