uni-app商業級應用實戰 一次搞定小程序/安卓/iOS/H5
??終極跨平臺多端解決方案 Uni-App 開發商業級應用。
? ?? ???
? ?? ???01: I* p* K& [) L& e$ N. N’ b2 n
? ?? ???導學
? ?? ???導學(12分鐘)
? ?? ???學前必看！補充課：接口調用參數補充(6分鐘)” @( a: L; `1 C( n( B. W+ n
? ?? ???【資料】基礎框架NextHelloWorld(rar，513.7KB)) m, r! Q2 y; k” n+ H. a& F0 m
? ?? ???【資料】超英預告最新源碼(rar，8.7MB)
? ?? ???【資料】linux工具與ngxin安裝(rar，37.3MB)
? ?? ???【資料】logo素材制作(rar，730.3KB)
? ?? ???02
? ?? ???課程介紹
? ?? ???什么是 uni-app(4分鐘)
? ?? ???為什么要使用 uni-app(8分鐘)
? ?? ???app多端發布效果展示(7分鐘)1 X$ H1 O9 k; w% [+ w% g2 [
? ?? ???使用HbuilderX在ios、安卓、H5進行真機調試(14分鐘)
? ?? ???微信、支付寶小程序開發工具調試(7分鐘)& u??p- W! m& J# w8 l/ Y” w* }
? ?? ???在Mac上使用Simulator進行調試(5分鐘); o! G2 {$ Q$ q” G# [$ q9 X
? ?? ???03: b7 y/ d/ C, N# A% w8 J7 l
? ?? ???框架基礎-上. y* t2 w. V. ?( ?4 ]
? ?? ???簡述MVC模式(9分鐘)
? ?? ???圖說MVVM模式(5分鐘)0 \” l8 [( _1 c0 t??N& V! E
? ?? ???通過代碼闡述MVVM與雙向綁定(12分鐘)
? ?? ???JSON對象和數組的渲染(4分鐘)7 S4 H- h# @3 |8 @! H+ q??}# |
? ?? ???頁面路由以及標題配置(11分鐘)
? ?? ???宏觀講解項目配置文件(16分鐘)
? ?? ???應用的生命周期(11分鐘)1 W7 I” S, f* |4 U, ?
? ?? ???頁面的生命周期(14分鐘)8 y+ x5 z; x??e2 o5 t7 |; M- }& B
? ?? ???固定像素px與響應式像素upx(12分鐘)
? ?? ???在頁面里使用{{}}表達式(7分鐘). O4 U: X+ U& s5 `
? ?? ???04/ M1 f0 i5 X; G8 ???K7 o
? ?? ???框架基礎-下2 v% r: B2 B7 B’ U2 [8 b??]
? ?? ???v-bind指令對屬性的數據綁定(7分鐘)
? ?? ???事件基礎(22分鐘)$ E/ `/ x( L8 H2 o
? ?? ???條件渲染 v-if與v-show(7分鐘)
? ?? ???條件渲染 三元運算(4分鐘)
? ?? ???列表渲染v-for的使用(13分鐘)/ D. i’ ?- W3 l- f: l! z??s3 j& ^
? ?? ???指令key實現for循環的組件唯一性(12分鐘)6 I6 K6 ?+ B0 p7 b
? ?? ???嵌套循環的下標定義(4分鐘)& B. p” n- C1 s$ E1 ^
? ?? ???條件編譯 – 上(10分鐘)7 c4 k6 K% B) a7 Y( \- P1 Y
? ?? ???條件編譯 – 下(7分鐘)
? ?? ???05# X6 }??Z, a& ]. L
? ?? ???樣式與flex布局-上
? ?? ???flex布局介紹與模型(8分鐘)1 B5 i; q% _& \
? ?? ???flex-direction 元素的排列4種方向(10分鐘)1 ~% @0 E” N: }0 f2 ~& A1 r2 H
? ?? ???導入外部css樣式(4分鐘)4 M: ~0 m+ b. [& f
? ?? ???flex-wrap 元素的換行(12分鐘)
? ?? ???justify-content 元素在主軸的對齊方式(14分鐘)
? ?? ???align-items 元素在交叉軸的對齊方式(12分鐘)
? ?? ???06; y7 h9 W* D6 n! `7 P9 C” S% ^
? ?? ???樣式與flex布局-下
? ?? ???align-content 多軸線的對齊方式(13分鐘)8 V: |0 u9 L: I$ F
? ?? ???flex成員項的屬性 – order(4分鐘)
? ?? ???flex成員項的屬性 – flex-grow(4分鐘)& B% `& `* ~) d9 D; f! I0 T
? ?? ???flex成員項的屬性 – flex-shrink(6分鐘). J0 S8 ?4 O* g6 F/ g
? ?? ???flex成員項的屬性 – flex-basis(4分鐘)
? ?? ???flex成員項的屬性 – align-self(6分鐘): f2 V; N6 a+ u0 [: g
? ?? ???07
? ?? ???開發首頁-上
? ?? ???創建項目，構建基礎頁面(8分鐘)?& t7 \% c* c??i3 n
? ?? ???構建tabbar(13分鐘)
? ?? ???設置全局page，簡述view組件(6分鐘)
? ?? ???使用輪播圖組件(11分鐘)
? ?? ???禁用原生導航欄達到頁面全屏化(6分鐘)?; i’ P( r1 Z8 {7 |
? ?? ???在線文檔的使用(8分鐘)?, V0 K” j6 T* Y/ Z8 P9 ^
? ?? ???request網絡請求api講解(5分鐘)9 W1 N’ C9 q’ j’ g+ s. ~
? ?? ???uni.request動態獲得輪播圖數據(9分鐘)
? ?? ???箭頭函數 this 作用域(4分鐘)
? ?? ???渲染并且展示輪播圖(5分鐘)
? ?? ???08
? ?? ???開發首頁-中
? ?? ???引入組件實現全局變量(7分鐘)/ ~5 ^2 R& m$ W, U3 I2 x
? ?? ???使用掛載實現全局變量(4分鐘)– y/ L/ V: m0 \; }+ r0 U
? ?? ???在手機端進行微信小程序真機預覽(6分鐘)
? ?? ???微信小程序https使用事項(7分鐘)+ K, l4 H$ j* Q” p4 m
? ?? ???開發熱門超英 – 標題(9分鐘)– o: ^8 x! I( |! l# W
? ?? ???開發熱門超英 – 簡述scroll-view(4分鐘)0 H- M( z; T* O” @* H
? ?? ???開發熱門超英-使用scroll-view實現橫向滾動(3分鐘)/ c4 s??j6 z+ e/ @+ }& o# V” R
? ?? ???開發熱門超英 – 海報與標題(8分鐘)
? ?? ???開發熱門超英 – 評分(6分鐘)
? ?? ???開發熱門超英 – 動態渲染數據(8分鐘)
? ?? ???09
? ?? ???開發首頁-下
? ?? ???開發自定義組件(7分鐘)
? ?? ???父組件向自定義組件傳入值(6分鐘)8 F3 Y# A; @6 O5 B$ \. h
? ?? ???完成評分自定義組件(22分鐘)
? ?? ???視頻組件video講解(9分鐘)
? ?? ???獲取預告片數據(3分鐘)
? ?? ???動態渲染預告片(10分鐘)
? ?? ???猜你喜歡 – flex布局嵌套編寫(18分鐘)
? ?? ???猜你喜歡 – 編寫點贊css(7分鐘)# j’ j- K’ K” b, H/ A
? ?? ???猜你喜歡 – 實現點贊動畫效果(14分鐘)
? ?? ???猜你喜歡 – 還原動畫(5分鐘)7 v$ n/ Q& ^) J- f
? ?? ???10+ W+ O+ h( R( Z
? ?? ???開發首頁-終
? ?? ???猜你喜歡 – 動態渲染列表(6分鐘)
? ?? ???猜你喜歡 – 實現動畫數組(7分鐘)$ o) a9 ]/ Z: p
? ?? ???猜你喜歡 – 條件編譯解決動畫跨端兼容問題(4分鐘)3 h8 T( j- H6 b( J. m. @’ x
? ?? ???猜你喜歡 – 開啟下拉刷新(5分鐘)
? ?? ???猜你喜歡 – loading交互api(8分鐘), @; d( u7 [* Y3 p
? ?? ???11
? ?? ???構建搜索頁-上
? ?? ???搜索頁面 – 編寫搜索欄(19分鐘)% e) C# |( i. i1 |8 }
? ?? ???搜索頁面 – 編寫預告片列表、搜索欄置頂(9分鐘)
? ?? ???搜索頁面 – 動態獲取最新預告并且渲染(9分鐘)
? ?? ???搜索頁面 – 分頁接口api講解(4分鐘)
? ?? ???搜索頁面 – 搜索前置準備(6分鐘)
? ?? ???搜索頁面 – 執行搜索動態渲染(8分鐘). g) s, i- S& g( }! S# a7 C3 C3 d, @& a
? ?? ???搜索頁面 – 監聽下拉實現分頁功能(8分鐘)
? ?? ???頁面路由api與傳參(13分鐘)5 w6 N5 S+ Q) ^$ X5 q: j1 q
? ?? ???頁面跳轉組件的使用(7分鐘)2 `0 j# b& ?6 y( `7 u$ \, _% O
? ?? ???詳情頁 – 查詢詳情與視頻渲染(8分鐘)??m# P: l9 L2 |! |! l
? ?? ???12
? ?? ???構建搜索頁-下
? ?? ???構建預告片基本信息(16分鐘)” ~9 {8 g6 B* j& N6 d1 z! g6 \
? ?? ???構建評分快與陰影效果(15分鐘)‘ F” y/ V& x# R5 P
? ?? ???解決錯誤數據綁定undefined(5分鐘)
? ?? ???編寫分割線以及劇情介紹(8分鐘)4 \6 z; U& d- I3 K4 H* x??X5 v. k
? ?? ???構建劇照與演職人員數據列表(10分鐘)
? ?? ???渲染劇照列表(8分鐘)% M) X, d( P6 N, ^” O/ O3 w( r
? ?? ???雙拼數組構建演職人員列表(12分鐘)
? ?? ???漸進式導航欄設置(6分鐘)) h1 ~& P8 }# `) X; b??T6 W’ r/ A
? ?? ???通過預覽api實現劇照預覽(7分鐘)
? ?? ???演職人員數組拼接預覽(8分鐘)
? ?? ???139 s6 g: u; v9 G& S5 |, H
? ?? ???電影詳情頁構建‘ ?5 T, N5 G9 B# \+ V( O
? ?? ???自定義預覽封面圖(13分鐘)
? ?? ???actionSheet接口api使用(6分鐘)8 ^, m% q9 g3 G??|
? ?? ???下載以及保存圖片(15分鐘)
? ?? ???配置https下載合法域名(5分鐘)+ \/ h9 n: h” `??b: Y
? ?? ???實現小程序中的分享轉發功能(9分鐘)+ }& R+ Y5 d1 e0 w2 n, b: T
? ?? ???自定義導航欄按鈕(11分鐘): V! a+ ~; T$ Z$ K6 I
? ?? ???分享到朋友圈(9分鐘)??B) h3 W/ i??n% ~1 @* O
? ?? ???微信開放平臺簡單介紹(6分鐘)
? ?? ???操作視頻對象，提高用戶體驗(8分鐘)7 ^* L5 L5 |??U9 }’ u9 x
? ?? ???優化首頁視頻體驗(13分鐘)
? ?? ???141 ^1 v# ?( M/ F, {% i, L+ V2 v
? ?? ???我的頁面（上）
? ?? ???開發個人頁面-header與導航欄設置(9分鐘)
? ?? ???發個人頁面-用戶未登錄和已登錄的頁面展示(9分鐘)2 @( [; G$ X??i3 h1 N
? ?? ???構建注冊登錄頁面(8分鐘); \’ Z) O# \??|- Z! g# x. \# R
? ?? ???button與form組件講解(6分鐘)
? ?? ???實現一鍵注冊登錄(12分鐘)# ]1 i9 @& U, z3 a
? ?? ???通過緩存切換是否登錄狀態(9分鐘): O6 m: O- L+ D# k5 w6 S# }
? ?? ???構建用戶賬號頁面(9分鐘)) x) i’ G; k5 y” m4 D
? ?? ???清理所有緩存api(4分鐘)
? ?? ???用戶登錄錯誤提示與方法掛載(7分鐘)$ u$ ?! \’ O1 P, s) i6 Q. |
? ?? ???渲染用戶信息數據(6分鐘)
? ?? ???15
? ?? ???我的頁面（中）1 |, y4 g( U* A
? ?? ???用戶退出登錄(6分鐘)” B4 z’ U! R- V/ _5 R
? ?? ???第三方登錄講解與頁面構建(16分鐘)+ o% {$ m% I* k1 C- ^9 r5 F6 D6 Q: J
? ?? ???第三方登錄-小程序端實現微信登錄(15分鐘)
? ?? ???第三方登錄-后端登錄業務梳理（輔助理解）(10分鐘)
? ?? ???第三方登錄-app端授權登錄(8分鐘)
? ?? ???第三方登錄-app端獲取用戶唯一id及信息(12分鐘)6 E1 v” P% n+ W7 `4 e# P
? ?? ???第三方登錄-app端執行一鍵注冊登錄(7分鐘)
? ?? ???查看預覽用戶頭像(7分鐘)
? ?? ???選擇用戶頭像(11分鐘)! s6 h: k) d4 V4 m” S. \/ ~
? ?? ???重新選擇頭像(3分鐘)3 ~4 h6 d; h2 K/ ^5 A$ k1 Z
? ?? ???16; |9 d# U! e- M0 X2 t
? ?? ???我的頁面（下）
? ?? ???文件上傳api與后端接口講解(5分鐘)
? ?? ???token令牌講解、實現頭像上傳(23分鐘)
? ?? ???引入圖片剪裁實現頭像上傳(7分鐘)% z1 J6 [( d3 o1 v* u$ A! K) n
? ?? ???用戶修改昵稱(18分鐘)
? ?? ???用戶修改生日(17分鐘)+ ^% S9 f, B& q
? ?? ???用戶修改性別(15分鐘)& l8 U: s’ U1 M, Z
? ?? ???173 q# f( j7 n4 l$ Y’ s$ Z/ g
? ?? ???項目發布與上線
? ?? ???打包H5 web應用(5分鐘)
? ?? ???購買云服務與簡介(6分鐘)‘ o6 u& }& Y# X& u+ ~
? ?? ???配置安全組，重置密碼，上傳nginx，配置ssh(14分鐘)
? ?? ???安裝nginx(9分鐘): B* {2 c4 K1 U
? ?? ???成功發布H5端web應用(14分鐘)$ @( a” ^- Y3 M3 B% H5 J
? ?? ???微信小程序上傳審核流程講解(8分鐘)
? ?? ???打包安卓apk(8分鐘)
? ?? ???簡述ios打包(8分鐘)5 g1 g0 d$ l” W2 p% p
? ?? ???18
? ?? ???課程總結??P% I/ x$ `- p: w- g’ p1 P
? ?? ???課程總結與展望(9分鐘)
