动态

详情 返回 返回

開發一個 App Clip 並不難！我們立馬上開發教程 - 动态 详情

作者｜何世友、彭權華

在 2020 年 6 月 23 日的 WWDC 大會中，蘋果發佈了 App Clips 。

App Clip（官方翻譯：輕 App；民間翻譯：「蘋果」小程序），是主 app 輕量級的版本，旨在在特定場景為用户提供快速便捷的體驗。

如果你在上班路上經過一家咖啡店想購買一杯咖啡，但發現排隊下單付款的人很多，此刻你只需要使用 iPhone 自帶的掃碼工具掃描咖啡商店的 App Clip 二維碼或 NFC 標籤，就可以購買一杯咖啡，無需下載安裝咖啡商店的 app。


圖片來源：蘋果官網 

這應用場景聽起來是不是跟微信小程序很像？

是的，於是我們在 App Clips 發佈後就立刻進行了 App Clips 和微信小程序的對比和實操（點此閲讀詳細內容）。

我們發現，App Clips 和微信小程序的存在都是為了解決同一個問題。但就開發而言，App Clips 和微信小程序亦存在着方向上的差異。

微信小程序是 0 到 0.1 再到 1.0。開發者為提供一個服務，從頭開始開發小程序，用户用完即走，體驗很棒。App Clips 則是從 1.0 到 0.1，是對現有 app 的一種改良，因此在開發上遇到的麻煩反而會少一些。

下面，我們就針對 App Clip 幾個重要特性進行詳細説明，並以 App Clip demo 為例，講一講開發的那些事。無論你是基於實際業務需要，或者學習、探索新事物的需求，只要具備一定的開發基礎，通過本教程，也能輕鬆搞定一個 App Clip。

App Clip 的技術限制

App Clip 僅限應用於特定場景，即儘可能快地完成一個任務，即用即走。你可以把它看作主 app 的核心功能應用，對於複雜的任務應該在其對應的主 app 完成，因此某些功能被禁止在 App Clip 中使用。

安裝包大小 10M 以內

當彈出 App Clip Card 時會立即下載 App Clip，安裝包大小的限制保證了用户體驗——當用户打開 App Clip 時大概率已經下載好。

不能使用指定 Framework

Assets Library, CallKit, CareKit, CloudKit, Contacts, Contacts UI, Core Motion, File Provider, File Provider UI, HealthKit, HomeKit, Media, Player, Messages, Message UI, PhotoKit, ResearchKit, SensorKit, Speech

以上 Framework 不能在 AppClip 使用，若使用了在編譯時不會報錯，而是在運行時報錯或者返回錯誤的結果。

與用户隱私相關操作

  1. 不能跟蹤用户信息，也不能通過 identifierForVendor 來獲取用户唯一標識。
  2. 不能持續地獲取用户位置，每次使用位置需要請求用户授權，次日凌晨 4:00，會自動關閉授權。再次使用位置時，需要用户重新授權。
  3. 只允許 App Clip 和其對應的主 app 通信，不允許和其他 app 進行通信，這就導致微信登錄分享支付等功能在 App Clip 裏使用不了。
  4. 不能訪問蘋果音樂、多媒體，通訊錄，文件，運動健康，相冊等數據。

其他複雜任務

  1. 後台活動：網絡請求、位置更新等
  2. 藍牙連接
  3. App extensions
  4. URL schemes
  5. 內購（In-app purchases）（區別蘋果支付 Apple Pay，在 App Clip 是能夠使用蘋果支付的）

App Clips 的消息推送

微信小程序不能通過 Push 的方式觸達用户曾讓開發者憂心忡忡。而手機廠商推出的系統級應用在這方便可以給開發者更多的底氣，不管是蘋果的 App Clips 還是國產手機生態的快應用，服務的消息推送能力都是吸引開發者的重要能力。

消息推送在 App Clip 的應用分兩種場景：短時間內推送和長時間內的推送。（查看官方文檔）

短時間內推送

用户在啓動 App Clip 後，8 小時內可以收到消息推送。比如用户在 App Clip 購買了一杯咖啡後就退出了 App Clip，當咖啡準備好了，用户就會收到一個「咖啡已準備好」的推送。這方式只需要在 Info.plist 屬性文件中添加 NSAppClip Key，並將 NSAppClipRequestEphemeralUserNotification 設置為 true，就能默認獲取消息推送的權限。

長時間內推送

用户在 App Clip 完成一個任務後，可能過了幾天才會收到推送。比如用户在 App Clip 租了輛車，租期為 3 天，到期後會用户收到「該還車了」的推送。這種方式和普通 app 的消息推送一樣，都需要獲取用户的推送授權。

使用 MinCloud 創建一個 App Clip

接下來將演示如何使用 知曉雲 MinCloud 快速創建一個動態數據服務的 App Clip。該 Clip 主要展示了一個產品列表，點擊產品即可跳轉到產品詳情頁。通過集成 MinCloud 從知曉雲獲取產品信息，最後為該 Clip 生成一個二維碼，用户只需使用 iOS 14 的掃碼工具掃描二維碼，即可跳轉到 Clip。

創建 App Clip Target

在已存在的 SugarDemo 工程創建一個 App Clip Target，並命名為 SugarClip。

這時在工程目錄中多了個 SugarClip 目錄，接下來我們就可以在這裏實現 App Clip 了。

導入 MinCloud

通過 CocoaPods 集成 MinCloud，打開 Podfile 文件，添加以下內容：

platform :ios, '11.0'
 
target 'SugarClip' do
 use_frameworks!
 
 pod 'MinCloud', :git => 'https://github.com/ifanrx/hydrogen-ios-sdk.git'
 pod 'Moya', '~> 13.0'
 pod 'SnapKit'
 pod 'Kingfisher'
 
end
 
target 'SugarDemo' do
 use_frameworks!
 
 pod 'MinCloud',:git => 'https://github.com/ifanrx/hydrogen-ios-sdk.git'
 pod 'SnapKit'
 pod 'Kingfisher'
 
end

添加完後，執行 pod install 安裝。

安裝好 MinCloud 後在工程中導入 MinCloud，打開 Sugar Clip 的 AppDelegate.swift 文件，在文件頂部添加 import MinCloud，並在 application(_: didFinishLaunchingWithOptions:) 方法內添加：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
 // Override point for customization after application launch.
 
 BaaS.register(clientID: "fdc4feb5403a985fe681") // 註冊 clientid
 BaaS.isDebug = true // 是否打印日誌
 return true
}

獲取產品數據

Product 結構

首先創建一個 Product 結構，用於表示產品信息。

struct Product: Decodable {
 public var id: String                  // 產品 id
 public var name: String?               // 產品名稱
 public var participantCount: Int?      // 參與討論人數
 public var coverImage: String?         // 封面圖
 public var rating: Double?             // 產品評分
 public var brief: String?              // 產品簡介
 public var description: String?        // 產品描述
}

獲取產品列表

func loadProductList() {
 let table = Table(tableId: "105766")
 table.find { [weak self] (recordList, error) in
 if let list: List<Product> = recordList?.listInfo.decoded() {
 self?.products = list.objects
 self?.tableView.reloadData() // 刷新產品列表
 }
 }
}

Table 對應 MinCloud 的表結構，通過表 id 就可以操作對應表數據。使用 find 操作來獲取產品表所有產品記錄，獲取產品記錄後，將其解碼為 List 對象。

獲取產品詳情

func loadProduct() {
 let table = Table(tableId: "105766")
 table.get(productId) { [weak self] (record, error) in
 if let product: Product = record?.recordInfo.decoded() {
 self?.product = product
 self?.displaySubviews() // 展示產品詳細信息
 }
 }
}

使用 get 操作指定產品的 id 獲取產品的所有信息，獲取產品記錄後，將其解碼為 Product 對象。

產品頁面

在項目中創建了 ProductCell、RatingLabel、BriefView 等視圖控件，分別顯示產品列表項、產品評分、產品簡介等信息。而這些控件可以在主 App 和 App Clip 複用。因此在 SugarDemo 目錄中創建了需要複用的組件，並將對應的文件的 Target Membership 中勾選 SugarDemo 和 SugarClip 即可複用。

喚醒 App Clip

開發完 App Clip 後，我們可以點擊 Smart app Banner，掃碼二維碼或 NFC 標籤，點擊 Siri 獲取基於位置的建議，短信等方式來喚醒（invacation）App Clip。

在 AppClip 可以被喚醒之前需要配置 Launch Experience，即給 App Clip 配置一個 URL 和 App Clip Card 信息。在開發階段可以直接配置 Local Experience 或者在 testflight 上進行配置。App Clip 準備發佈時，需要在 app store connect 上進行配置。

本文主要介紹 Local Experience 方式，其他方式可參考蘋果開發文檔。

  1. 首先將 SugarClip 通過 Xcode 在手機運行起來。
  2. 打開手機【設置】-【開發者】-【Local Experience】-【Register Local Experience】

  • 填入 URL PREFIX，打開任何以 URL PREFIX 為前綴的 URL，都會被當做打開 App Clip 來處理。
  • 填入 Clip Bundle Id。
  • 填入 Title、Subtitle，選擇一張圖片，這些信息將會顯示在 App Clip Card 上。
  1. 步驟 2 的 URL PREFIX 編碼成一個二維碼(https://www.qr-code-generator...

  1. 使用控制面板的二維碼掃描器掃描，將會彈出 App Clip Card。

  1. 點擊查看，進入 App Clip。

至此，我們已經完成了一個 App Clip 的開發。

總結

開發難度：

App Clip 從技術選型上是面向 iOS 開發者的，對 iOS 開發者來説，開發 App Clip 可以簡單到修改點配置即可發佈。而如果是小程序開發者想要入坑，有兩條路可以走：

  1. 學習 iOS 原生開發；
  2. 等待跨端的框架適配 App Clip。

挑戰：

App Clip 現階段只允許使用 Sign in with Apple 蘋果登錄、Apple Pay 蘋果支付，無法集成微信登錄、微信支付等線下服務場景主流的第三方能力。這對想要使用 App Clip 優化線下服務體驗來説是個挑戰，畢竟國內開通了 Apple Pay 的不是多數。希望 App Clip 團隊早日推出更好的解法。

紅利：

App Clip 體驗輕巧優秀，開發者可通過 App Clip 為主體 app 做一個試玩試用版本，讓用户快速體驗，以降低用户安裝門檻，提高整體轉化率。

通過這篇文章，希望你也能高效的開發一個 App Clip。

相關閲讀
  • App Clips 和微信小程序區別在哪？我們做了一次上手實操
  • iOS 14 更新後，我們立馬體驗了蘋果「小程序」！
小程序 , 前端 , 移動web開發 , 蘋果開發 , app
user avatar qingzhan 头像 chongdianqishi 头像 leexiaohui1997 头像 febobo 头像 woniuseo 头像 imba97 头像 zhulongxu 头像 bugDiDiDi 头像 kongsq 头像 tanggoahead 头像 milton 头像 geeklab 头像
点赞 104 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.