捷徑小課堂 01 | 製作一個獲取網頁中應用的捷徑

mp.weixin.qq.com

關於本節課

前排預告：今天的課程中你將從零開始製作一個獲取網頁中提到的所有 iOS 應用的捷徑。你可以在任何時候翻到最後下載本次課程捷徑的完整版本。

本節課涉及的課外知識（只需理解概念）：

• HTML：瀏覽器看到的網頁內容，例如瀏覽器會把 HTML <b>文字</b> 顯示為加粗 文字；
• URL：即網頁地址，如果一個網站是一所房子，URL 就是門牌號碼；
• 正則表達式：一組固定規則組成的表達式。比如規則 {n} 表示匹配 n 次，那麼正則表達式 a{2} 無法匹配 candy，可以匹配 caandy 中的 aa，也可以匹配 caaaaandy 中的頭兩個 a。

給捷徑取個名字

萬事開頭難——所以我選擇了最簡單的一步作為開始：給自己的捷徑修改名字和圖標。「編輯」按鈕並不明顯，我觀察了一番才發現它在哪裡：導航欄「完成」按鈕下方右側的圖標按鈕。

編輯完名稱和圖標，我們已經做完一半了，因為良好的開端是成功的一半！

整理思路 ??

獲取網頁中的應用，只需要三個步驟：

1. 獲得網頁的 HTML
2. 找到 HTML 中的應用鏈接，獲得鏈接中的應用 ID
3. 根據應用 ID，獲取應用

我的一個習慣：寫注釋。找到「注釋」操作，把這三步寫下來。

然後就可以一步一步逐步攻破了。

獲得 HTML 內容

我們的目標是通過 URL 得到 HTML。在捷徑底部搜索「URL」，馬上看到一個「獲取 URL 內容」操作，幸福來得太突然，馬上添加：

它的介紹里寫著需要一個 URL 作為輸入，為了方便測試，我們先用一個固定的鏈接：

https://sspai.com/post/47715

再添加一個「URL」操作，並將它拖拽至「獲取 URL 內容」上方，複製上面的鏈接粘貼進去：

接下來我需要看一看獲取到的 URL 內容到底是什麼。搜索「顯示」，找到「顯示結果」操作，將它添加到捷徑。編輯「顯示結果」的內容，選擇「URL 的內容」，運行捷徑來看看我們獲取到的內容——竟然是純文本，並不是 HTML。

為了解析超鏈接，我們必須獲取到 HTML。在捷徑中搜索「HTML」，用「用多信息文本製作 HTML」試試：

將上一步添加的「顯示結果」操作拖到「用多信息文本製作 HTML」的下方，並將內容替換為「來自多信息文本的 HTML」，再次運行捷徑看看結果：

太棒了，這正是我需要的。至此，我們已經完成輸入一個 URL 並讀取它的 HTML 內容了。

找到 App ID

在一段字元串中找到特定的部分，我喜歡用正則表達式來實現：

//http://itunes.apple.com(?:/[a-z]{2})?/app(?:/[S]*?)?/id([0-9]{9,12})

現在我們只需要知道這一段規則能找到文本中的應用鏈接，並提取 ID。以後我們再學習神奇的正則表達式。為了在捷徑中使用這個表達式，搜索「正則」，看到「匹配文本」操作正合我意。

添加「匹配文本」操作到「用多信息文本製作 HTML」下方，複製上文的正則表達式並粘貼到「匹配文本」的模式中。將「顯示結果」操作拖到「匹配文本」下方，將內容替換為「匹配文本」，運行捷徑查看我們獲取到的匹配文本：

在正則表達式中，我已經把 ID 提取出來了，因此我們增加一個「獲取匹配文本的組」操作，只需要使用默認值即可。再次修改「顯示結果」操作的位置和內容，運行捷徑查看結果：

看來很好！不……等等，有兩個一樣的 ID，這裡我們先無視它，下一節課我們會講到如何去除重複的列表項目。至此，我們已經完成解析 HTML 中提到的應用 ID 了。

顯示 App 信息

獲得了應用 ID 之後怎麼顯示出來呢？在捷徑中搜索「應用」，發現「搜索 App Store」這個神奇的操作：

因為我們在上一步的「獲取匹配文本的組」操作中輸出是一個數組，我們需要對每一項進行處理。在捷徑中搜索「重複」，發現有一個「為每個項目重複」操作。因此我們：

1. 添加「為每個項目重複」操作；
2. 將「搜索 App Store」操作拖到「為每個項目重複」和「結束重複」之間；
3. 把「搜索 App Store」第一行的「搜索」處選擇「重複項目」，把第二行的「搜索條件」設置為「產品 ID」；
4. 把我們最愛的「顯示結果」操作拖到「搜索 App Store」下方，將顯示值修改為「App Store 應用」；
5. 再次運行捷徑——恭喜你拿到了應用詳情！

獲取到一個應用列表之後我想用一個列表顯示，所以搜索「列表」試試，發現「從列表中選取」操作：

將它添加到捷徑後，刪除上一步的「顯示結果」操作，直接運行：

不但顯示出來了，還顯示得很好看。最後怎麼在 App Store 中打開好呢？因為每一項中有鏈接，直覺告訴我用 URL 打開它。在搜索中輸入「URL」，選擇「打開 URL」操作，添加到捷徑，讓它保持在「從列表中選取」下方就好。把我們的「從列表中選取」提示改為「在 App Store 打開」，再次運行捷徑，在彈出列表後選擇第一項：

完美，我們已經完成了一開始在注釋中寫的所有步驟！可以開一瓶冰可樂慶祝！

使用動態的 URL

我希望做成在網頁分享中可以直接調用的捷徑，所以我們打開捷徑設置中的「在共享表單中顯示」，打開之後下方會顯示「接收的類型」。點進「接收的類型」，默認是全選的。先點擊右上角的「取消全選」，再找到「Safari 瀏覽器網頁」勾選。

接下來，把我們頂部「URL」操作中固定的字元串刪除，在輸入狀態下點擊鍵盤上方的魔法棒，選擇「捷徑輸入」變數（如果你沒有看到，往上放滾動一些，它在最頂部）：

在 Safari 中打開一個網頁，通過分享打開捷徑並運行試試：

Duang，大功告成！最後，我們把第一個注釋的內容改成自己的大名，點擊頂部的分享按鈕，選擇「拷貝 iCloud 鏈接」，就可以分享給朋友們炫耀了。

小結

先寫出來思路是最重要的：不管實現什麼功能我都會這樣做，感謝我的大學 C 語言老師。感謝「顯示結果」操作，我的最愛沒有之一。假如想用捷徑實現一個 xx 操作：

1. 先在捷徑中搜索盡量簡短的關鍵詞，比如：「URL」，「HTML」，「列表」；
2. 再去搜索引擎搜索，用空格分割多個關鍵詞能得到更加有效的結果，比如：「捷徑 打開 URL」，「捷徑 獲取 html」；
3. 終極大招：搜索「Workflow 關鍵詞」，因為 Shortcut 的前身是 Workflow，關於它的討論會更多，比如：「workflow search app」，「workflow url to html」；
4. 究極大招：加入我們的捷徑交流群（添加微信好友 PriceTagBot 回復「加群」）。

課後習題

還記得嗎？使用最開始固定的 URL 時，我們的捷徑顯示的應用列表有重複項目，下節課我們會優化它，去掉重複內容。在這之前，同學們請自己試試看吧！交作業方式：解析下方二維碼，將你的捷徑鏈接回復給我。

下載完整捷徑

捷徑小課堂第一講 | 捷徑社區?

sharecuts.cn

我虛心接受關於小課堂的任何建議與意見，歡迎大家留言下課，同學們再見??

捷徑交流

微信群：微信添加好友「PriceTagBot」回復「捷徑」自動加入

Telegram 群：https://t.me/sharecuts

微信公眾號：PriceTag發現好應用