Dzpszied

实现北京实时公交API(四) 开发小程序

在前面的文章中我们分别实现和解析了基于北京公交集团和市交委的实时公交接口。现在使用微信小程序进行封装。

第一版的诞生

体验了不少实时公交的小程序之后,发现大部分(包括北京公交集团公众号)的查询方式都是“选择线路-选择站点-查看”,我觉得这个体验不够好:能不能像一些知名小程序那样,直接获取到附近的线路,省去手动选择线路站点的步骤?

于是,8月16日我上架了第一版《北京公交出行》。

由于提前一周在v2ex、酷安预告了体验者招募的消息,在微信审核通过上架后我决定静静地看着会有谁来主动搜索。

无宣传上架一周的用户数

在无宣传上架一周后,很高兴看到,用户数已经积攒到了将近80.

开始构思第二版

第一版的小程序只有三个页面,选用了北京公交集团官网的数据源。在小程序启动时,通过获取定位获取了途径最近站点的线路,在去调自己的API获取实时数据,渲染页面。

这一版存在了很多问题:数据源在早高峰时期会挂掉;没有运通数据;经常出现距离和站数不对应的情况;用户反馈想要线路搜索功能。于是我开始了解析新的数据源。

在新源上我发现了很多令人兴奋的特性:支持运通线路;数据更准确;可以获取到每辆车的编号和地理坐标……这些功能是简单的三个页面承载不下的,于是我着手筹划第二版的《北京公交出行》。

由于对设计一直不太满意,所以这个原型稿改来改去。

一个过渡版本

这是其中一个过渡版本,线路卡片做的很浮夸。

对了说道原型工具,一直比较习惯Adobe XD,最近接触了Figma之后发现很舒服,决定有空的话安利一下这些原型工具们。

绘制的第二版原型图

最终反正是画出来了= =

Hello,北京公交出行

有了原型之后开发还是比较顺利的。

在框架的选择上当时想过用mpvue,但是看到issue里似乎有很多提到setData的性能问题的......鉴于这个小程序需要太多setData就放弃了...决定还是原生开发。

(写到这里的时候刚好滴滴开源了小程序框架Mpx,那就安利一下自家的东西~,有空来体验一哈)

那么原生开发怎么进行类似vuex和redux的状态管理呢?

之前Star过westore这个东西,当时的url还不叫Tencent,一看readme惊为天人,觉得这个框架太有才了。

后来再打开一看,地址已经变成了Tencent旗下了,原来是官方的东西。

最先实现的是地图页面,因为地图页面这个功能让我有一种上帝视角的感觉……然后实现了线路的搜索功能。有了这两个功能之后其实小程序已经可以勉强用起来了,于是我默默地在第一版发布后的三个月里一直在自用这个上帝视角......

开发时间基本是在周六日和晚上下班时间,有时候周末会整天呆在麦当劳海淀餐厅。这个餐厅由于一直围着施工,而且旁边是腾讯大楼...所以基本客流量很少很安静......

开发进度

然后这三个月里踩了不少坑,自用的开发版本也在不断完善,于是我觉得是时候拿出来给大家用了。

于是11月27日,《北京公交出行》上架。

小程序码

评论