第1章 課程介紹
通過課程介紹,了解學習課程的必要性,所包含的知識點,課程安排,學習前提,課程收獲,快速全面了解課程。
1-1 課程導學
第2章 移動web硬知識點
本章主要講解移動web開發中必要掌握的基本知識,是進行后續學習的前提。從概述到開發調試方法,以及viewport視窗概念和原理的講解,在到移動web開發關鍵布局技能和適配方案,最后講解移動web中常用的touch事件。
2-1 移動web開發概述
2-2 移動web開發調試
2-3 移動web適配概述
2-4 viewport視窗概念
2-5 css3之flex布局
2-6 響應式布局和MediaQuery
2-7 rem,vw布局與適配
2-8 移動端touch事件詳解
第3章 移動web軟技能
本章主要講解移動web開發實戰中用到的相關知識點。從基本代碼工具的介紹到項目構建的基本概念,同時預先給大家介紹webpack和Sass的基本使用方法,幫助基礎弱的同學以便于進行后續的學習,最后教大家如何使用React組件化思想開發頁面。…
3-1 代碼管理工具&項目構建工具簡介
3-2 webpack工具使用介紹
3-3 Sass預處理工具使用介紹
3-4 React組件化思想
第4章 項目開發構建環境搭建
本章主要講解的內容都是為下章實戰項目做準備工作的開發,包括項目的最終結果演示,同時會講解如何使用webpack來從0搭建配置一個項目的構建環境和基本的Redux使用方法,以便于對Redux不熟悉的同學鞏固一下相關知識。
4-1 項目和技術棧介紹
4-2 項目演示
4-3 構建環境搭建(1)
4-4 構建環境搭建(2)
4-5 構建環境搭建(3)
4-6 構建環境搭建(4)
4-7 redux-react使用介紹(1)
4-8 redux-react使用介紹(2)
第5章 美團APP—首頁開發
開發首頁,講解通過React+Redux實現頁面基本邏輯,使用flex進行頁面布局,引入rem進行頁面適配,實現tab切換,滾動加載邏輯,以及事件綁定邏輯。
5-1 底部tab按鈕開發(webpack-dev-server配置)
5-2 底部tab按鈕開發-UI邏輯編寫(1)
5-3 底部tab按鈕開發-UI邏輯編寫(2)
5-4 底部tab按鈕開發(rem配置)
5-5 底部tab按鈕開發(集成ESlint)
5-6 底部tab按鈕開發(集成HMR)
5-7 首頁頁面開發Header模塊開發
5-8 首頁頁面開發SearchBar模塊開發
5-9 首頁頁面開發-Category模塊開發(1)
5-10 首頁頁面開發-Category模塊開發(2)
5-11 首頁頁面開發(ContentList模塊開發)
5-12 首頁頁面開發-ListItem模塊UI開發
5-13 首頁頁面開發-ListItem模塊樣式開發
5-14 首頁頁面開發-ListItem模塊數據渲染開發(1)
5-15 首頁頁面開發-ListItem模塊數據渲染開發( 2 )
5-16 首頁頁面開發(滾動加載邏輯實現)
5-17 訂單頁面開發(List模塊開發)
5-18 訂單頁面開發(OrderItem模塊開發)(1)
5-19 訂單頁面開發(OrderItem模塊開發)(2)
5-20 訂單頁面開發(公共ScrollView模塊開發)
5-21 我的頁面UI開發
5-22 我的頁面樣式開發
5-23 集成react-router
第6章 美團APP—評價和分類頁開發
開發評價頁和分類頁,講解使用div+overflow實現局部滾動,移動端輸入框相關使用技巧以及css偽類實現星型icon。
6-1 分類頁面開發(頂部NavHeader模塊開發)
6-2 分類頁面開發(頂部Header tab 模塊UI開發)
6-3 分類頁面開發(頂部Header模塊樣式和邏輯開發)
6-4 分類頁面開發(Filter面板模塊“全部分類”數據渲染開發)
6-5 分類頁面開發(Filter面板模塊“排序和篩選”數據渲染實現
6-6 分類頁面開發(Filter面板模塊樣式開發)
6-7 分類頁面開發(Filter面板模塊item邏輯實現)
6-8 分類頁面開發(列表List模塊開發)
6-9 評價頁面開發(UI開發)
6-10 評價頁面開發(樣式開發)
6-11 評價頁面開發(交互邏輯開發)
第7章 美團APP—詳情頁開發
開發詳情頁,講解點菜選擇器相關邏輯,通過React組件化對之前頁面的公共組件進行抽離,通過封裝scrollview實現評價tab的數據加載,以及使用css偽類實現1px邊框。
7-1 詳情頁頂部tab開發(UI開發)
7-2 詳情頁頂部tab開發(樣式交互邏輯開發)
7-3 詳情頁點菜頁面開發(LeftBarUI開發)
7-4 詳情頁點菜頁面開發(LeftBar 樣式和邏輯開發)
7-5 詳情頁點菜頁面開發(RightContent UI和樣式開發)
7-6 詳情頁點菜頁面開發(RightContent邏輯開發)
7-7 詳情頁點菜頁面開發(ShopBar UI和樣式開發)
7-8 詳情頁點菜頁面開發(ShopBar 邏輯開發)
7-9 詳情頁點菜頁面開發(ShopBar-chooseList 交互開發)(1)
7-10 詳情頁點菜頁面開發(ShopBar-chooseList 交互開發)(2)
7-11 詳情頁評論頁面開發(頂部Header開發)
7-12 詳情頁評論頁面開發(列表List 數據綁定)
7-13 詳情頁評論頁面開發(列表List UI開發)
7-14 詳情頁評論頁面開發(列表List樣式邏輯開發)
7-15 詳情頁商家頁面開發(UI開發)
7-16 詳情頁商家頁面開發(樣式開發)
第8章 美團APP—回顧與性能優化
通過nodejs和express實現后端數據的代理,通過設置cookie來實現對美團外賣真實數據的請求。對首面和詳情頁的tab加載邏輯進行懶加載和對之前的滾動加載邏輯優化,同時通過構建來完善頁面請求資源的優化。打包并發布到騰訊云。…
8-1 懶加載性能優化
8-2 JS和CSS公共文件抽離優化
8-3 編寫后臺server讀取真實數據
8-4 多Tab 頁切換與滾動數據加載優化
8-5 項目打包
8-6 項目發布
第9章 美團APP與hybrid深度結合
本章主要圍繞Hybrid進行講解,使用OC代碼帶領大家開發一個簡單的webview組件,同時講解web和native之間的通信機制,并開發jsbridge接口完善美團外賣項目,讓項目看起來更像是一個真正的APP。
9-1 JS bridge 原理
9-2 iOS webview + JS API接口+iOS APP集成
第10章 課程總結
回顧和總結課程講解內容,能更好的回歸和歸納。
10-1 課程總結