摩拜单车微信小程序快速开发实践

前言

关于微信小程序的介绍不多说，关于摩拜单车更不用多说，本文主要讲讲从摩拜单车开始做小程序到开发提交微信审核的过程，前后也就一个礼拜多点时间，开发时间跨域了2016、2017，开发地点都跨越了上海、北京。

曾经看到一篇言论：摩拜单车特别适合微信小程序的场景——马路上看到橙黄色单车，没有WIFI又赶时间，这时候打开微信扫一扫就可以骑走，真是无比炫酷的场景。

也许你正和女朋友聊着天，不用切换APP，聊着天就解锁一辆摩拜单车以最快的速度见面。

小程序大更新

12月20日，记得是个周二，微信小程序迎来大更新，不管是微信端，还是PC端的小程序开发工具，开始支持了期盼已久的功能组件，比如「地图打多点」、开放「扫一扫」，这就可以实现摩拜单车的基础功能——地图找车，扫码开锁。基于这个前提，已经可以着手开始规划摩拜单车小程序如何实现，以及要实现哪些功能。

摩拜单车前端团队第一时间更新，并利用摩拜现有API和新的微信API做了DEMO，基本实现了地图找车功能。

1月9日小程序正式上线

12月28日，当时在上海，也许我正在我们新的酷炫高大上的上海办公室吃着瓜，“2017微信公开课”公布小程序正式上线日期定在2017年1月9号，也就是下下个周一，真是“噩耗”，措手不及之后赶紧聚集PM和夏叔开紧急电话会议，最终决定为了赶在第一批小程序上线，我们砍掉之前规划的有些不是特别紧急的功能，实现最基础版的小程序摩拜单车——地图找车，扫码开锁，计费结算。

需求评审

12月29日，在北京的办公室紧急召集大家强行评审小程序，PM团队、设计师团队、QA团队等，需求明确后，各自开工。

设计稿

12月30日，前端开始规划小程序架构，功能组件以及可能会是用到的前端库，确保在拿到设计稿之后的第一时间可以直接进入业务开发。给力的是，设计师团队在下班前就提供了完整的设计稿以及切图，之前写的DEMO版也更换成了正式的切图素材。

切页面

12月31日，前端“切页面”的过程，因为要使用微信新的脚本语言，基本都是边看文档边写出页面，没了熟悉的div，却多了一层层的view；没了window变量，也没有onclick事件绑定，却有微信提供的”wx”全局方法，也有类似Angular的事件绑定；前端工程师不再可以自由操作DOM，而是不断设置类似React的state改变页面展现。

调接口

2017年1月1日，和女朋友在上海跨完年后，紧急飞回北京，回到熟悉的大雾霾。

假期的摩拜北京办公室依然有人值班。现在还清晰记得，1月2日听到的第一声小程序开锁声，激动不已，直接绕办公室骑行了好几圈。

提测

1月3日，正式提测。期间遇到一些奇怪的bug，比如部分Android小程序在扫码成功后会Crash，想了很多办法还是没彻底解决，几轮测试后发现：在已有微信map组件的前提下，移除它再渲染一个新的map组件，就有极大可能引起Crash，业务场景就是找车的map销毁，骑行的map出现，直接Crash，解决办法也不复杂，整个小程序始终只有一个map组件，通过切换不同的state来达到不同展示的目的。技术细节以后再详解。

提交审核

1月6日，经过3天的测试和改bug，终于赶在周末前提交小程序审核，微信小程序团队的朋友也在第一时间体验并开锁成功。

广告

说了这么多，重点来了：

摩拜单车招聘前端工程师，不在乎PC端还是移动端，也不在乎React党还是Vue党，更不在乎有分号还是无分号党，我们的技术栈多而不乱，每项技术都只服务于自身最适合的项目。

如果你爱折腾技术，也爱骑单车，那就最合适不过，欢迎投简历到 hr@mobike.com 或 zhangshibing@mobike.com 。