上一个暑假，我在一家互联网初创公司实习了一个半月的时间，作为前端开发实习生，参与了公司团队的一款微信小程序的开发。这是一只小巧而年轻的团队，在产品开发的过程中，大伙齐心加班加点，在 APP 版本上线的那一晚，熬了个通宵。这一个月的开发经历让我这个初入互联网行业的小白“印象深刻”，我也很感激这一群“出生入死” 的战友们，虽然前端和后常常“亦敌亦友”，产品和开发总是“血海深仇”，但团队始终保持热情，保持活力，我想这也是年轻团队最大的优势。

一款微信小程序的开发和大多数产品开发一致，要经过产品需求讨论、原型撰写、UI 设计、程序开发这些环节。我们的团队采用了敏捷开发的模式，下面我就对开发过程中我所接触到的、了解到的开发工具和技术栈做一个记录：

需求 + 原型设计：

• Axure RP： Axure RP 是一款快速原型设计工具，支持多人协作设计和版本控制管理，由来自美国的 Axure 公司出品。这是一款收费的软件。Axure RP 8.0 可以免费试用30天，免费试用的版本是企业版（所有功能全开），到期后需要付费授权才能继续使用。
  官网下载地址：Axure RP 8

UI 设计：

• PxCook： PxCook 有一个可爱的中文名像素大厨，是一款切图设计工具软件，由国内的 FancyNode 团队开发。PxCook 自我评价是“最高效易用的自动标注工具”，其优点在于将标注、切图这两项设计需求集成在这一个软件内完成。
  软件官网：PxCook

前端开发：

• 微信开发者工具： 微信小程序作为微信内置的功能，在开发的时候也有所限制，必须使用微信提供的 JavaScript 框架。并且，需要使用 WXML，WXSS 代替传统的 HTML 和 CSS，前后这两套样式语法其实挺类似：
  WXSS 在 CSS 的基础上添加了一些功能，如能根据屏幕宽度进行自适应的船新尺寸单位： responsive pixel, rpx。
  WXML 被赋予了数据绑定的功能，并且替换了一套基于<view>的船新的 tag 标签。
  值得注意的是，微信提供的这套框架没有做成 Angular.js 一样的双向数据绑定，而是需要通过在 script 中的 this.setData 方法更新页面的数据。
  小程序开发官网： 小程序
  （关于数据双向绑定：Angular.js 的数据双向绑定指的是从 View 到 Data 的事件绑定和从 Data 到 View 的属性绑定，能保证页面的 View 和 Data 始终保持一致。常用于表格和输入框的数据处理。）

• Koala： 一款前端预处理器语言图形编译工具，由一位国内的前端大牛写成。开发过程中主要用到了 Koala 的实时编译功能，将 SCSS 文件编译成 CSS。Koala 能做到实时地监听文件，当文件改变时自动执行编译。使用 SCSS 这款CSS预处理语言主要是看中了它在 CSS 语法的基础上加入的嵌套式语法，让样式编写的结构更加一目了然。
  此外，跳出了微信的框架之后，我们就可以随心所欲的选择 IDE 来编写 SCSS 样式文件，而我使用了更加顺手的 WebStorm。
  下图是 Koala 的 GUI 界面。（没错，官方会在每千人用户中抽取一位幸运用户，下载软件，附赠考拉一只，我信了。）
  
  Koala 的官网：Koala

• Sourcetree： 一款 Git 管理工具，由澳大利亚的 Atlassian 公司开发。这是我们开发过程中用到的版本控制工具。
  Sourcetree 官网：Sourcetree

• gulp.js： 一款开源的自动化构建工具。小程序最终的样式需要 WXSS 的格式，所以，我们使用 gulp 将上述编译成的 CSS 文件的后缀修改为 .wxss。没错！需要做的只是修改后缀，可见 WXSS 和 CSS 的语法是高度相似的。gulp 和上述的 Koala 一样都能实现自动监听文件修改的功能。
  gulp.js 的 Github 地址：gulp.js

后端开发：

• Laravel： 后端用 PHP 语言编写，使用了 Laravel 作为项目框架。Laravel 是一款开源的框架，由 Taylor Otwell 在 2011 年开发，是 PHP 语言的最热门、使用最多的框架之一。
  Laravel 框架官网：Laravel

• Navicat： Navicat 是一款可视化数据库管理工具，后端大大们在项目中利用它来管理 MySQL 数据库。Navicat 是一款卓软数码科技 (PremiumSoft) 有限公司的产品。
  Navicat 中文官网：Navicat 中国
  Navicat 维基百科介绍页：Navicat - Wikipedia

• Docker： Docker 被称为“轻量的虚拟机”。Docker 给每个应用程序装了一个 container，集装箱，机器不用管 docker 的集装箱里面装的是什么，只需要懂怎么安装集装箱就好，货物也只需要懂怎么把自己放进集装箱就好。
  Docker 的出现给开发环境的移植带来极大的便利，完全无视了不同系统、不同硬件的差别带来的兼容性问题。
  我觉得 Docker 的“集装箱理论”是一款产品自我介绍的典范！
  Docker 官网：Docker

开发管理：

• NEI接口管理平台： NEI (Netease Easy Interface) 是一款接口管理平台自动化构建工具，来自网易。开发过程中前端和后端的独立开发、模块化开发模式能提高效率、便于测试。这种低耦合的开发模式也是敏捷开发的宗旨。 后端编写完成业务逻辑之后，将实现功能的代码块包装成一个接口，以供前端调用。而 NEI 就是一个接口管理平台，后端大大们将“接口字段的名字、调用接口需要哪些参数、调用的返回值是什么”等信息上传至 NEI，前端小小们在实现按钮的提交功能、分页功能、下拉页面刷新功能的时候，就可以到 NEI 上找到对应地接口，然后愉快地继续写 bug code 了。
  NEI 平台的官网链接：NEI

• TAPD： TAPD (Tencent Agile Product Development) 是腾讯敏捷产品研发平台。TAPD 对于开发者来说就像一个任务清单，一个任务需求就是一张磁贴，而 TAPD 的面板就是一张大的磁板。每个任务的优先级、当前处理人、预计开始时间、预计结束时间等都被标注在该任务下，而磁板又被划分为规划中、实现中、已实现等板块，开发者根据目前的进度，主动拖动任务磁贴到正确的板块中，这样开发、产品和上头的人都能非常直观掌握开发进度。
  另外，不同的产品迭代周期都能重新制作一份任务磁板；实现后的任务经过测试人员的测试发现缺陷后，也能通过 TAPD 回馈给开发，送上一张 brand new 的缺陷磁贴。总之，TAPD 确实是开发过程中管理进度的好平台，好帮手。
  TAPD 平台官网：TAPD

• 阿里云： 团队开发过程中，代码交给了阿里云托管。作为国内公有云的“南波湾”、日前全世界公有云的 TOP5，这是一个值得信赖的平台。
  阿里云开发者平台官网：开发者平台