iOS使用JSBox實現一鍵查詢公交

1.起源

做者本人吊絲碼農，座標蘇州，一把年紀了上下班還要擠公交，每次出門以前，都習慣性的查詢一下目前公交距離本身還有多少站路，以肯定走路的步伐快慢[捂臉哭]。

在蘇州的朋友可能會知道，查詢各路公交有個專門的微信公衆號，因此天天出門時要查公交的時候，還得

1.先打開微信；
2.找到公衆號；
3.點擊公衆號第二個tab「公交查詢」呼出菜單；
4.再點開「公交實時查詢」的菜單按鈕，才能打開查詢的網頁；
5.輸入要查詢的公交線路；
6.點擊搜索出的結果；
複製代碼

經歷這繁瑣的6步，才能查詢到運行狀況。Emmmm到這裏是否是以爲天天出門第一句，先說一聲xxx。

其實說白了，咱們要解決的問題，或者說需求就是用最簡單的步驟，獲知最近一班你想要乘坐的公交，距離本身還有多少站路？

2.分析

2.1獲取數據

通過前幾步複雜的步驟，無非就是打開了一個專門的網頁，查詢相應的接口。打開強大的Charles，設置手機代理抓包，抓到以下幾個接口：

1.網頁地址 蘇州公交110南線示例 請求方式：GET app.2500.tv/bus/lineInf… 一個get請求後面接了倆參數，可是隻能在微信內嵌瀏覽器內打開（多是爲了獲取用戶openId，用於統計）。

2.查詢接口 app.2500.tv/bus/api_lin… 請求方式：POST 入參數：lineID 返回：

{
    "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，來調接口。可是不用捷徑直接處理的緣由以下：

如上圖所示，用程序猿的眼光來看: 捷徑本質就是把某一個功能，不用代碼，而是用圖形化（GUI）的界面來實現。 因此，對於通常大衆用戶，編程小白來講，用捷徑去完成一些不復雜的工做流，仍是能夠的。比方說，相應一條指令，打開某個app，或者撥打某個電話等等。 可是，想對於發送post請求，json數據解析，業務需求處理，這種相對高級的操做，用圖形化界面來弄，會變的很是的複雜。 總結一下就是： 1.GUI操做界面，不太適合複雜度高，定製化高的工做流,並且是在手機上操做 ； 2.仍是由於GUI的緣由，不方便調試（debug），工做效率就顯得很低下；

2.3展現數據

UI展現，直接利用了JSBox提供的控件label 和 list。 將第2.2中處理好的數據展現出來，展現出:

1.還剩餘多少站路

2.還剩餘那些站。

直接照着文檔一步一步敲，並且Masonry似的佈局方式對iOS開發者很友好，就能夠輕輕鬆鬆搭UI界面。

3.最終效果

3.1 在JSBox中使用

直接運行腳本，來看效果:

能夠看出能達到查詢公交的效果，最後來實現如何實現***一鍵查詢***

3.2 經過iOS鎖屏widget（推薦）

廢話不說上圖

鎖屏widget裏一鍵點一下便可，都不須要解鎖，很方便。

3.3 經過Siri喚起（推薦）

經過Siri，也能實現一鍵查詢。不過經過Siri實現的方式有兩種。

3.3.1 Siri喚起JSBox執行腳本

在JSBox App裏，添加方式有以下兩種： 腳本設置頁面 -> 添加爲 -> 添加爲 Siri 系統設置頁面 -> Siri 與搜索 -> 在捷徑中找到相應的腳本 效果圖：

3.3.2 Siri喚起捷徑執行JSBox

固然須要你先建立一個捷徑,而且你要在捷徑裏，添加一個JSBox提供的組件。而後再設置Siri指令。

效果圖：

使用Siri的喚起的好處就是， 你都不須要動手點亮屏幕，直接一句「嘿，Siri，我要下班」就可以實現查詢。 固然，前提是手機要先設置好Siri喚起，以及手機不處於低電量模式。

3.3.3 經過桌面圖標喚起（比較推薦）

首先，你仍是要先建立一個捷徑App，導入JSBox提供的組件。而後再設置「添加到主屏幕」

如圖，本人添加了倆個捷徑。 效果圖：

若是你所在的環境比較嘈雜，不方便使用Siri喚醒，除了widget以外，使用桌面icon一鍵喚醒，也是比較推薦的方案。

4.擴展

整個腳本，我都是把線路參數，公交站參數等等直接寫在腳本里的，直接作成二維碼分享出去意義不大，畢竟每一個人的查詢需求是不一樣的。有須要的，能夠下載腳本，根據公衆號的網頁抓包，獲得你想要的線路和站臺參數，修改完後再執行。 附上Demo，走過路過的朋友不妨能夠star或者fork一下。

萬變不離其宗，對於非蘇州的朋友，能夠各自查找所在城市相關的微信微博網站等等，找到相應的查詢接口，JSON數據結構修改一下，就能夠了。

5.總結

本人先後花了不到一天的時間，從0開始學習JSBox和捷徑，直至作出最終效果。能夠說上手難度仍是很低的。整個過程也學習了不少，感覺到了JSBox這個app很強大，值得深刻研究。 完結，鼓掌散花！👏👏🌹🌹