楠木軒

「蘋果小程式」App Clips和微信小程式區別在哪?

由 慕容亦凝 釋出於 科技

6 月 23 日,Apple Park 的觀眾席上空無一人,但此時一場特別的「科技春晚」正在上演。

在 2020 年的 WWDC 大會中,自 iOS 7 以來變動最大的一次更新 ——iOS 14 來了,AirPods Pro 有了黑科技,ARM Mac 也來了。但對小程式開發者來說,他們最關心的應該還是此次 WWDC 釋出的 App Clips 了。

「一個無需下載應用,就能使用 app 的功能。」這聽上去是不是和小程式有點相似,但這是 App Clips,也被一部分人稱為「蘋果小程式」。它是什麼?它和小程式有什麼不同?我們該怎麼開發 App Clips?

別急,一篇文章給你解答。

App Clips 從哪裡來?

App Clips(應用片段)作為 WWDC2020 上最值得關注的特性之一,由於缺乏官方示例,是使用者感知度最低的新功能。同時,因為和微信小程式過於相似的產品形態設定,也被部分開發者冠以「蘋果牌小程式」的暱稱。

官方對其的定義是 ——

App clips are a great way for users to quickly access and experience what your app has to offer. An app clip is a small part of your app that’s discoverable at the moment it’s needed. App clips are fast and lightweight so a user can open them quickly.

應用片段讓使用者可以快速體驗應用。一個應用片段是應用的一小部分,可以在需要的時候被發現。應用片段快速而輕巧,因此使用者可以快速開啟它們。

信達雅的翻譯就是:「無需下載,用完即走」。乍看之下確實像小程式。不過 App Clips 的起源,要從 2016 年 6 月說起。

▲ iMessage App

2016 年 6 月,WWDC2016 釋出了 iOS10,重磅介紹了升級後的 iMessage,其中,最值得一提的就是 iMessage 內的應用。透過這個特性,使用者可以在 iMessage 聊天窗口裡玩遊戲,效果和後來的微信群聊裡的小遊戲卡片一樣(只是要下載)。

iMessage 的這個新功能時間上比小遊戲早了近一年,我現在仍記得 2016 年的中秋節和小夥伴們在 iMessage 裡玩潛艇大戰的時光。

iMessage app 透過社交關係解決了服務發現的問題,這也是 App Clips 的核心使命。

從技術發展角度來看,App Clips 就是 iMessage app 的升級版本。它在聊天視窗傳送能力的基礎之上,增加了 NFC 近場開啟、掃碼開啟、網頁關聯開啟、地圖 POI 開啟等服務發現路徑,基本上涵蓋了實際生活中所有需要服務的場景。

App Clips 和微信小程式的存在,都是為了解決同一個問題,二者殊途同歸。這對開發者和使用者來說絕對是一件好事。

但就開發而言,App Clips 和微信小程式衣存在著方向上的差異。

微信小程式是 0 到 0.1 再到 1.0。開發者為提供一個服務,從頭開始開發小程式,實現了 0 到 0.1,使用者用完即走了,體驗很棒。但隨著業務壯大,開發者在面對 0.1 到 1.0 的問題上遇到了麻煩,於是微信小程式近兩年在這個問題上費了不少心思:程式碼包從 1MB 到 2MB 到 4MB 再到分包機制;小程式和 app 的互跳;放寬小程式和小程式的互跳;WebGL 的支援……

App Clips 則是從 1.0 到 0.1,是對現有 app 的一種改良,因此在開發上遇到的麻煩會少一些,下邊我們透過一個 Demo 感受一下。

App Clips 開發實戰

從技術的角度,App Clip 可以理解為一個 App 的 Extension,在開發 App Clip 之前,要有一個普通的 App 的專案。在這個示例中,我們基於知曉雲 iOS Demo BookShelf,一個簡單的書架應用來進行操作。在這個 Demo 中,我們讓 App Clip 擁有和原 BookShelf 一樣的功能。

第零步:開發環境要求

開發環境只需要 Xcode-beta 12 即可,無需 macOS 11。在這個示例中,開發環境為 macOS 10.15.5 + Xcode-beta 12。

第一步:建立一個 App Clip

在 XCode BookShelf 專案中,新建一個 Target,選擇 App Clip,點選下一步,如上圖所示,填入 Target 資訊。

Xcode 會自動配置以下內容:

  • 在 Signing & Capabilities 新建 On Demand Install Capable
  • AppClip.entitlements 屬性列表檔案,預設包含一個 key:com.apple.developer.parent-application-identifiers,值為包含原始 target 的 identifier 的陣列,demo 的 identifier 為 com.ifanr.BookShelf。
  • BooKShelfClip 的預設 identifier 以原始 target identifier 作為字首,後面加上 .Clip。在 BookShelfClip Target 中 identifier 為 com.ifanr.BookShelf.Clip。

第二步:(可以不)寫程式碼

首先,在 BookShelfClip 目錄下的 SceneDelete.swift 檔案的方法 func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) 中將 HomeView 作為初始啟動介面,程式碼如下:

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {<p></p>  let contentView = HomeView()<p></p>  if let windowScene = scene as? UIWindowScene {<p></p>    let window = UIWindow(windowScene: windowScene)<p></p>    window.rootViewController = UIHostingController(rootView: contentView)<p></p>    self.window = window<p></p>    window.makeKeyAndVisible()<p></p> }<p></p>}

HomeView 從哪裡來的呢?這就是 App Clip 開發上的便利:可以不寫程式碼。透過和原始 Target: BookShelf 共享檔案,BookShelfClip 可以直接使用 BookShelf 中已經寫好的 HomeView,如下圖:

第三步:執行

在 Xcode 中,選中 Product > Scheme > BookShelfClip,點選 Run,我們的 App Clip 就跑起來了。

App Clips 往哪裡去

由於目前的 Xcode-beta 版本,在匯入一些第三方庫時會報編譯錯誤。在這個 Demo 中,我們簡單演示瞭如何使用 SwiftUI(幾乎沒有寫程式碼)開發簡單的 App Clip,可以在 GitHub Repo 獲取。下一章節,我們將為大家演示:

  1. 整合知曉雲後端雲服務 SDK 的全功能 App Clip;
  2. 透過 URL、掃碼等方式開啟 App Clip 的配置、實際效果。

下一章,我們還會聊一聊更多的細節,比如 App Clips 只能維持 8 小時的通知機制。恰好微信小程式在灰度釋出幾大特性,和 App Clips 的特性結合著看,這還有不少值得思考和展望的地方。

下期見。