Flutter個(gè)人開發(fā)項(xiàng)目架構(gòu)-2

前言

上一篇文章已經(jīng)搭建出基礎(chǔ)框架，之后我也利用空閑時(shí)間繼續(xù)優(yōu)化。此篇文章的主要方向還是圍繞provider搭建mvvm架構(gòu)糊饱，加入全局樣式管理、路由守衛(wèi)颠黎、websocket另锋、頁面demo，以及一些實(shí)戰(zhàn)中的小技巧盏缤。同時(shí)我也將項(xiàng)目上傳至GitHub：https://github.com/WxqKb/Basic-framework.git砰蠢，歡迎小伙伴一起討論蓖扑。

樣式管理：

這里提前說一下唉铜，真正項(xiàng)目實(shí)施，需要注意ThemeData的配置律杠，這個(gè)相當(dāng)于全局樣式的掛載潭流，后續(xù)在子頁面中可通過Theme.of(context).XXX去調(diào)用竞惋。

掛載Theme

任何一套UI設(shè)計(jì)都有其規(guī)則，將通用的樣式灰嫉，如文本顏色拆宛、大小等；將其歸類特別有必要讼撒，可以省去很多重復(fù)代碼浑厚，后續(xù)如果考慮換膚功能，那么整套UI的維護(hù)將會(huì)節(jié)省很多時(shí)間和精力根盒。這里沒有什么技術(shù)可言钳幅，但是作為前端我認(rèn)為需要養(yǎng)成這個(gè)習(xí)慣。

樣式管理

WebSocket通信：

webSocket現(xiàn)在在業(yè)務(wù)開發(fā)的應(yīng)用已經(jīng)是很廣泛了炎滞。Flutter通過web_socket_channel?package可以很方便的實(shí)現(xiàn)webSocket通信敢艰。

具體使用方法我就不再多說，官方文檔都有册赛，用起來也不難钠导。這里主要分享封裝的思想，首先是websocket_util森瘪，這里主要實(shí)現(xiàn)websocket的連接和訂閱消息處理回調(diào)牡属；此處完全作為一個(gè)工具類，不主動(dòng)做websocket的操作柜砾。

websocket-1

websocket-2

之后在communication_util中進(jìn)行websocket工具類的調(diào)用湃望，并啟動(dòng)定時(shí)器和ping pong輪詢，已防止websocket連接丟失痰驱；當(dāng)然也會(huì)對返回信息進(jìn)行處理证芭。輪詢需要后端做配合，每隔5秒發(fā)送一次ping給websocket服務(wù)器担映，接收到服務(wù)器返回的pong為正常通信废士；當(dāng)連續(xù)3次沒有接受到pong需要重連websocket。

實(shí)戰(zhàn)小技巧：

在18年尾剛接觸Flutter時(shí)蝇完，經(jīng)常被其紅色的出錯(cuò)頁面嚇到官硝，這種錯(cuò)誤相信大家都有見到。但到了線上版本短蜕，這種頁面肯定是不能出現(xiàn)的氢架。因此，我們需要通過自定義錯(cuò)誤頁面將紅色錯(cuò)誤控件在線上版本去除朋魔，并且將錯(cuò)誤收集上傳岖研。這里使用的是Zone來制定程序運(yùn)行的環(huán)境，可以收集錯(cuò)誤并上傳日志。

沙盒

寫在后面

這個(gè)項(xiàng)目其實(shí)主要還是我個(gè)人的學(xué)習(xí)項(xiàng)目孙援，后續(xù)我會(huì)繼續(xù)在這里學(xué)習(xí)編寫更多實(shí)用的功能害淤，比如下拉刷新，上拉加載拓售，音視頻demo窥摄，高德地圖等；這是GitHub鏈接础淤，僅供學(xué)習(xí)：https://github.com/WxqKb/Basic-framework.git

希望大家多多指導(dǎo)我崭放！

再會(huì)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者