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

搶手的哥發表於2019-01-30
iOSJS

1.起源

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

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

1.先開啟微信；
2.找到公眾號；
3.點選公眾號第二個tab“公交查詢”撥出選單；
4.再點開“公交實時查詢”的選單按鈕，才能開啟查詢的網頁；
5.輸入要查詢的公交線路；
6.點選搜尋出的結果；
複製程式碼

經歷這繁瑣的6步，才能查詢到執行情況。Emmmm到這裡是不是覺得每天出門第一句，先說一聲xxx。

WTF.png

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

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，來調介面。但是不用捷徑直接處理的原因如下：

捷徑截圖.png
如上圖所示，用程式猿的眼光來看: 捷徑本質就是把某一個功能，不用程式碼，而是用圖形化（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中使用

直接執行指令碼，來看效果:

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很強大，值得深入研究。 完結，鼓掌散花！????

相關文章