前言

上一篇文章已经搭建出基础框架，之后我也利用空闲时间继续优化。此篇文章的主要方向还是围绕provider搭建mvvm架构，加入全局样式管理、路由守卫、websocket、页面demo，以及一些实战中的小技巧。同时我也将项目上传至GitHub：https://github.com/WxqKb/Basic-framework.git，欢迎小伙伴一起讨论。

样式管理：

这里提前说一下，真正项目实施，需要注意ThemeData的配置，这个相当于全局样式的挂载，后续在子页面中可通过Theme.of(context).XXX去调用。

挂载Theme

任何一套UI设计都有其规则，将通用的样式，如文本颜色、大小等；将其归类特别有必要，可以省去很多重复代码，后续如果考虑换肤功能，那么整套UI的维护将会节省很多时间和精力。这里没有什么技术可言，但是作为前端我认为需要养成这个习惯。

样式管理

WebSocket通信：

webSocket现在在业务开发的应用已经是很广泛了。Flutter通过web_socket_channel package可以很方便的实现webSocket通信。

具体使用方法我就不再多说，官方文档都有，用起来也不难。这里主要分享封装的思想，首先是websocket_util，这里主要实现websocket的连接和订阅消息处理回调；此处完全作为一个工具类，不主动做websocket的操作。

websocket-1

websocket-2

之后在communication_util中进行websocket工具类的调用，并启动定时器和ping pong轮询，已防止websocket连接丢失；当然也会对返回信息进行处理。轮询需要后端做配合，每隔5秒发送一次ping给websocket服务器，接收到服务器返回的pong为正常通信；当连续3次没有接受到pong需要重连websocket。