課程介紹
本項目從拿到設計圖開始，從頁面適配、到交互效果、再到數據渲染，一步步帶著大家搭建自己的移動端 React 移動端應用。 項目中，不只包含 React 單頁應用+移動端布局及常用交互實現+真實的前后端數據交互等知識講解，還包含很多常見問題解決方案，如：better-scroll 網速差的情況下異步請求圖片導致不能拖到底部問題、ios 下微信內置瀏覽器跨域請求不能攜帶cookie的問題處理、使用了 better-scroll 之后鏈接失效的問題處理、移動端輸入框被鍵盤遮擋的問題…
學習目標
學完本視頻后，可以掌握 基于react-router 的 React 單頁應用的項目構建，viewport+vw+rem 的移動端頁面適配，iconfont 圖標處理，React 功能組件編寫，better-scroll 基本使用，上滑加載功能的實現，用戶登錄及未登陸狀態下不同的業務邏輯處理…通過本次課程的學習，可以帶著大家可以快速上手 React 的 移動端數據應用開發，幫助大家打造自己的 React 移動端項目
適用人群（學前要求）：
1、掌握移動端布局及css3相關知識,熟悉移動端原生事件
2、掌握 React 基礎知識及npm使用
3、熟悉 ES6 最新語法
4、熟悉 Ajax 異步通信
第0集內容講解：課程介紹
1、介紹項目相關功能及交互
2、學前基礎介紹
3、課程說明
第1集內容講解：react的環境配置及項目視圖劃分
1、react 環境搭建
安裝：create – react – app（腳手架）
2、使用 React – router
安裝 react – router – dom（路由）
3、頁面視圖劃分
index ?/ work / message / login / course / lecturer
4、引入視圖文件
第2集內容講解：頁面適配方案及默認樣式初始
1、頁面的適配方案
默認樣式清除
2、viewport 視口
參數：
1）width
2）initial – scale
3）maximum – scale
4）user – scalable
3、相對單位適配
vw：100vw = 屏幕寬度
vh： 100vh = 屏幕高度
根節點字體大小：1rem = 1html的字體大小
4、默認樣式重置
第3集內容講解：header組件樣式
1、公共組件實現 – 頭部
2、公共組件實現 – 左側菜單按鈕
3、公共組件實現 – 右側 login 按鈕
4、公共組件實現 – logo 圖片
5、公共組件實現 – 返回按鈕
第4集內容講解：添加iconfont
1、圖標（fonticon）
圖標網站介紹：http://www.iconfont.cn/
2、圖標下載
菜單 / 登錄 / 推薦 / 返回 / 首頁 / 課程 / 講師 /
用戶名 ?/ 密碼 / 驗證碼 / 磚石 / 飛機 / 人物 / 推薦 / 留言
團隊 /消息 / 行政管理 / 電話
3、引入圖標字體文件
第5集內容講解：使用iconfont完善header組件
1、函數組件 – header組件
1、登錄圖標 – 引入類：iconfont
2、菜單圖標 – 引入類：iconfont
第6集內容講解：利用彈性盒模型的頁面架構和 footer 組件
1、類組件 – footer 組件
2、footer 布局實現
3、實現 footer 保持在屏幕最底部
1）彈性盒模型（怪異盒模型）：display：flex
2）flex – direction：column
第7集內容講解：主菜單布局
1、Menu 布局
link to 跳轉
首頁
課程安排
講師團隊
2、實現左側主菜單列表布局樣式
小圖標（首頁 / 課程 / 講師）
橫線（border）
第8集內容講解：幻燈片布局
1、幻燈片切換布局
Tab
Nav
2、require 引入
3、Tab 樣式設置
4、Nav 樣式設置
第9集內容講解：首頁布局
1、首頁結構
引入組件
2、背景圖引入
3、按鈕樣式設置
漸變 backgroud：linear-gradient( )
圓角 border-radius
陰影 box-shadow
4、立即報名 結構
引入 函數式組件 – vip
5、設置不同屏幕尺寸（xs – sm – md – lg）的樣式
第10集內容講解：利用彈性盒模型的上下居中設置
1、妙味特色布局
函數式組件 – Miaov
2、左側字體圖標
鉆石 \ 頭像 \ 作品展示
背景、寬高、圓角：border:radius 、圖標顏色
最小高度：min-height
3、樣式設置
字體大小、行高、顏色、邊距、text-align：center
垂直居中：display：flex
第11集內容講解：利用網格布局的作品列表
1、學員作品結構（網格布局 ）
類式組件 – worklist
display:grid（定義網格布局）
grid-template-columns（定義網格中的列）
網格大小（fr）
2、樣式設置
背景色 \ 邊距 \ 字體大小 \ 行高 \ 字體顏色
背景 \ 漸變 \ 最大寬度
3、loadMore（正在加載更多內容）
loding 圖
第12集內容講解：課程頁面視圖完善
1、課程頁面結構
圖片引入
表單
2、樣式設置
背景延伸
默認樣式清除（table \ td \ th）
第13集內容講解：可以通用不同結構的功能組件制作
1、講師團隊 結構
標題
講師頭像
講師名稱
切換tab
2、樣式設置
3、通用組件實現
功能相似、結構不一樣
不同結構的功能組件制作
第14集內容講解：完善講師頁面幻燈片結構
1、講師頁面幻燈片結構
講師頭像 / 講師名稱 列表實現
id / name / img
2、樣式設置
nav 位置
3、結構當成參數傳進來
第15集內容講解：為頁面鏈接添加觸碰效果
1、加入我們（join-us）
函數式組件 JoinUs
2、加入我們結構
a 鏈接跳轉
圖標（課程顧問圖標 ?\ 問答圖標 \ 客服圖標 \ 行政前臺圖標 ）
3、樣式設置
默認樣式清除
字體顏色：半透明
背景 \ 邊距 \ 背景位置設置
字體大小 \ 行高
4、active 按下的樣式設置
設置 a 標簽默認樣式
5、引入組件
job.js
第16集內容講解：使用dangerouslySetInnerHTML添加作品詳情
1、作品詳情結構
縮略輪播圖
標題
內容
2、dangerouslySetInnerHTML
添加作品詳情的內容
3、內容詳情
背景色設置
第17集內容講解：完善作品詳情頁面
1、點贊
狀態：未點贊 / isGood （已經點贊）
點贊動畫特效：transition：-1s cubic-bezier( )
2、留言評論
類組件 – 留言列表（MessageList）
留言列表狀態
沒有留言狀態
3、最底部加載
4、回復本貼按鈕
圖標
文字
第18集內容講解：留言頁面
1、留言頁面 – message
頭部 – Header
返回 – back
輸入文本框 – textarea
默認樣式清除
寬高 / 邊框 / 字體 / 行高 / 字體大小
box – sizing：border – box
提交按鈕
第19集內容講解：登陸界面的3D卡片布局
1、登錄界面 – Login
頭部 – Header
返回 – back
背景圖 – loginPage
登錄 / 注冊標題 – loginTitle
2、登錄（login – form）\ 注冊（register – form）
prespective（景深）
transfrom-style:preserve-3d（父級進行3d變換時，保留子元素的3d變換）
隱藏背面（backface – visibility:hidden）
第20集內容講解：完善登陸界面布局
1、立即登錄頁面（LoginForm）
圖標
描述文字
用戶名：
密碼：
驗證碼：線上地址
立即登錄按鈕：
沒有賬號按鈕
2、立即注冊頁面（RegisterForm）
調整頁面樣式
第21集內容講解：利用children屬性，制作可以通過各種結構的menu交互組件
1、分析菜單的展開收縮功能
類組件 – MenuPage
2、引入
header
menu
3、傳遞結構
第22集內容講解：添加菜單動畫
1、點擊菜單按鈕 – 執行chageOpen
2、onTouchEnd（按下抬起）
3、點擊展開 – 點擊收縮過渡動畫
transition
transfrom
4、onTouchStart
處理橫向滾動條
全局阻止默認事件
第23集內容講解：跳出React阻止默認事件的深坑完善菜單動畫
1、介紹不允許阻止默認事件原因
2、講解阻止默認事件
3、阻止默認事件處理，禁止頁面滑動
componentDidMout
view.addEventListener
4、阻止事件冒泡
第24集內容講解：阻止了默認事件之后，超鏈接跳轉的處理
1、點擊菜單，a標簽跳轉
menuA / headerA
首頁/課程安排/講師團隊
2、介紹通過路由自帶方法
push
3、講解原生 js 的方法
添加事件：touchend
修改 widdow.location.href
通過判斷 排除 href 為空的 a 標簽
4、添加 touchmove 事件
判斷是否發生滑動
按下 a 標簽跳轉
滑動 a 標簽不跳轉
5、bug介紹：在部分安卓手機下，手指觸碰屏幕時，如果觸碰面積不大，
會誤觸 touthmove 事件
講解解決 bug 方法
第25集內容講解：幻燈片動畫制作_1
1、幻燈片動畫制作 – tab組件
React 生命周期 – Mounting 掛載階段
componentDidMount
2、給 tab 加上點擊事件
tab.addEventListener
touchstart / touchmove / touchend
3、手指按下的位置（startPoint）：
x：e.changedTouchhes[0].pageX
y：e.changedTouchhes[0].pageY
4、手指滑動的位置（nowPoint）
x：nowPoint.x – startPoint.x
y：nowPoint.y – startPoint.y
5、當用戶滑動距離超過100px 時，用戶需要進行切換
第26集內容講解：幻燈片添加無縫處理
1、添加動畫
picList.style.transition
2、添加無縫
picList.innerHTML += picList.innerHTML
picList.style.width=picList.length + “00vw”
3、第0張和最后一張，劃出邊界的風險的處理辦法
第27集內容講解：判斷滑動方向修復滑動時幻燈片的抖動
1、處理左右滑動帶動上下滑動問題
當前是否按照我想要的方向進行滑動
判斷用戶的滑動方向
2、每次第一次滑動，當判斷出方向后，不再重復判斷方向
isFirst && Math.abs(dis.x – dis.y)>2
第28集內容講解：完善幻燈片的制作添加自動輪播
1、幻燈片導航同步
setNav
2、幻燈片自動播放
autoplay
3、下一張
toNext
4、定時器
timer
無縫自動播放
延遲時間：setTimeout
清除定時器：clearInterval
第29集內容講解：登陸和注冊界面的受控組件制作
1、分析登錄注冊的功能
界面切換
受控組件
驗證碼切換
2、登錄接口
/ user/login
POST:
verify:驗證碼
username:用戶名
passwore:密碼
添加受控組件
username / passwore / verify
3、登錄接口
/ user/login
POST:
verify:驗證碼
username:用戶名
passwore:密碼
repassword:確認密碼
添加受控組件
username / passwore / verify / repassword
第30集內容講解：完善登陸注冊界面的3D翻頁和驗證碼交互
1、3D翻頁
changeDeg
2、傳遞方法
loginFrom
registerForm
3、點擊立即登錄 / 立即注冊切換動畫
4、驗證碼（verify）交互
verifyimg:
點擊驗證碼，切換
驗證碼輸入框獲取焦點時，生成驗證碼（onFocus）
第31集內容講解：實現注冊功能
1、域名地址：https:www.koocv.com/
注冊地址：/ user/register
異步通信：mpn i axios (請求方式）
提交地址：https:www.koocv.com/user/register
提交方式：POST
2、提交信息：
verify；
username；
passwore；
repassword
3、axios
qs.stringify 把對象轉換成 URL
4、跨域請求
withCredertials 攜帶cookie
5、返回值
code:0 ?msg:注冊成功
code:1 ?msg:驗證碼錯誤
code:2 ?msg:密碼和重復密碼不一致
code:3（注冊失敗） ?msg:提示不同的注冊失敗原因
code:4 ?msg:注冊已關閉（后臺可控制）
6、注冊成功，返回用戶登錄界面
第32集內容講解：對接登陸接口實現登陸功能
1、引入axios和qs
2、登錄地址：/ user/login
3、提交地址：https:www.koocv.com/user/login
4、返回值
code:0 ?msg:登錄成功
code:1 ?msg:驗證碼錯誤
code:2（登錄失敗） ?msg:提示不同的登錄失敗原因
5、登錄成功 – 返回原頁面
window.history.back（返回上一頁）
window.location.href=”/”
第33集內容講解：獲取用戶登錄狀態
1、用戶登錄和未登錄狀態不同邏輯處理
獲取用戶是否登錄
定義方法：getLoginState
2、是否登錄接口
/user/islogin
3、axios.post
https:www.koocv.com/user/islogin
4、組件更新
重新請求用戶名
React 生命周期
更新階段：componentDidUpdate
第34集內容講解：利用context把登陸狀態傳遞給各個子組件
1、獲取登錄的狀態，不停執行更新，處理死循環問題
2、跨組件通信 （context）
chidContextTypes
prop-types
getchidContext
ContextTypes
第35集內容講解：登陸和未登錄狀態不同的邏輯處理
1、實現用戶已經登錄，不用進入login界面
2、React 重定向
Redirect
3、登陸和未登錄狀態切換
登錄：顯示用戶名
未登錄：顯示登錄按鈕圖標
4、跳轉回復本帖頁面，不顯示login
第36集內容講解：作品列表數據獲取
1、上滑加載 – 通用組件
類組件 – loadMore
傳遞結構
children
2、首頁獲取的數據傳遞內容
order：desc（降序） / asc（升序）
sort：
sort（后臺指定排序）
id（加入的ID）
update_time（修改時間）
category_id：1 和 2 ?1代表作品列表 / ?2代表講師列表
recommend：首頁推薦位置，首頁推薦值為1，全部為0
3、作品列表數據獲取
第37集內容講解：上滑加載更多內容-1
1、數據添加至結構
數據結構：數組
數組內容：
id（唯一）
category_id
item.title（標題）
item.good（點贊個數）
item.message（留言個數）
item.icon（圖片）
2、上滑加載更多
loading
加載顯示更多內容
loadEnd
加載完成，不顯示加載圖標
顯示：這里是底線了
第38集內容講解：上滑加載更多內容-2
1、獲取滾動條的位置
y = window.scrollY
屏幕高度winH：clientHeight
頁面高度pageH：scrollHeight
2、頁面可滑動最大高度maxY=頁面高度pageH – 屏幕高度winH
3、頁面滑動快到底部時請求新的數據
第39集內容講解：為各個視圖添加菜單交互
1、各個視圖添加菜單交互
MenuPage 菜單頁面的交互
課程安排
course-page
講師團隊
lecture-page
學員作品
work-page
2、React 生命周期 Unmounting 卸載階段
componentWillUnmount
卸載事件：window.removeEventListener
第40集內容講解：獲取講師列表數據
1、引入請求數據 ?– axios / qs
order:”desc”
sort:”id”
category_id:2
2、組件加載
componentDidMount( )
3、妙味團隊 列表數據獲取
4、妙味團隊 Tab切換功能
getTab 方法
第41集內容講解：講師頁面彈窗結構
1、引入Popup
2、講解彈窗結構（popup）
全屏半透明
頭像
標題
關閉按鈕
內容區域
內容超出滾動條
第42集內容講解：子滾動條滾動帶動父級滾動條滾動的問題解決
1、滾動條問題處理
簡單 demo 展示滾動條 bug
2、解決方案1
布局解決方案：不使用系統滾動條，使用原生滾動條
弊端：原生滾動條在滾動會有下拉回彈或者內容背景菜單顯示
第43集內容講解：better-scroll的使用說明
1、解決滑屏問題的利器
better-scroll
2、引入 bscroll.js 文件
3、生成布局
4、添加滾動
startY（左右滑動）
scrollY（上下滑動）
freescroll（左右上下滑動）
bounce（回彈動畫）
refresh方法
第44集內容講解：添加better-scroll
1、項目引入 better-scroll
npm i better-scroll -s
2、首頁滾動調整
PageScroll
3、是否阻止瀏覽器默認行為
preventDefault
preventDefaultException
tagName
第45集內容講解：better-scroll阻止默認事件后，導致的鏈接不可用問題解決
1、問題 – a 標簽點擊失效 （部分）
2、解決方案
獲取所有 a 標簽
循環判斷給 a 標簽加點擊事件
第46集內容講解：利用better-scroll完善上拉加載的效果
1、上拉加載
pullUpLoad：ture / false（是否需要）
threshold：配置開始加載的時機，距離底部多久開始加載
2、已經加載
finishPullUp
3、動態關閉上拉加載
closePullUp
4、學員作品跳轉失效
事件代理/事件委托方法
第47集內容講解：完善教師彈窗
1、彈窗添加
openPopup
2、點擊顯示彈窗
popupPage
onTouchStart
onTouchEnd
getPopupDate
第48集內容講解：為講師彈窗添加滑動
1、綁定數據
data.icon
data.title
data.content
2、添加滾動條
overflow-y：hidden
3、講師介紹彈窗關閉
clossPopup
點擊空白區域彈窗關閉
點擊關閉按鈕彈窗關閉
4、添加滑動
componentDidMount
new BScroll
bounce：false（取消回彈）
第49集內容講解：合并菜單和滑屏組件
1、給各個界面加上滑屏
2、合并菜單和滑屏組件
引入組件：PageScroll
3、學員作品點擊失效
第50集內容講解：添加詳情頁的loading動畫
1、添加學員作品詳情頁跳轉id ：item.id
2、loading動畫
Loading
3、CSS3動畫
animation
4、判斷數據是否拿到數據
是：直接加載數據
否：Loading狀態
第51集內容講解：文章詳情頁面的數據獲取及better-scroll在差網速下的bug修復
1、學員作品詳情頁數據添加
getWordData
url
qs.stringify
article_id
data
data.iamge_path
data.title
data.content
data.good
2、refresh方法
當DOM內容更新，重新計算better-scroll
第52集內容講解：點贊功能-1
1、判斷是否點贊
data.good
狀態：isgood
getIsGood
2、是否點贊接口
lecturer/getgood
3、POST參數
article_id:文章id
4、返回值
code：0 ?（點贊）
code:1（mag:未登錄）
code:2（mag:收藏文章id不能為空）
code:3（mag:未點贊）
第53集內容講解：點贊功能-2
1、點贊功能分析
已經點贊：取消點贊
沒有點贊：開始點贊
2、判斷是否登錄
接口：user / islogin
返回值：code：0 / code：1
未登錄：實現跳轉 login 界面
已登錄：實現點贊或者取消點贊
第54集內容講解：點贊功能-3
1、判斷是否點贊
判斷 res.data.code 的值
code：1（點贊）/ code：3（未點贊）
2、點贊 / 點贊數
good 的值
3、取消點贊
接口：lecturer/cancelgood？
POST參數：
goodid：在獲取是否點贊接口中獲取到的id
article_id：文章id
返回值：
code:0（mag:取消點贊成功）
code:1（mag:未登錄）
code:2（mag:文章id不能為空）
code:3（mag:收藏id不能為空）
4、點贊和未點贊切換動畫
5、解決用戶快速點擊重復提交問題
6、總結點贊功能實現過程
第55集內容講解：獲取留言列表
1、留言列表接口
lecturer/getconment？page=1&rows=20
2、留言列表
MessageList
3、留言狀態：
有留言 ：顯示留言
沒留言 ：搶沙發
第56集內容講解：提交留言
1、留言評論
接口：lecturer/addconment
POST參數：
article_id：文章id
content：評論內容
2、提交留言
postMessage
axios.post
withCredentials：true
3、返回值
彈窗：判斷code 的值，code等于 0（評論成功）
第57集內容講解：細節修復
1、a 按下的效果失效修復
active
2、事件代理，判斷是點擊行為還是滑屏修復
3、學員作品有時候刷不到底部修復
第58集內容講解：安卓下真機測試-修復首頁布局
1、真機測試 – （堅果pro手機）自帶瀏覽器
2、解決學員作品圖片撐開整行 bug
3、真機上逐個測試相關功能
第59集內容講解：iOS真機測試–vh問題處理
1、測試：iphone6 ?ios 11.3系統版本，微信內置瀏覽器測試
2、測試功能：
1）登錄
2）菜單
3）上滑加載
4）左右滑屏
5）課程安排
6）講師團隊
7）講師彈窗及彈窗滑屏
8）學員作品詳情
9）點贊
3、修復登錄界面的問題
登錄界面 – 底部白邊
登錄界面 – 頂部被蓋住
4、頁面最底部 – 未顯示完整問題處理
vh問題處理
動態獲取可視區高度：window.innerHeight
第60集內容講解：IOS下微信內置瀏覽器跨域請求不攜帶cookie處理
1、修復驗證碼輸入錯誤后，再次輸入正確的驗證碼登錄不成功bug
2、proxy 代理服務器講解
轉發
請求重定向
3、替換請求地址
第61集內容講解：軟鍵盤遮擋輸入框處理思路
1、修復軟鍵盤遮擋輸入框問題
2、獲取軟鍵盤本身高度
3、獲取鼠標聚焦坐標（input坐標）
初始坐標
當前坐標
4、計算輸入框移動距離
5、修改頁面的top值
