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