这是「时刻Lite」小程序

记得高一的时候,有一台可以写代码的学习机,内置了BBasic平台1,便靠着一个4M的*.txt文档开始研究如何才能写出一个记事本脚本。

当时的想法很简单:开始尝试用电子设备来记录自己的日记 / 想法,而系统内内置的记事本并不能加密,自然安全性得不到保障。

所以用了一个加密的Key作为校验码,通过在9*9的方格内绘制图形来解锁,文本内容使用了Key加密。就这样用到了高三。每天放学后就拿这个笔记本来记录一些心情。直到后来…Key丢了。日记再也找不到了。

后来也尝试过各种各样的APP,备忘录、Day One、印象笔记、SimpleNote等其他的APP,或多或少的会有一些问题:

  • 需要订阅才能跨平台
  • 数据导出比较麻烦
  • 数据始终在第三方平台
  • 很多功能反而增加了复杂度

暑假的时候写了一个简单的网页,当时的想法就是:

它可以记录 1 张或 n 张图片,可以上传一个 10s 小视频,还可以记录签到的位置,然后界面一定要炫酷,动画要流畅。

时刻Lite的原型

「时刻Lite」就是一个这样的小程序,作为一个PM眼中的产品来说,它是不合格的:有点反人类的交互,不明显的Toast,为了美观而放弃了Modal等等。但是考虑到目前不能过审2,所以认为交互还可以接受。

简单来说:它是一个类似于朋友圈的笔记本,同时提供了一个WEB页面用来显示公开的时刻。

最小单位

时刻是「时刻Lite」的最小单位,每个时刻由4种类型组成:

  • 文字
  • 照片,最大可以添加9张
  • 视频,60秒以内
  • 位置

其中,文字、照片和视频是可以公开的,当选择公开时刻后,会有一个转发的小图标,这时候会把外链地址复制到剪贴板中,这样就可以分享给其他人了。

公开的时刻

位置是一个特殊的时刻,会记录当前设备的GPS坐标,并获取当前的地点,这样就可以在「位置」里查看曾经到达哪些地方啦。

位置时刻

关于位置

在学校的时候,就曾经建立了一张表,写了一个简单的API用来记录当前的GPS坐标,后来也尝试使用Workflow、JsBox来实现,所以慢慢的记录下来很多坐标,这也就是为什么想做这个 页面的原因。

看着满屏的坐标点,真的很舒服。

关于分享

分享使用了一个WEB端,但是为什么不用小程序自己的分享机制呢?

因为时刻算是一个记事本吧,你的记事本不应该去显示别人的内容。

Tab栏

「时刻Lite」使用了单页面模式,通过点击Tab可以进入不同的页面中,目前有三个页面:列表、位置和个人中心。

列表

列表页是「时刻Lite」的主页面,也是重要的页面,通过上拉加载可以加载下一页的内容。

位置

位置页展示了所有的曾经签到的位置,可以通过放大缩小来查看每个区域的具体位置。

个人中心

个人中心页面展示了用户的一些记录,比如多少条时刻记录,多少张照片等。相册展示了所有类型为「图片」的照片,同时,点击每一张照片可以查看当前照片的EXIF信息,如果当前照片包含GPS坐标,则会显示照片的拍摄地点,没错,这就是VSCOM的想法。

详细照片

Post按钮

权衡了好久才想出来一个好看的「添加按钮」样式,点击「+」就可以展开菜单,分别可以发表文字、图片、视频和位置。同时,利用3D Touch或者长按按钮可以快速发表文字的时刻。

发表按钮

对于签到,第一次需要授权位置信息,才可以进行签到打卡,之后就可以进入到签到页面了。

公开时刻

这是后期才想到的一个想法(是因为设置了is_public字段),可以将一些想要分享的时刻进行公开,所以添加了一个公开的Icon。

可以公开的规则很可能有点很绕:

  • 文字、照片和视频可以选择是否公开
  • 位置信息全部会全部公开
  • 照片数量会全部公开

既然已经有了公开的时刻,那还需要一个WEB界面来显示,哈哈哈哈又给自己加上了一个坑。

WEB页面

WEB界面的样式和小程序端保持了一致,Tab中的「个人中心」放在了左边,并且固定显示。而右边依旧是「列表」和「位置」。

让一个后端去写前端,样式只能这样了。(哭

web端

生物认证

为了保护一些不公开的时刻,所以「时刻Lite」小程序加入一个4位数的Pin用于锁定小程序。

在个人页面,通过点击头像右边的🔒设置4位数的Pin密码(设置为0或者长按Icon可以取消密码),这样下次进入小程序的时候就需要先输入密码才能进入。当然,在部分支持生物认证3微信支付的手机上同时会默认使用生物认证(FaceID、TouchID)。

生物认证

用户体验

#Taptic Engine

很喜欢iPhone 6s之后添加的Taptic Engine线性马达,碰巧小程序也提供了wx.vibrateShort(Object object)接口,可以使用线性马达发生较短时间的振动(15 ms)。

林十兄曾经详细介绍过线性马达的体验: 👉 这一次,我们来深入聊聊线性马达和智能手机的触觉反馈

但是小程序只能短震动一次,为了模仿「Check」和「Wrong」,还需要封装一下。

「Check」用来辅助「确认」或「完成」的情况,以200ms的频率震动两次,配合Toast可以模拟达到一个完成的效果:

1
2
3
4
5
6
function check() {
wx.vibrateShort();
setTimeout(function() {
wx.vibrateShort();
}, 200);
}

而「Wrong」需要模拟出一种很紧张的效果,所以以100ms的频率快速震动3次,再配合一个「Shake」晃动模拟出来错误的效果。

1
2
3
4
5
6
7
8
9
function wrong() {
wx.vibrateShort();
setTimeout(function() {
wx.vibrateShort();
setTimeout(function() {
wx.vibrateShort();
}, 100);
}, 100);
}

就像这样:

妥协

因为小程序的一些限制,所以有些地方不得不做了一些妥协。

  1. Video组件

因为Video组件是系统级的组件,层次最高,所以再经过Tab的时候会浮动在Tab上面。虽然小程序提供了<cover-view>,但是最新的基础库iOS端仍然无效!所以改成了弹出一个Modal窗,这样就把Video组件放在了最高层。

  1. Map组件

同样是由于系统级组件,所以切换成「位置」页的时候需要先返回顶部再切换,导致和其他切换的动画不相同。

  1. 糟糕的前端技术

因为糟糕的前端技术所以一些应该是「炫酷动画」的地方最后还是草草了之。前端还得学啊!

  1. 动画

「签到」页面应该是一个「呼吸」效果的动画,但是在iOS端它掉!帧!muq还没找到解决办法,还不想用GIF…

技术栈

总结一下项目用到的技术:

小程序端,使用了原生MINA框架。这是一个比较友好的、容易上手的框架,也是为什么没有选择其他框架的原因。

后来为了摸鱼学习VUE,使用VUE2.x框架完成了WEB端。主要练习了:

  • ES6 规范和使用
  • VUE-CLI的构建
  • WebPack的使用
  • 组件、路由和Less

后端则使用了为API而生的Lumen框架。Lumen是基于 Laravel 构建的速度最快的微框架(micro-framework),Laravel真香。

关于开源

和大多数人一样,将自己真正的日记放在第三方数据库里肯定不是一个好主意,因为你不能保证数据会始终存在的,所以当小程序和API磨合完毕后,将会以MIT协议开源小程序和API接口。

大家可以放在自己的服务器上,也可以作为服务提供给其他人。

最后

其实有这样一个想法很久了,因为工作的时间一直没有动力去做,API在两个月前就已经完成了,但是小程序却是几个星期前才开始动工的。

一开始反而更想去做一个iOS和Android端的应用,也看了Flutter框架和WEEX框架。最后还是因为99刀的个人认证和Flutter的复杂放弃了。得益于原来写过「课表」和外包的其他小程序,所以开发起来还是很快的,也是因为同样都是MVVM框架,所以VUE使用起来也很方便。

不得不说只能看到数据的后端,前端的自由度反而会更有动力做下去。看到一个个想法慢慢的实现出来,这种过程也是非常有趣的。虽然中间遇到了各种各样的坑哈哈哈。

最后借用了「VSCOM」的壳,小程序终于过审了。(逃

showcase


  1. 1.BBASIC是一种掌上学习机的编程平台。BBK BBASIC,简称BB,最早由通宵虫于2006年开发,是由VMBASIC结合QuickBASIC开发而成。
  2. 2.原因是小程序审核不通过:你好,你的小程序涉及提供备忘录、日记、记事服务,备忘录等属个人主体小程序未开放类目,建议申请企业主体小程序 请根据上述原因对小程序进行修改,并重新提交代码审核。
  3. 3.小程序通过 SOTER 提供以下生物认证方式。目前暂时只支持指纹识别认证。设备支持的生物认证方式可使用 wx.checkIsSupportSoterAuthentication 查询

🥳 加载Disqus评论