技术栈
- 采用 uni-app 进行跨平台开发；
- 使用 Vue、Vuex 进行功能的实现；
- 基于 websocket 实现聊天功能；
- 使用 ColorUI、uViewUI 进行前端界面的还原和美化，并且把一些可复用的功能封装成组件以便复用；
- 使用 Git 进行版本控制；
- 使用 Eslint + Prettier 统一项目代码规范；
技术选型为什么选择 uni-app ? uni-app 对比其他跨平台框架 Taro、Flutter、React Native 有什么优势 ？
团队前端只有我 1 人，所以在框架的学习成本是我首先需要考虑的。因为 uni-app 易于上手，可快速落地迭代，达到多端复用、降低成本、提高效率。uni-app 对比其他平台，还有以下几点优势：
- 跨端方面 uni-app 更成熟，支持主流的所有平台
- 跨端灵活性更高，uni-app 是全面可条件编译的
- 开发体验 uni-app 要优于其他框架，uni-app 有自己的开发工具 HBuilderX ，HBuilderX 为uni-app做了很多优化，代码提示、转到定义、easycom、运行调试...故uni-app的开发效率、易用性非其他框架可及。
- 社区生态 uniapp 有专门的论坛，还有视频教程，QQ群微信群都活跃。uni-app官方发布了uni-ui库，还有个插件市场，里面轮子很多。对于国外的开发者，rn、flutter 的生态肯定比 uni-app 好，但对于国内的开发者，那是反过来的。
遇到的的问题
1. 如何实现单人聊天和多人聊天？
在用户登录后，通过调用 uni-app 的 API 建立起 websocket 连接，然后去监听消息的发送和接收，对聊天列表、总未读数做对应的变化，聊天列表、总未读数存储到本地，历史消息则通过后端接口加载。发送和接收的通知则通过注册全局事件总线来实现，结合 uni.$emit() 和 uni.$on()。在发送和接收消息与后端约定好字段用于区分单人聊天和私人聊天。
2. websocket 隔一会则会断开连接
加入心跳检测机制，每隔 5 秒发送一个心跳包，后端相应返回对应的数据包，用于持续连接 websocket。并且还加入重连机制，在用户的 websocket 异常断开连接或者没网的情况下，会每隔几秒尝试再次建立起 websocket 连接，保证代码的健壮性和稳定性。
3. 如何接入百度地图
因为使用 uni-app 开发的小程序, uni-app 官方的 map 组件不能满足现有项目的需求，所以引入百度地图的 jsapi 采用原生 js 开发 且通过 webview 进行渲染。「创建圈」使用 GL 版本地图结合地图案例实现了需求，但是在定位和 ios 兼容性方面仍有不足。「附近的圈」使用 v3.0 版本的点聚合，并结合了 art-template 模板引擎在各方面基本实现了需求，但是在性能方面表现不是很出色。
4. 如何对项目性能优化？
- 代码包体积优化
在初代版本，上线的代码包体积超过 1 M，然后通过条件编译、减少代码包的引入（如 lodash）、删除无关代码，成功将代码包体积维持在正常水平内。 - 减少网络请求
减少相关网络请求，将请求的数据进行本地缓存，如「附件的圈」中共有 4 屏内容，可左右滑动切换，每次都请求无疑增加网络消耗和影响用户体验，所以将每屏的数据都放入到缓存中，并且在「附近的圈」中提供了刷新功能，在数据更新不及时可手动刷新。在页面的切换中，能通过页面间传参则尽量通过传参以减少网络请求。 - 图片懒加载
对应项目中大多数图片都加入了懒加载，并且还加上 loading。
突出点
页面有大量可以复用的组件，如头像组件、关注列表、附近的圈，将这些组件独立封装以便复用。
