前言 · 一些话

Hello~ 我是不干人事的 Tanger,首先欢迎你阅读我的文章 😀,也很期待各位大佬的指正。如果对这篇文章感兴趣的话,不妨收藏一下 ⭐ 本页面。

如果有什么想对作者说的话可以通过以下两种方式联系我:

  • 简单粗暴法:直接在下方的评论区留言 🎈(这种方式可能作者回复较慢)
  • 花里胡哨法:发送邮件至作者邮箱:1907065810@qq.com,我会在第一时间回复你 ✨

关于 · 开始吹水 >>>

在 2021 年 1 月底的时候,我接到了学院安排的“大学生创新创业”项目任务(非常感谢学院给我这次机会)。上一个团队完成了项目文档部分(初稿不是我写的 😂),而我接手的则是要把名为「UP 体能训练」的 APP 开发出来。

起初,项目设想是开发一个完整的 APP,但习总 🤔 思来想去后认为外包开发不仅费用高,后期维护还麻烦,干脆我们自己做。他在基地的成果展示中注意到了我之前做的小程序(虽然很烂 😭),于是我们一拍即合。

我们确定了以下开发方向:

  • 前端部分:使用微信小程序作为平台
  • 后端部分:找一个靠谱的后端协助(后来找到了 yww)
  • 资源部分:收集健身视频、相关图片
  • 功能实现部分:参考之前的项目申报书、答辩 PPT 等资料

后端手 yww 的加盟

yww 是我们基地算法部的部长,也是我的部长 😂。他虽然表面是“玩公主连结的宅男”,但真接触后发现他是个靠谱的技术宅,接口响应稳定,代码质量也不错。

于是我们组成了双人小队,开始前端 + 后端的开发流程。

我首先写了登录界面,打算通过账号密码传给后端比对认证。但 yww 认为不够严谨,建议我采用微信小程序标准的 openid 鉴权方式


登录模块的开发思路与实现

登录流程图(来自微信官方文档)

微信的登录推荐如下流程:

  1. 使用 wx.login() 获取临时登录凭证 code;
  2. 前端将 code 传给后端;
  3. 后端调用 auth.code2Session 接口,获取 openid 和 session_key;
  4. 将 openid 存储,完成用户身份绑定。

实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
handleGetUserInfo(e) {
wx.login({
success(res) {
wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session',
data: {
appid: '你的APPID',
secret: '你的secret',
js_code: res.code,
grant_type: 'authorization_code'
},
method: 'GET',
success: function (res) {
const openId = res.data.openid;
wx.setStorage({
key: 'openid',
data: openId
});
console.log(openId);
// TODO: 与后端对接逻辑
}
});
}
});
}

实际开发中的前后端问题

完成登录模块之后,我们遇到了很多预料之外的问题,其中最大的问题是:前后端认知存在偏差,具体如下:

矛盾的根源:

  • 不了解彼此的逻辑层面:前端传的参数后端接不住,后端要的数据前端没法提供。
  • 缺乏实战经验:以往都是参考视频/GitHub 项目,实际项目功能不会实现。
  • 沟通不足:没有写《需求分析》与《可行性分析》,也没进行有效的需求讨论。

示例:训练计划模块开发

例如“训练计划”功能,参考 keep 类似平台,我想实现如下功能:

用户通过选择一周的具体训练日 -> 提交 -> 将选中的星期转为字符串,例如“1234” -> 传给后端 -> 后端用于生成计划日历。

前端逻辑层:

  • 多项选择器;
  • 提交按钮事件监听;
  • 拼接字符串(如:1234);
  • 发起请求传参至后端。

但后端如何接收并入库?如何结合周期自动生成日历?这就成了最大阻力点。


写在最后

虽然项目中误解和矛盾不断,但我也在实际中成长许多,从最开始只会 UI,到现在能写逻辑层,甚至了解部分后端的实现难度。

✨ 项目仍在继续开发中,后续我将持续更新博客,并在比赛结束后输出完整 Markdown 项目总结版本,敬请期待!