教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

微信小程序教程:10天精通微信小程序開發(fā)【2022版本】

更新時間:2021年12月24日11時58分 來源:傳智教育 瀏覽次數(shù):


圖文教程
簡介

微信小程序是不需要下載安裝即可使用的應(yīng)用,它實現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開的應(yīng)用,在微信小程序的使用過程中,用戶只增不減,很多的公司都開始研發(fā)屬于自己的小程序,那么小程序該如何去制作并實現(xiàn)功能呢?

本套《10天精通微信小程序開發(fā)教程》從小程序賬號注冊、開發(fā)環(huán)境搭建、基礎(chǔ)語法、路由導(dǎo)航、數(shù)據(jù)請求、分包、組件化等方面詳細(xì)闡述了小程序開發(fā)必備的基礎(chǔ)知識,其前5天是小程基礎(chǔ)課程,后5天是小程序項目課程。

全套視頻教程+筆記+源碼百度云盤下載地址:

https://pan.baidu.com/s/1wIPI_Y3A58xCIGLL0wcWqt
如果鏈接失效,加QQ:435946716,獲取下載鏈接
提取碼:1234

微信小程序開發(fā)教程

1Day01  微信小程序基礎(chǔ)課程

00. 學(xué)習(xí)目標(biāo)

01. 小程序簡介

02. 注冊小程序賬號&安裝開發(fā)者工具

03. 創(chuàng)建第一個小程序項目

04. 認(rèn)識小程序項目的基本組成結(jié)構(gòu)

05. 認(rèn)識小程序頁面

06. 小程序的宿主環(huán)境

07. 組件 - view和scroll-view組件的基本用法

08. 組件 - swiper和swiper-item的基本用法

09. 組件 - text和rich-text組件的基本用法

10. 組件 - button和image組件的基本用法

11. 小程序 API 的3大分類

12. 協(xié)同工作 - 小程序權(quán)限管理的概念以及成員管理的兩個方面

13. 協(xié)同工作 - 開發(fā)者的權(quán)限說明以及如何維護(hù)項目成員

14. 發(fā)布 - 了解小程序的版本階段與上線的主要步驟

15. 發(fā)布 - 小程序的推廣與運(yùn)行數(shù)據(jù)的查看

16. 總結(jié)

00. 學(xué)習(xí)目標(biāo)

01. 小程序簡介

02. 注冊小程序賬號&安裝開發(fā)者工具

03. 創(chuàng)建第一個小程序項目

04. 認(rèn)識小程序項目的基本組成結(jié)構(gòu)

05. 認(rèn)識小程序頁面

06. 小程序的宿主環(huán)境

07. 組件 - view和scroll-view組件的基本用法

08. 組件 - swiper和swiper-item的基本用法

09. 組件 - text和rich-text組件的基本用法

10. 組件 - button和image組件的基本用法

11. 小程序 API 的3大分類

12. 協(xié)同工作 - 小程序權(quán)限管理的概念以及成員管理的兩個方面

13. 協(xié)同工作 - 開發(fā)者的權(quán)限說明以及如何維護(hù)項目成員

14. 發(fā)布 - 了解小程序的版本階段與上線的主要步驟

15. 發(fā)布 - 小程序的推廣與運(yùn)行數(shù)據(jù)的查看

16. 總結(jié)

2Day02  微信小程序基礎(chǔ)課程

00.學(xué)習(xí)目標(biāo)

01.數(shù)據(jù)綁定

02.事件綁定

03.事件傳參與數(shù)據(jù)同步

04.條件渲染

05.列表渲染

06.wxss - wxss與css的關(guān)系

07.wxss - rpx單位

08.wxss - 樣式導(dǎo)入

09.wxss - 全局樣式與局部樣式

10.全局配置 - 常用的全局配置項以及小程序窗口的組成部分

11. 全局配置 - window - 導(dǎo)航欄

12.全局配置 - window - 下拉刷新

13.全局配置 - window - 設(shè)置上拉觸底的距離

14.全局配置 - tabBar

15.小程序的頁面配置

16.數(shù)據(jù)請求 - GET和POST請求

17.數(shù)據(jù)請求 - request請求的注意事項

18.案例 - 實現(xiàn)本地生活的首頁基礎(chǔ)布局

19.總結(jié)

3Day03  微信小程序基礎(chǔ)課程

00.學(xué)習(xí)目標(biāo)

01.聲明式導(dǎo)航

02.編程式導(dǎo)航

03.導(dǎo)航傳參

04.下拉刷新

05.上拉觸底

06.上拉觸底案例 - 初步實現(xiàn)上拉觸底效果

07.上拉觸底案例 - 添加loading效果和節(jié)流處理

08.擴(kuò)展 - 自定義編譯模式

09.生命周期的概念與分類

10.生命周期函數(shù)的概念與分類

11.應(yīng)用和頁面的生命周期函數(shù)

12.wxs的概念

13.wxs的基本用法

14.案例 - 演示案例效果并實現(xiàn)導(dǎo)航跳轉(zhuǎn)

15.案例 - 設(shè)置標(biāo)題內(nèi)容并創(chuàng)建編譯模式

16.案例 - 獲取并渲染商鋪列表的數(shù)據(jù)

17.案例 - 初步實現(xiàn)上拉加載效果

18.案例 - 判斷數(shù)據(jù)是否加載完畢

19.案例 - 實現(xiàn)下拉刷新功能

20.使用wxs處理手機(jī)號

21.總結(jié)

4Day04  微信小程序基礎(chǔ)課程

00.學(xué)習(xí)目標(biāo)

01.數(shù)據(jù)綁定

02.事件綁定

03.事件傳參與數(shù)據(jù)同步

04.條件渲染

05.列表渲染

06.wxss - wxss與css的關(guān)系

07.wxss - rpx單位

08.wxss - 樣式導(dǎo)入

09.wxss - 全局樣式與局部樣式

10.全局配置 - 常用的全局配置項以及小程序窗口的組成部分

11. 全局配置 - window - 導(dǎo)航欄

12.全局配置 - window - 下拉刷新

13.全局配置 - window - 設(shè)置上拉觸底的距離

14.全局配置 - tabBar

15.小程序的頁面配置

16.數(shù)據(jù)請求 - GET和POST請求

17.數(shù)據(jù)請求 - request請求的注意事項

18.案例 - 實現(xiàn)本地生活的首頁基礎(chǔ)布局

19.總結(jié)

5Day05  微信小程序基礎(chǔ)課程

01.導(dǎo)入需要用到的小程序項目

02.初步創(chuàng)建并使用自定義組件

03.使用css變量定制vant主題樣式

04.小程序API的Promise化

05.全局?jǐn)?shù)據(jù)共享 - 了解全局?jǐn)?shù)據(jù)共享方案和MobX

06.全局?jǐn)?shù)據(jù)共享 - 創(chuàng)建Store實例并定義計算屬性與actions方法

07.全局?jǐn)?shù)據(jù)共享 - 在頁面中使用Store中的成員

08.全局?jǐn)?shù)據(jù)共享 - 在組件中使用Store中的成員

09.分包的基礎(chǔ)概念

10.分包的基本用法

11.獨(dú)立分包

12.分包預(yù)下載

13.在app.json中定義tabBar的配置信息

14.初步實現(xiàn)自定義的tabBar效果

15.渲染tabBar上的數(shù)字徽標(biāo)

16.實現(xiàn)tabBar頁面的切換效果

17.修改tabBar選中項文本的顏色值

18.總結(jié)

6Day06  小程項目課程

01.項目介紹與項目文檔

02.配置uni-app的開發(fā)環(huán)境

03.初始化uni-app項目

04.配置tabBar效果

05.首頁 - 輪播圖效果

06.首頁 - 配置小程序分包

07.首頁 - 點擊輪播圖跳轉(zhuǎn)到商品詳情頁

08.首頁 - 封裝uni.$showMsg()函數(shù)

09.首頁 - 實現(xiàn)分類導(dǎo)航區(qū)域

10.首頁 - 獲取樓層數(shù)據(jù)并渲染樓層的標(biāo)題

11.首頁 - 渲染樓層中的圖片

12.首頁 - 點擊樓層圖片跳轉(zhuǎn)到商品列表頁面

13.分支的合并與提交

7Day07  小程項目課程

01.分類 - 創(chuàng)建cate分支以及分類頁面的編譯模式

02.分類 - 初始化分類區(qū)域的頁面布局

03.分類 - 獲取并渲染一級分類的列表數(shù)據(jù)

04.分類 - 渲染二級和三級分類列表

05.分類 - 優(yōu)化分類頁面的效果

06.搜索 - 介紹搜索功能并創(chuàng)建search分支

07.搜索 - 自定義組件 - 渲染my-search組件的基本結(jié)構(gòu)

08.搜索 - 自定義組件 - 封裝自定義屬性和click事件

09.搜索 - 自定義組件 - 導(dǎo)航跳轉(zhuǎn)與吸頂效果

10.搜索 - 搜索建議 - 自動獲得焦點與防抖處理

11.搜索 - 搜索建議 - 實現(xiàn)搜索建議列表

12. 搜索 - 索建議 - 點擊搜索Item項導(dǎo)航到商品詳情頁

13.搜索 - 搜索歷史 - 渲染搜索歷史的基本結(jié)構(gòu)

14.搜索 -搜索歷史 - 處理搜索關(guān)鍵詞

15.搜索 - 搜索歷史 - 清空搜索歷史記錄

16.搜索 - 搜索歷史 - 點擊搜索歷史跳轉(zhuǎn)到商品列表頁面

17.搜索 - 分支的合并與提交

8Day08  小程項目課程

01.商品列表 - 功能介紹-分支創(chuàng)建

02.商品列表 - 請求并渲染商品列表的數(shù)據(jù)

03.商品列表 - 把商品Item項封裝為自定義組件

04.商品列表 - 使用過濾器處理商品價格

05.商品列表 - 上拉加載更多商品

06.商品列表 - 下拉刷新列表數(shù)據(jù)

07.商品列表 - 點擊商品item項導(dǎo)航到商品詳情頁面

08.商品列表 - 分支的合并與提交

09.商品詳情 - 創(chuàng)建分支-添加編譯模式

10.商品詳情 - 獲取商品詳情的數(shù)據(jù)

11.商品詳情 - 輪播圖效果

12.商品詳情 - 渲染并美化商品信息區(qū)域

13.商品詳情 - 渲染商品詳情的數(shù)據(jù)并優(yōu)化詳情頁的顯示

14.商品詳情 - 渲染商品導(dǎo)航區(qū)域

15.商品詳情 - 分支的合并與提交

16.加入購物車 - 初始化vuex

17.加入購物車 - 實現(xiàn)加入購物車的功能

18.加入購物車 - 動態(tài)統(tǒng)計購物車中商品的總數(shù)量

19.加入購物車 - 持久化存儲購物車中的商品

20.加入購物車 - 優(yōu)化商品詳情頁的total偵聽器

21.加入購物車 - 動態(tài)設(shè)置tabBar的數(shù)字徽標(biāo)

9Day09  小程項目課程

01.購物車頁面 - 演示效果并創(chuàng)建編譯模式

02.購物車頁面 - 商品列表 - 渲染商品列表區(qū)域的結(jié)構(gòu)

03.購物車頁面 - 商品列表 - 基于props封裝radio的勾選狀態(tài)

04.購物車頁面 - 商品列表 - 修改購物車商品的勾選狀態(tài)

05.購物車頁面 - 商品列表 - 封裝NumberBox

06.購物車頁面 - 商品列表 - 封裝num-change事件

07.購物車頁面 - 商品列表 - 優(yōu)化NumberBox組件

08.購物車頁面 - 商品列表 - 修改購物車中商品的數(shù)量

09.購物車頁面 - 商品列表 - 實現(xiàn)滑動刪除功能

10.購物車頁面 - 收貨地址 - 初步封裝my-address組件

11.購物車頁面 - 收貨地址 - 實現(xiàn)選擇收貨地址的功能

12.購物車頁面 - 收貨地址 - 渲染收貨人的信息

13.購物車頁面 - 收貨地址 - 把a(bǔ)ddress信息存儲到vuex中

14.購物車頁面 - 收貨地址 - 將vuex中的address持久化存儲到本地

15.購物車頁面 - 收貨地址 - 將addstr抽離為getters

16.購物車頁面 - 收貨地址 - 重新選擇收獲地址-取消授權(quán)時的問題

17.購物車頁面 - 收貨地址 - 解決重新授權(quán)的問題

10Day10  小程項目課程

01.購物車頁面 - 結(jié)算 - 封裝結(jié)算區(qū)域的組件

02.購物車頁面 - 結(jié)算 - 動態(tài)計算已勾選商品的數(shù)據(jù)和選中狀態(tài)

03.購物車頁面 - 結(jié)算 - 實現(xiàn)商品的全選與反選功能.

04.購物車頁面 - 結(jié)算 - 動態(tài)渲染已勾選商品的總價格

05.購物車頁面 - 結(jié)算 - 動態(tài)計算tabBar中購物車徽標(biāo)的值

06.購物車頁面 - 結(jié)算 - 渲染購物車為空時候的頁面結(jié)構(gòu)

07.購物車頁面 - 分支的合并與提交

08.登錄與支付 - 登錄 - 點擊結(jié)算按鈕進(jìn)行條件判斷

09.登錄與支付 - 登錄 - 初步渲染頁面的布局結(jié)構(gòu)

10.登錄與支付 - 登錄 - 獲取用戶的基本信息

11. 登錄與支付 - 登錄 - 將用戶的基本信息存儲到vuex

12. 登錄與支付 - 登錄 - 調(diào)用uni.login獲取code對應(yīng)的值

13. 登錄與支付 - 登錄 - 進(jìn)一步完善uni.login調(diào)用失敗之后的if判斷條件

14. 登錄與支付 - 登錄 - 獲取登錄的Token并存儲到vuex中

15.登錄與支付 - 用戶信息 - 渲染用戶的頭像和昵稱

16.登錄與支付 - 用戶信息 - 渲染第1個面板區(qū)域

17.登錄與支付 - 用戶信息 - 渲染第2個面板區(qū)域

18.登錄與支付 - 用戶信息 - 渲染第3個面板區(qū)域

19.登錄與支付 - 用戶信息 - 實現(xiàn)退出登錄的功能

20.登錄與支付 - 三秒跳轉(zhuǎn) - 初步實現(xiàn)3秒倒計時跳轉(zhuǎn)的功能

21.登錄與支付 - 三秒跳轉(zhuǎn) - 登錄成功后導(dǎo)航到登錄之前的頁面

22.登錄與支付 - 微信支付 - 在請求頭中添加Token身份認(rèn)證的字段

23.登錄與支付 - 微信支付 - 了解微信支付的流程

24.登錄與支付 - 微信支付 - 創(chuàng)建訂單

25.登錄與支付 - 微信支付 - 訂單預(yù)支付

26.登錄與支付 - 微信支付 - 實現(xiàn)微信支付

27.登錄與支付 - 分支的合并與提交

28.發(fā)布 - 了解為什么要進(jìn)行發(fā)布

29.發(fā)布 - 將uni-app項目發(fā)布為小程序

30.發(fā)布 - 將uni-app項目發(fā)布為安卓App

點擊查看更多


猜你喜歡:

微信小程序開發(fā)環(huán)境配置教程

前端教程:一天掌握企業(yè)級微信小程序的開發(fā)與應(yīng)用

vue.js教程:vue2.0+vue3.0全套視頻教程下載

傳智教育web前端開發(fā)培訓(xùn)課程

0 分享到:
和我們在線交談!