• 第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 課程總結

下載地址：百度網盤