深大的树洞小程序版本迭代与优化记录

深大的树洞（以下简称树洞）是面向深大学生的一款小程序同学们可以在这里分享新鲜事吐槽生活中不爽搜索引擎吐槽生活中不爽诉说碰到的委屈。树洞也是自微信小程序公测以来上线较早的一批小程序上线之后获得了深大同学们的广泛好评 ...

深大的树洞（以下简称树洞）是面向深大学生的一款小程序同学们可以在这里分享新鲜事吐槽生活中不爽诉说碰到的委屈。

树洞也是自微信小程序公测以来上线较早的一批小程序上线之后获得了深大同学们的广泛好评平台也一直保持着较高的活跃度。

核心功能展示：

产品核心逻辑较为简单用户进入小程序之后在首页可以浏览用户已发布的内容支持点赞和评论用户同时能在底部TAB 栏进入消息页查看和回复相关评论信息。

点击屏幕右下角的悬浮按钮可以进入发布页面内容支持文字和配图并提供定位功能用户如果选择实名发布信息的话会获取用户的微信昵称和头像以供主页显示。

大概是今年的 2 月份当时小程序正式上线了自己用了一圈体验上总体来说还是比网页要出色一些。然后我也一直有开发一款树洞类应用的想法于是就着手开始做一款树洞小程序。

当时为了赶在 2.14 情人节上线整个开发周期基本就只有不到一周的时间包括前后端的开发十分的紧迫。1.0 的技术选型阶段后端采用 Node.js + MySQL 的架构而前端小程序方面为了使用 ES6 和 Less 进行开发seo 关键词优化为了使用 ES6 和 Less 进行开发选用了 Labrador 框架。

但是后来发现 Labrador 也有问题首先就是状态的绑定分为了 props 和 state 绑定的时候增加了复杂度其次就是对于组件的支持并不是特别的舒服没有 Vue 单文件来的好用。

下面就开始来讲 2.0 的整个开发过程。

后端没有推倒重来在 1.0 的基础上增加了 /v2 的后缀并且复用了一些 1.0 版本的 API。一方面是考虑到某些 API 的数据结构已经比较完善了而且暂时没有更好的设计；另一方面是考虑到这样可以节省一点开发的工作也可以兼容低版本。

对于数据的设计也没有推倒重来只添加了广告和通知两个数据库。

在 1.0 发布之后无意之间发现了 WePY 这个框架发现这个框架借鉴了 Vue 的单文件组件的开发模式而且一些 API 的使用也更加贴近原生的 Vue另外在框架层面也实现了数据的脏检查可以摒弃原生小程序的setData,于是决定采用 WePY。

考虑到 2.0 版本要加入评论回复的提醒那么如何展示通知就是一个大问题。原因是因为小程序没有提供跨出小程序通知的能力那么我们就只能在小程序内考虑通知的提示。

而在对后端的通知 API 设计的时候考虑了两种方案：

Websocket

轮询

Websocket 是基于 TCP 的全双工通信可以实现服务端推送信息微信的 Web 端也是采用 Websocket 来实现通信的而轮询则是客户端定时请求服务端来查询有无通知。

相比而言Websocket肯定是更优选择但是考虑到小程序入口在微信内部的聊天时一定要退出小程序并且很少人会使用小程序置顶的功能所以如果使用 Websocket 就需要经常重复建立 Websocket 连接。

并且考虑到很少有人会开着树洞等回复所以实时的通知对用户体验的提升不大于是我采用了轮询来实现这也是技术上比较简单的实现方式。

在开发通知页面的时候我还发现了一个问题就是微信小程序的 request API 还不支持 PATCH 请求便暂用 PUT请求作为替代。

通知方面由于通知只能在小程序内部进行显示。于是我打算使用 Tab 栏来提示随之而来的第二个问题就是小程序提供了一个展示 Tab 栏的能力但是只能自定义 icon 和文字并且只能在配置文件里配置等于说完全失去了对 Tab 栏编程能力于是我抛弃了原生的 Tab 实现使用 WePY 提供的组件系统自己实现了一个 Tab 栏。

最后的页面结构如下图所示：

标签： 开发树洞程序通知