作者简介：腾讯的前端工程师梁远，目前在腾讯OMG网络媒体业务组的产品中心工作，负责腾讯的相关业务。对前沿技术的研究，创新和共享充满热情。

“轻松办理登机手续”-精确定位，一键办理登机手续，方便导出记录，实时更新排名，避免迟到并改变您的有效生活！此小程序是在微信内部测试版开始学习时开发的。在开发过程中，通过微信小程序和API迭代功能不断更新和调整产品的形式和功能。

此开发摘要将与您分享我在整个开发过程中遇到的问题以及解决方案和开发技能，希望能帮助希望参与开发的小伙伴小程序。

扫描右上角的QR码（或搜索小程序：易于检入）以体验小程序。

最近一个月的数据分析如图所示：

一、准备阶段1.1 微信小程序访问

在微信公共平台的官方网站（）的右上角单击“立即注册”按钮。

1.2获取小程序 AppID

菜单->设置->开发设置

1.3个绑定开发人员

开发人员可以通过用户身份管理来约束。开发人员最多可以绑定20个，而体验人员最多可以绑定40个。提示：这比最初的10个开发人员和20个体验者有所增加。

菜单->用户ID->开发人员

1.4个MINA框架知识储备

我将在这里分享我的学习和成果，以帮助所有人全面了解该框架。

1.4.1 微信小程序 MINA框架

小程序开发框架的目标是允许开发人员以最简单，有效的方式在微信中开发具有本地APP经验的服务。该框架提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层和逻辑层之间提供了数据传输和事件系统，使开发人员可以轻松地专注于数据和逻辑。

1.4.2 微信小程序组件

该框架为开发人员提供了一系列基本组件，开发人员可以通过组合这些基本组件来快速进行开发。

什么是组件：

Content goes here ...

注意：所有组件和属性均为小写并由连字符连接

1.4.3 微信小程序 API

该框架提供了丰富的微信本机API，可以轻松调用微信提供的功能，例如获取用户信息，本地存储和付款功能。

说明：

1.5下载并安装开发工具

为了帮助开发人员简单有效地开发微信小程序，微信推出了一个全新的开发人员工具，该工具集成了开发和调试，代码编辑和程序发布功能。

二、产品阶段2.1产品研究

小程序研究方向：小程序短期内不会取代APP，在低频，非刚性需求的情况下，长尾服务提供商最适合微信小程序；

小程序定位分析：小程序的合适产品方向是个人信息管理，金融服务，便利生活，电子商务，游戏，新闻；

小程序简要建议：建议优先考虑汽车信息，食物，日历，个人信息管理和生活服务；

在头脑风暴中，我选择了一个试验项目：容易打孔。

2.2产品需求分析

产品核心要求：

快速检入-快速检查需要检入的任务，并完成检入任务。任务管理-管理所有任务，并创建一个新的任务个人中心-用于帐户设置，扫描，关于等页面

2.3产品原型

原型地图的第一个版本

三、设计阶段3.1个LOGO

第一版和第二版

3.2视觉交互规范3.3优化细节

快速签入优化过程

根据页面的重量上下移动页面卡的信息部分。左右滑动以删除提示箭头，因为大多数人在看到页面卡号时就会知道页面可以滑动。删除后，页面将更加简洁。出现距离信息提示，并添加了一些用于定位的图标。中心较大的签到位置可增加用户吸引力，并在签到期间添加绿色外环的动态效果，以增强用户互动性。

选项卡中的细节优化部分与旋转和翻转效果有关，图标的线宽调整为3px。

四、发展阶段4.1前端

源文件结构如下：

小程序配置：

功能点分析：

使用页面滑动组件的滑动检入动画使用CSS3列表呈现，数据绑定，模板，事件，引用以及内部页面跳转导航器的使用。这里，以任务管理为例来说明Swiper

滑动组件的滑动页面结构和属性设置

CSS3转换：rotate（deg）

打孔卡动画的页面结构