早在六月中旬朋友就跟我讲垃圾分类可以做，只是那会儿我还在倒腾“公众号同步助手”，等我准备蹭这个热点的时候已经快是 6 月底了。时机尽无了啊～

做之前对现有小程序做了个调研、大概三五个 支付宝这边有《垃圾分类向导》微信这边有《垃圾分类指南》，本着自以为能做的更好的心态（蜜汁自信，说干就干了。。

小程序注册 备案域名

因为之前有注册过，花了不到一个小时，起名的时候很多名字都被注册了。。（这个时候应该预见到接下来有很多要上的小程序

与此同时问authing.cn 的 ivy 同学借了个二级域名。虽然我有很多域名，但是都没一个备过案，至于为什么当然是怕投机倒把被抓起来了啊哈哈哈。

服务器 SSL

之前阿里云有个闲置的 ecs，怕后续可能会有很多流量（多虑了），准备了个负载均衡 elb， acme 申请了个 Let’s* Encrypt 的 ssl 证书。

这里后面发现一个问题，如果挂 elb 的证书用的不是 fullchain.cer 的证书，在 android 下可能会出现 ssl error。

后端选型

  • docker-compose.yaml
1
2
3
4
5
6
7
8
9
10
11
version: "2.2"
services:
  tapi:
    image: wyveo/nginx-php-fpm:php71
    restart: always
    volumes:
      - .:/usr/share/nginx
      - ./default.conf:/etc/nginx/conf.d/default.conf
    ports:
      - "8081:80"
      - "9001:9000"

因为这台机器上原本有 Docker，PHP Laravel 的开发镜像，而且写 node 也写腻了。于是就用了最好的语言 PHP。直接 copy 了目录起了个 container，数据库用了闲置的阿里云 RDS MYSQL

接口设计

搜索接口
  • 接受一个搜索词，返回命中搜索词的结果集
所有类型
  • 返回所有垃圾类型及其描述和相应的垃圾条目

数据准备


花了不到半小时从百科整理了大概接近两百条分类数据。

设计了三张表

所有垃圾trashs

  • 存储了所有物体条目及对应的以及分类
所有垃圾类型types

  • 存储了所有垃圾分类类型及对应的相信介绍
用户搜索记录keywords

  • 统计了所有用户搜索过的词，记录了对应搜索次数,命中结果数
  • 为了迭代分类库发现未收录的词

小程序开发框架

mpvue

本着也要上支付宝的想法，用了 mpvue 作为开发框架

UI 资源

图标库

  • iconfont 搜 trash 发现一个黑灰色的图标，
  • 发现作者以此特征设计了几套图标库。便决定黑灰作为基调色。。
垃圾分类标示


这个高清资源真的很难找，在《上海绿化市容局》官网的几个学习资料 pdf 里抠了几个高清的 logo

UI 设计

借鉴他人

借（chao）鉴（xi）了几家的现有小程序我认为不错的部分。

分类展示页
  • 提供了分类列表和详情的介绍页
  • 分类详情采用轻前端重后端的方式用了富文本（后端可以随时更新 HTML 展示
提交上线

最小版本当晚就提审了，第二天就被拒了。。
因为微信开发者工具没开启 ES6 转 ES5，在低的 iOS 系统因为系统浏览器不支持 Object 扩展运算符报错白屏。。
解决了这个 bug、再次提审第三天还是过审了

反思

虽然做的时候也在想要好好利用用户来做分享裂变来传播。
但是缺乏实践经验，也远远低估了分享带来的各种传播效应。
需要时刻提醒用户分享出去，制造传播的机会。

后续改进

后来又接入了阿里云的图像打标，但始终只是丰富在输入上的途径。
无法解决用户如果搜索了一个库里没有的垃圾？

设想：能不能设计一个去中心化机制来让部分人来参与到对未知物体的垃圾分类的标注工作当中？