微信小程序 《告白星球》 关于它的一些总结

想法来源

前段时间朋友 阿 Ken 一直在跟我发 balabala 他在和心仪的女生如何聊骚:)。

我:。

虽然他能明显感觉到女生对他是有好感的,但是身为怂蛋的他始终不敢说出那三个字,所以一直跟我发牢骚,我好烦。

烦着烦着,突然发现好像身边还挺多这样的例子的!

然后我就开始在想能不能做一个东西,让大家可以无风险的告白。

于是,《告白星球》就来了。

(哈哈哈哈哈哈哈哈铺垫了好久!)

技术选择

《告白星球》依然使用 MpVue 框架开发,有了上次《北师教务助手》的使用经历后,对 MpVue 有了更熟悉的了解。而后端的开发则是第一次尝试使用了微信小程序的云开发。

关于小程序·云开发,官方是这样描述的

  • 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码

  • 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库

  • 存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

这就意味着我完全可以通过以上三种功能开发出一个后端,免去了搭建服务器之类的步骤了,何乐而不为呢!

《告白星球》小程序逻辑很简单,如下:

  • 用户首次登陆,获取用的头像和 Nickname 等信息。
  • 发射卫星:用户将自己喜欢的人的姓名和性别提交到云服务端,每个用户有且只有一次的发射机会(通过数据库中的字段控制)。
  • 小程序在每次 onShow 时都会向云数据库 Fetch 一遍数据,检测用户是否匹配成功。
  • 用户会在匹配成功后会在微信收到服务通知提示。
  • 当有同性用户匹配成功后,会被识别为彩虹卫星 🌈。

云服务端(云函数)逻辑:

  • getUserLover 函数获取到来自小程序用户提交的数据,并在数据库进行匹配,如有匹配结果,则匹配成功,通过 sendTemplateMessage 函数发送模板消息通知双方。
  • updateFormTime 函数则是更新 form_id 字段,因为微信限制 form_id 字段有效期为 7 天,过期则无法向用户发送模板消息。具体可点击在这里

主要功能就由这两个云函数实现。

Serverless

第一次使用小程序的云开发,个人感觉与小程序整合的很好(hiahia不是废话嘛),特别是天然鉴权能力,减少了与自己服务器做验证这一个步骤,节省了超多时间。使用 Serverless 可以提升很多的开发效率,也不用再去考虑部署后端,域名配置等问题,还能降低开发成本。

当然,想要实现更加自由的功能还是单靠小程序的云开发可能还无法满足,但,以后的事谁说的准呢!

个人还是非常看好 Serverless 这个概念的,而且我认为这也是目前的一种大趋势,还是紧跟技术的脚步,学多无害!

界面设计 / 动效设计

《告白星球》在设计上(大概)遵循极简原则。

我觉得比较有特色的部分是采用了一款日本免版权可商用的字体:マキナス(makinas),也因此,尝试了在小程序引入第三方字体。

遇到的问题:

微信小程序组件 image 有内置样式,页面加载时会出现 FOUC(Flash of Unstyled Content)问题。

image组件会有内置样式:

1
2
3
4
5
6
image {
width: 320px;
height: 240px;
display: inline-block;
overflow: hidden;
}

当小程序页面加载时,CSS 尚未加载到时就会出现 FOUC

关于 FOUC,我写过一篇文章简述过。

解决方案:因小程序特殊,无法 resetCSS,于是想到的一个(不完美)解决方案就是给 image 加上 max-height 属性,以此来限制它。

引入第三方字体

关于小程序引入第三方字体的问题,我 Google 到了很多种解决方案,但是他们都不算完美,会有部分缺陷,我尝试了一种优化方案,会另写一篇文章去描述,敬请期待!

收获

《告白星球》适合一篇推送一起发送的,在同学和朋友的支持下,这篇推送在朋友圈迅速传播(再次感叹朋友圈的传播速度),短短几天就累积了 3500+用户了!也是一个比较意外的惊喜!

然后几天后收到 知晓程序 编辑的通知,告诉我《告白星球》被编辑推荐到了每日小程序推送以及官网首页了!感恩!!!

期间也有人加我微信,来了一番“质疑”:

祝他们幸福!

也算是完成了一件很有成就感的事情!!!

继续加油! :)