《易打卡》—— 精准定位，一键打卡，记录便捷导出，排名实时更新，戒掉迟到，换你高效人生！这款小程序是在微信内测开始时期就一边学习一边开发，开发过程中也是随着微信小程序的功能以及API迭代而不断更新调整产品的形态与功能。http://www.see-source.com/weixinwidget/detail.html?wid=170
此次的开发总结，将会把我在整个开发过程中遇到的问题以及解决方法和开发技巧跟大家分享，希望能够帮助想要从事开发小程序的小伙伴。
扫一扫右上方二维码（或搜索小程序：易打卡），即可体验小程序。
最近一个月的数据分析如图：
一、准备阶段
1.1 微信小程序接入
在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。
1.2 获取小程序AppID
菜单 - 设置 - 开发设置
1.3 绑定开发者
通过用户身份管理可以绑定开发者，开发者总共可绑定20个，体验者可以绑定40个。tips：这比最初期10个开发者和20个体验者数量都有所提高。
菜单 - 用户身份 - 开发者
1.4 MINA 框架知识储备
这里分享一下我的学习整理，帮助大家对框架有个整体的认识。
1.4.1 微信小程序 MINA框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。
1.4.2 微信小程序 组件
框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
什么是组件：
组件是视图层的基本组成单元。
组件自带一些功能与微信风格的样式。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
tagname property="value" Content goes here .../tagename
注意：所有组件与属性都是小写，以连字符-连接
1.4.3 微信小程序 API
框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
说明：
wx.on 开头的 API 是监听某个事件发生的API接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。
如未特殊约定，其他 API 接口都接受一个OBJECT作为参数。
OBJECT中可以指定success, fail, complete来接收接口调用结果。
1.5 下载并安装开发工具
为了帮助开发者简单和高效地开发微信小程序，微信推出了全新的 开发者工具 ，集成了开发调试、代码编辑及程序发布等功能。
二、产品阶段
2.1 产品调研
小程序方向研究：小程序短期内并不会取代APP，低频、非刚需场景的长尾服务提供者最适合来做微信小程序;
小程序定位分析：适合做小程序的产品方向为个人信息管理、金融服务、便捷生活、电子商务、游戏、新闻;
小程序总结建议：建议从汽车资讯、美食、日历、个人信息管理、生活服务几个方向优先考虑;
通过脑暴选择了试手项目：易打卡
2.2 产品需求分析
产品核心需求：
快速打卡 —— 快速查看需要需要打卡的任务，并完成打卡任务
任务管理 —— 管理所有任务，并可以新建任务
个人中心 —— 用于帐号的设置、扫一扫、关于等页面
2.3 产品原型
第一版原型图
三、设计阶段
3.1 LOGO
第一版 第二版
3.2 视觉交互规范
3.3 优化细节
快速打卡优化过程
基于页面上下的比重考虑，将页卡的信息部分下移。左右滑动提示箭头去掉，因为大多数人见到页卡数字，自然会知道页面可以滑动，去掉之后让页面更简洁。距离信息的提示提出来，增加定位的一些icon的提示图标。中心的较大的打卡增加用户吸引力，在打卡的时候增加绿色外环的动态效果，增强用户交互。
tab中的细节优化部分在与旋转翻转效果，而且icon的线条粗细调整为3px。
四、开发阶段
4.1 前端
源码文件结构如下：
小程序配置：
功能点分析：
页面滑动组件的使用Swiper
打卡签到动效使用CSS3
列表渲染，数据绑定，模版，事件，引用以及内部页面的跳转navigator的的使用，这里以任务管理为例子说明
Swiper
滑动组件Swiper的页面结构及属性设置
CSS3 transform: rotate(deg)
打卡动效的页面结构
页面WXSS样式：
页面sign.js：
任务管理页面截图：
navigator
新建打卡任务使用技能，学会navigator的使用即可，其中事件绑定使用bindtap（官方没有明确说明，这里为了绑定上报数据还是这么写了），跳转的url配置为页面路径，hover-class用于自定义页面hover效果样式
Block、wx：for、wx：if
新建打卡任务使用技能，学会navigator的使用即可，其中事件绑定使用bindtap（官方没有明确说明，这里为了绑定上报数据还是这么写了），跳转的url配置为页面路径，hover-class用于自定义页面hover效果样式
页面结构：
事件绑定 bindtap
页面结构：
页面task.js：
4.2 后端
后台服务器架构：
后端API接口：
