WeChat applet for Mid Autumn Festival card sharing---微信小程序中秋贺卡分享
- 开发原因:中秋节快到啦,想做一个有意思的贺卡分享小程序,给大家使用
- 开发周期:2018-09-12 至 2018-09-20上线
- 用户统计:累计用户5500人,访问次数3万。打开次数1万。贺卡发送6000条,接收4000条。
- 现状:不能使用,由于功能内容超过微信个人开发者的范围,微信审核不予通过,无法上线。
- 版本:3.0.0
- 技术难度:容易
- 说明:第一个上线微信小程序作品,技术含量并不高,即使后来重构到3.0版本,也仅仅是一个练手作品而已。但毕竟是自己单人开发,并且上线的项目,还是很开心的。
- 项目录屏:B站地址
由于本身制作的贺卡只有6张,所以如果直接给用户选择想发送的贺卡的话,毕竟太少啦!主要原因是使用css3做的贺卡,单个贺卡页面接近20个css3动画属性,要让一个页面中,这么多动画,安装合理的动画执行时间,是比较费时间的,当时只用了8天做开发,还要完成后端及页面逻辑,工作量很大,所以有了下面贺卡抽取的方式,也算是增加了一点可玩性!
- 抽取贺卡:首页开始点击气泡,有80%的几率可以获取贺卡,6张贺卡被选择的概率相同;
- 编辑贺卡:用户抽到贺卡以后,可以对贺卡进行编辑,包括送给的用户,以及祝福语,然后在微信中分享给该用户即可;
- 贺卡管理:A用户分享给B用户,就形成了发送与接收的关系,因此在贺卡管理页面,可以对自己接收和发送的贺卡进行,增删改查操作;
- 其他功能:类似登录,信息导入等用户不关心功能,就像App都有一个设置页一样,虽然不重要,但必须有。
项目分为小程序端代码用Front表示,Node后端代码用Back表示。
小程序端代码,需要提交微信审核,也就是上线版本。代码架构逻辑相对混乱,主要是一开始没有考虑好完整的功能,本来只想做一个很简单的贺卡分享小程序,后来加入了很多其他功能,例如贺卡管理,用户贺卡计数一系列用户可能不感兴趣的功能。
├── app.json -- 应用配置参数
├── app.js -- 小程序配置 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
├── app.wxss -- 全局样式配置
├── project.config.json -- 项目配置
├── img 小程序用到的图片,部分图片,该项目图片超过2M,小程序不可以超过2M,所以大部分图片在服务器上。
├── page -- 项目页面
│ └── index -- 首页文件
│ └── lib -- wxJS库,辅助页面渲染
│ └── list -- 收到和发送的贺卡页面
│ └── set -- 设置页面
│ └── theme -- 中秋主题展示页面
│ └── themelist -- 收到和发送的主题展示页面
├── util -- 模块化开发
│ ├── js -- 公用JS代码
│ └── wxml -- 页面间通用wxml,与wxss对应
│ └── wxss -- 页面间通用wxss,与wxml对应
基于node.js + express + mysql实现的restful风格的小程序后端。
├── app.js -- 应用配置
├── bin
│ └── www -- 项目运行脚本
├── conf
│ └── mysqlConf.js -- mysql配置文件
├── dao
│ ├── *DAO.js -- 封装*数据库的交互
│ └── *SqlMap.js -- 封装*数据库SQL语句
├── mylogfiles -- 项目日志文件
├── package.json -- 依赖模块
├── sql
│ └── zqCard.sql -- 数据库建表脚本
├── util
│ └── common.js -- 公用js
└── routes
└── controller.js -- 用户操作路由及业务逻辑