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

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

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提供的控制元件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很強大,值得深入研究。 完結,鼓掌散花!????

相關文章