App Clips 新特性
文章內(nèi)容整理自 Session 《What's new in App Clips》,可觀看視頻獲取第一用戶體驗。
蘋果版小程序 App Clips 在 WWDC20 推出后,至念已快一年時間了。作為 iOS 14 的一大亮點功能,其目標是提供快速且專注的用戶體驗。用戶可以通過 App Clips 來體驗應用的部分功能,然后再確定是否下載應用。而許多公司和開發(fā)者也紛紛推出了自己的 App Clips,如 Firi Games 的 Phoenix 2

還有 TikTok 的 App Clips,它可以通過 iMessage 中的分享來打開

以及其它優(yōu)秀應用的 App Clips,都以適合自己的方式(Safari、iMessage、二維碼、NFC 或者 App Clip 碼)來向用戶展示應用的基本功能。

這個 Session 分享了關于 App Clips 的三個新特性:
? Safari 和 SafariViewController 中的 App Clip Card
? 通過本地體驗(local experiences)來測試 App Clip
? App Clip 碼
App Clip Card
打開 App Clips 有多種方法,上面的圖中就列出了以往打開 App Clips 的方式,如 Safari、iMessage、二維碼、NFC 或者 App Clip 碼。
之前我們可以使用 apple-itunes-app 標簽在 Safari 或 Safari View Controller 的頂部橫幅中顯示入口。

而在 iOS 15 中,我們可以將標簽配置為在頁面中間顯示全尺寸的 App Clip Card。如果選擇 View in Safari,那么 Safari 會記住這一選項,下次再加載頁面時不再顯示這個卡片,而是會顯示在頂部橫幅中。

要選擇卡片模式,只需要將 app-clip-display 添加到標簽中,并將值設置為 card。

對于使用 SafariViewController 呈現(xiàn) Web 內(nèi)容的應用程序,現(xiàn)在可以將卡片作為應用程序 UI 的一部分,用戶可以直接從應用程序中啟動 App Clip。

App Clip Card 會顯示 App Clip 的標題、副標題、可執(zhí)行的操作以及用于展示產(chǎn)品的標題圖片。我們可以在 App Store Connect 中創(chuàng)建 App Clip Card,按照步驟一步步來就可以。
使用本地體驗來測試 App Clip
對于用戶來說,他們可以通過上述的各種方式來體驗 App Clip,包括 App Clip Card。但對于開發(fā)人員來說,我們可能會遇到這樣的問題:在開發(fā) App Clip 時,可能還沒有注冊任何 App Clip,而我們又確實想測試整個流程。這時我們就可以使用本地體驗,以在自己的測試設備中來體驗 App Clip。
要創(chuàng)建本地體驗,我們可以在設備的設置應用中,進入開發(fā)者設置,選擇本地體驗。在這里指定 App Clip 的名稱、標題、URL 前綴、bundleID,然后選擇照片庫中的圖像作為標題圖像。

然后,我們可以掃描二維碼或 NFC 標簽來啟動本地體驗。
本地體驗支持 QR、NFC、App Clip Code、Safari 和 Messages,但不會出現(xiàn)在地圖、位置建議和 Spotlight 搜索中。另外,只能為 Xcode 安裝的 App Clips 或者 beta 測試的 App Clips 指定本地體驗。

App Clip 碼
App Clip 碼類似于小程序碼,是蘋果設計的獨有的視覺碼,是發(fā)現(xiàn) App Clip 的最佳方式。在 iOS 14.3 之后可以獲得。

每個 App Clip 碼會對一個唯一的 URL 進行編碼,并指向 App Clip。iOS 會對 URL 進行解碼,然后調(diào)起 App Clip。App Clip 本身不需要關注 App Clip 碼。

有兩種類型的 App Clip 碼:NFC 集成的或僅可掃描的。
對于 NFC 集成碼,用戶可以通過點擊或掃描來交互,這類碼適用于用戶可以輕松觸達的場景,如自動售貨機、餐桌上等,而類似于電子郵件中的 App Clip 碼,則只適用于掃描方式。

我們可以自定義 App Clip 碼的模式,如選擇前景色或背景色,隱藏 App Clip 徽標等等。

創(chuàng)建 App Clip 碼的方式也有兩種:
? 使用 developer.apple.com 的 App Clip Code Generator 工具

? 直接從 App Store Connect 下載

在測試或開發(fā)時,或者需要自動生成碼時,建議使用命令行工具(App Clip Code Generator)。

最后是創(chuàng)建 App Clip 碼的一些最佳實踐:
? 將 App Clip 碼放在平坦的表面上
? App Clip 碼應該垂直放置,確保不要旋轉(zhuǎn) App Clip 碼本身和中間的徽標

? 確保 App Clip 碼 足夠大,至少 1 英寸寬

? 確保良好的能見度,沒有被遮擋、損壞或與其他代碼放置得太近

? 確保信息簡明扼要,并帶有明確的目標

小結(jié)
現(xiàn)在,我們知道如何生成不同風格的 App Clip 碼,并了解了在 Safari 和 SafariViewController 中使用 App Clip Card 來展示 App Clip,以及如何去測試。趕緊來試試吧。
-End-
最近有一些小伙伴,讓我?guī)兔φ乙恍?nbsp;面試題 資料,于是我翻遍了收藏的 5T 資料后,匯總整理出來,可以說是程序員面試必備!所有資料都整理到網(wǎng)盤了,歡迎下載!

面試題】即可獲取
