移動WebAPP開發之實戰美團外賣視訊教程
第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 課程總結
下載地址：百度網盤下載