楠木軒

「蘋果小程序」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 的特性結合着看,這還有不少值得思考和展望的地方。

下期見。