iOS使用JSBox实现一键查询公交

1.起源

作者本人吊丝码农,坐标苏州,一把年纪了上下班还要挤公交,每次出门之前,都习惯性的查询一下目前公交距离自己还有多少站路,以确定走路的步伐快慢[捂脸哭]。

在苏州的朋友可能会知道,查询各路公交有个专门的微信公众号,所以每天出门时要查公交的时候,还得

1
2
3
4
5
6
1.先打开微信;
2.找到公众号;
3.点击公众号第二个tab“公交查询”呼出菜单;
4.再点开“公交实时查询”的菜单按钮,才能打开查询的网页;
5.输入要查询的公交线路;
6.点击搜索出的结果;

经历这繁琐的6步,才能查询到运行情况。Emmmm到这里是不是觉得每天出门第一句,先说一声xxx。
WTF.png

其实说白了,我们要解决的问题,或者说需求就是用最简单的步骤,获知最近一班你想要乘坐的公交,距离自己还有多少站路?

2.分析

2.1获取数据

经过前几步复杂的步骤,无非就是打开了一个专门的网页,查询相应的接口。打开强大的Charles,设置手机代理抓包,抓到如下几个接口:

1.网页地址
苏州公交110南线示例
请求方式:GET
http://app.2500.tv/bus/lineInfo.php?lineID=10000522&roLine=10000570
一个get请求后面接了俩参数,但是只能在微信内嵌浏览器内打开(可能是为了获取用户openId,用于统计)。

2.查询接口
http://app.2500.tv/bus/api_line_status.php
请求方式:POST
入参数:lineID
返回:

1
2
3
4
5
6
7
8
9
10
11
12
{
    "status":1,
    "data":[
        {
            "BusInfo":"",
            "Code":"ADU",
            "ID":10003883,
            "InTime":"",
            "OutTime":"",
            "StationCName":"星塘公交中心"
        },]
}

其实有了第二个接口,就能做很多事情了。

2.2处理数据

我们已经能有办法获取到数据了,但是我们想要在手机上处理数据,就必须得有一个容器来获取数据,再处理数据。这个时候就轮到主角JSBox登场了。

2.2.1 JSBox

JSBox 是由知名的 PIN (iOS 剪贴板增强工具) 的作者@StackOverflowError推出的一款可让你在 iOS 上编写与运行 JavaScript 脚本的工具。
这个app是收费的,貌似还不便宜,没记错的话是50软妹币。不过本人刚好某次转发微博抽奖抽到一个兑换码😜😜😜😜
点击这里了解更多关于JSBox
个人推荐使用VSCode来编辑脚本,毕竟在手机上码代码太难受了,而且JSBox还提供了VSCode插件,能够在线编辑调试,非常方便。

利用JSBox封装好的$http,去调接口,然后再对返回的json,做下一步的处理(遍历,循环,判断,计算),计算出当前最近的一般公交,距离你有几站路。

2.2.1 为什么不直接用捷径

有人也许会说,iOS的捷径app,也能实现。确实不可否认,本人只对捷径研究了一两个小时,里面也有高级的api,来调接口。但是不用捷径直接处理的原因如下:
捷径截图.png
如上图所示,用程序猿的眼光来看:
捷径本质就是把某一个功能,不用代码,而是用图形化(GUI)的界面来实现。
所以,对于一般大众用户,编程小白来说,用捷径去完成一些不复杂的工作流,还是可以的。比方说,相应一条指令,打开某个app,或者拨打某个电话等等。
但是,想对于发送post请求,json数据解析,业务需求处理,这种相对高级的操作,用图形化界面来弄,会变的非常的复杂。
总结一下就是:
1.GUI操作界面,不太适合复杂度高,定制化高的工作流,而且是在手机上操作 ;
2.还是因为GUI的原因,不方便调试(debug),工作效率就显得很低下;

2.3展示数据

UI展示,直接利用了JSBox提供的控件labellist
将第2.2中处理好的数据展示出来,展示出:
1.还剩余多少站路
2.还剩余那些站。
直接照着文档一步一步敲,而且Masonry似的布局方式对iOS开发者很友好,就可以轻轻松松搭UI界面。

3.最终效果

3.1 在JSBox中使用

直接运行脚本,来看效果:
JSBox内效果.gif
可以看出能达到查询公交的效果,最后来实现如何实现一键查询

3.2 通过iOS锁屏widget(推荐)

废话不说上图
widget.gif
锁屏widget里一键点一下即可,都不需要解锁,很方便。

3.3 通过Siri唤起(推荐)

通过Siri,也能实现一键查询。不过通过Siri实现的方式有两种。

3.3.1 Siri唤起JSBox执行脚本

在JSBox App里,添加方式有如下两种:
脚本设置页面 -> 添加为 -> 添加为 Siri
系统设置页面 -> Siri 与搜索 -> 在捷径中找到相应的脚本
效果图:
siri_run_jsbox.gif

3.3.2 Siri唤起捷径执行JSBox

当然需要你先创建一个捷径,并且你要在捷径里,添加一个JSBox提供的组件。然后再设置Siri指令。
捷径设置.png
效果图:
siri.gif
使用Siri的唤起的好处就是,你都不需要动手点亮屏幕,直接一句“嘿,Siri,我要下班”就能够实现查询。
当然,前提是手机要先设置好Siri唤起,以及手机不处于低电量模式。

3.3.3 通过桌面图标唤起(比较推荐)

首先,你还是要先创建一个捷径App,导入JSBox提供的组件。然后再设置“添加到主屏幕”
image.png
如图,本人添加了俩个捷径。
效果图:
图标唤起jsbox.gif
如果你所在的环境比较嘈杂,不方便使用Siri唤醒,除了widget之外,使用桌面icon一键唤醒,也是比较推荐的方案。

4.扩展

整个脚本,我都是把线路参数,公交站参数等等直接写在脚本里的,直接做成二维码分享出去意义不大,毕竟每个人的查询需求是不同的。有需要的,可以下载脚本,根据公众号的网页抓包,得到你想要的线路和站台参数,修改完后再执行。
附上Demo,走过路过的朋友不妨可以star或者fork一下。

万变不离其宗,对于非苏州的朋友,可以各自查找所在城市相关的微信微博网站等等,找到相应的查询接口,JSON数据结构修改一下,就可以了。

5.总结

本人前后花了不到一天的时间,从0开始学习JSBox和捷径,直至做出最终效果。可以说上手难度还是很低的。整个过程也学习了很多,感受到了JSBox这个app很强大,值得深入研究。
完结,鼓掌散花!👏👏🌹🌹