cover_image

开发一个 App Clip 并不难!我们立马上开发教程

小程序知晓云App Clip开发实战
知晓程序

<p>在 2020 年 6 月 23 日的 WWDC 大会中,苹果预告了 App Clips 。</p> <p>App Clip(官方翻译:轻 App;民间翻译:「苹果」小程序),是主 app 轻量级的版本,旨在在特定场景为用户提供快速便捷的体验。</p> <p>如果你在上班路上经过一家咖啡店想购买一杯咖啡,但发现排队下单付款的人很多,此刻你只需要使用 iPhone 自带的扫码工具扫描咖啡商店的 App Clip 二维码或 NFC 标签,就可以购买一杯咖啡,无需下载安装咖啡商店的 app。</p> <p><img class="size-full wp-image-1368395 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6e48dfa29.png" alt="" srcset="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6e48dfa29.png 717w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6e48dfa29-360x153.png 360w" sizes="(max-width: 717px) 100vw, 717px" /></p> <div class="editor-image-source"> <p>▲图片来源:苹果官网</p> </div> <p>这应用场景听起来是不是跟微信小程序很像?</p> <p>是的,于是我们在 App Clips 发布后就立刻进行了 App Clips 和微信小程序的对比和实操。(<a href="https://mp.weixin.qq.com/s/AjE0ayRDDPqKmerQAYaXdw">点此查看详细内容</a>)</p> <p>我们发现,App Clips 和微信小程序的存在都是为了解决同一个问题。但就开发而言,App Clips 和微信小程序亦存在着方向上的差异。</p> <p>微信小程序是 0 到 0.1 再到 1.0。开发者为提供一个服务,从头开始开发小程序,用户用完即走,体验很棒。App Clips 则是从 1.0 到 0.1,是对现有 app 的一种改良,因此在开发上遇到的麻烦反而会少一些。</p> <p>下面,我们就针对 App Clip 几个重要特性进行详细说明,并以 App Clip demo 为例,讲一讲开发的那些事。无论你是基于实际业务需要,或者学习、探索新事物的需求,只要具备一定的开发基础,通过本教程,也能轻松搞定一个 App Clip。</p> <h3>App Clip 的技术限制</h3> <p>App Clip 仅限应用于特定场景,即尽可能快地完成一个任务,即用即走。你可以把它看作主  app 的核心功能应用,对于复杂的任务应该在其对应的主 app 完成,因此某些功能被禁止在 App Clip 中使用。</p> <h4>安装包大小 10M 以内</h4> <p>当弹出 App Clip Card 时会立即下载 App Clip,安装包大小的限制保证了用户体验——当用户打开 App Clip 时大概率已经下载好。</p> <h4>不能使用指定 Framework</h4> <p>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</p> <p>以上 Framework 不能在 AppClip 使用,若使用了在编译时不会报错,而是在运行时报错或者返回错误的结果。</p> <h4>与用户隐私相关操作</h4> <ol> <li>不能跟踪用户信息,也不能通过 identifierForVendor 来获取用户唯一标识。</li> <li>不能持续地获取用户位置,每次使用位置需要请求用户授权,次日凌晨 4:00,会自动关闭授权。再次使用位置时,需要用户重新授权。</li> <li>只允许 App Clip 和其对应的主 app 通信,不允许和其他 app 进行通信,这就导致微信登录分享支付等功能在 App Clip 里使用不了。</li> <li>不能访问苹果音乐、多媒体,通讯录,文件,运动健康,相册等数据。</li> </ol> <h4>其他复杂任务</h4> <ol> <li>后台活动:网络请求、位置更新等</li> <li>蓝牙连接</li> <li>App extensions</li> <li>URL schemes</li> <li>内购(In-app purchases)(区别苹果支付 Apple Pay,在 App Clip 是能够使用苹果支付的)</li> </ol> <h4>App Clips 的消息推送</h4> <p>微信小程序不能通过 Push 的方式触达用户曾让开发者忧心忡忡。而手机厂商推出的系统级应用在这方便可以给开发者更多的底气,不管是苹果的 App Clips 还是国产手机生态的快应用,服务的消息推送能力都是吸引开发者的重要能力。</p> <p>消息推送在 App Clip 的应用分两种场景:短时间内推送和长时间内的推送。(<a href="https://developer.apple.com/documentation/app_clips/enabling_notifications_in_app_clips">官方文档</a>)</p> <h5>短时间内推送</h5> <p>用户在启动 App Clip 后,8 小时内可以收到消息推送。比如用户在 App Clip 购买了一杯咖啡后就退出了 App Clip,当咖啡准备好了,用户就会收到一个「咖啡已准备好」的推送。这方式只需要在 Info.plist 属性文件中添加 NSAppClip Key,并将  NSAppClipRequestEphemeralUserNotification 设置为 true,就能默认获取消息推送的权限。</p> <h5>长时间内推送</h5> <p>用户在 App Clip 完成一个任务后,可能过了几天才会收到推送。比如用户在 App Clip 租了辆车,租期为 3 天,到期后会用户收到「该还车了」的推送。这种方式和普通 app 的消息推送一样,都需要获取用户的推送授权。</p> <h3>使用 MinCloud 创建一个 App Clip</h3> <p>接下来将演示如何创建一个 App Clip。该 Clip 主要展示了一个产品列表,点击产品即可跳转到产品详情页。通过集成 MinCloud 从知晓云获取产品信息,最后为该 Clip 生成一个二维码,用户只需使用 iOS 14 的扫码工具扫描二维码,即可跳转到 Clip。</p> <h4>创建 App Clip Target</h4> <p>在已存在的 SugarDemo 工程创建一个 App Clip Target,并命名为 SugarClip。</p> <p id="FpNomHH"><img class=" wp-image-1368407 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6f7e3ac4b.png" alt="" width="728" height="500" srcset="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6f7e3ac4b.png 1343w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6f7e3ac4b-360x247.png 360w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6f7e3ac4b-768x527.png 768w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6f7e3ac4b-1024x702.png 1024w" sizes="(max-width: 728px) 100vw, 728px" /></p> <p id="wrBYtGi"><img class="size-full wp-image-1368405 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6f5b8c839.png" alt="" srcset="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6f5b8c839.png 730w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6f5b8c839-360x259.png 360w" sizes="(max-width: 730px) 100vw, 730px" /></p> <p>这时在工程目录中多了个 SugarClip 目录,接下来我们就可以在这里实现 App Clip 了。</p> <p id="hqSQebl"><img class="size-full wp-image-1368409 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6f8f45335.png" alt="" /></p> <h4>导入 MinCloud</h4> <p>通过 CocoaPods 集成 MinCloud,打开 Podfile 文件,添加以下内容:</p> <pre><code>platform :ios, '11.0'   target 'SugarClip' do   use_frameworks!     pod 'MinCloud', :git =&gt; 'https://github.com/ifanrx/hydrogen-ios-sdk.git'   pod 'Moya', '~&gt; 13.0'   pod 'SnapKit'   pod 'Kingfisher'   end   target 'SugarDemo' do   use_frameworks!     pod 'MinCloud',:git =&gt; 'https://github.com/ifanrx/hydrogen-ios-sdk.git'   pod 'SnapKit'   pod 'Kingfisher'   end</code></pre> <p>添加完后,执行 pod install 安装。</p> <p>安装好 MinCloud 后在工程中导入 MinCloud,打开 Sugar Clip 的 AppDelegate.swift 文件,在文件顶部添加 import MinCloud,并在 application(_: didFinishLaunchingWithOptions:) 方法内添加:</p> <pre><code>func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -&gt; Bool {     // Override point for customization after application launch.               BaaS.register(clientID: "fdc4feb5403a985fe681") // 注册 clientid     BaaS.isDebug = true // 是否打印日志     return true }</code></pre> <h4>获取产品数据</h4> <p><strong>Product 结构</strong></p> <p>首先创建一个 Product 结构,用于表示产品信息。</p> <pre><code>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?        // 产品描述 }</code></pre> <p><strong>获取产品列表</strong></p> <pre><code>func loadProductList() {    let table = Table(tableId: "105766")    table.find { [weak self] (recordList, error) in         if let list: List&lt;Product&gt; = recordList?.listInfo.decoded() {             self?.products = list.objects             self?.tableView.reloadData() // 刷新产品列表         }     } }</code></pre> <p>Table 对应 MinCloud 的表结构,通过表 id 就可以操作对应表数据。使用 find 操作来获取产品表所有产品记录,获取产品记录后,将其解码为 List&lt;Product&gt; 对象。</p> <h5><strong>获取产品详情</strong></h5> <pre><code>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() // 展示产品详细信息         }     } }</code></pre> <p>使用 get 操作指定产品的 id 获取产品的所有信息,获取产品记录后,将其解码为 Product 对象。</p> <h4>产品页面</h4> <p>在项目中创建了 ProductCell、RatingLabel、BriefView 等视图控件,分别显示产品列表项、产品评分、产品简介等信息。而这些控件可以在主 App 和 App Clip 复用。因此在 SugarDemo 目录中创建了需要复用的组件,并将对应的文件的 Target Membership 中勾选 SugarDemo 和 SugarClip 即可复用。</p> <p id="UjUYlTp"><img class="size-full wp-image-1368757 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6df7622279c.png" alt="" srcset="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6df7622279c.png 1115w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6df7622279c-360x223.png 360w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6df7622279c-768x475.png 768w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6df7622279c-1024x634.png 1024w" sizes="(max-width: 1115px) 100vw, 1115px" /></p> <h4>唤醒 App Clip</h4> <p>开发完 App Clip 后,我们可以点击 Smart app Banner,扫码二维码或 NFC 标签,点击 Siri 获取基于位置的建议,短信等方式来唤醒(invacation)App Clip。</p> <p>在 AppClip 可以被唤醒之前需要配置 Launch Experience,即给 App Clip 配置一个 URL 和 App Clip Card 信息。在开发阶段可以直接配置 Local Experience 或者在 testflight 上进行配置。App Clip 准备发布时,需要在 app store connect 上进行配置。</p> <p>本文主要介绍 Local Experience 方式,其他方式可参考苹果<a href="https://developer.apple.com/documentation/app_clips/testing_your_app_clip_s_launch_experience">开发文档</a>。</p> <p>1. 首先将 SugarClip 通过 Xcode 在手机运行起来。</p> <p>2. 打开手机【设置】-【开发者】-【Local Experience】-【Register Local Experience】。</p> <p id="hPqCvgv"><img class=" wp-image-1368412 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6fc83d6c5.png" alt="" width="366" height="657" srcset="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6fc83d6c5.png 746w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6fc83d6c5-360x646.png 360w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6fc83d6c5-571x1024.png 571w" sizes="(max-width: 366px) 100vw, 366px" /></p> <ul> <li>填入 URL PREFIX,打开任何以 URL PREFIX 为前缀的 URL,都会被当做打开 App Clip 来处理。</li> <li>填入 Clip Bundle Id。</li> <li>填入 Title、Subtitle,选择一张图片,这些信息将会显示在 App Clip Card 上。</li> </ul> <p>3. 步骤 2 的 URL PREFIX 编码成一个二维码(<a href="https://www.qr-code-generator.com/">https://www.qr-code-generator.com/</a>)</p> <p id="rpXvYTP"><img class="size-full wp-image-1368414 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c6fda8cee7.png" alt="" /></p> <p>4. 使用控制面板的二维码扫描器扫描,将会弹出 App Clip Card。</p> <p id="wXXbDWY"><img class="aligncenter size-full wp-image-1368432" src="https://s3.ifanr.com/wp-content/uploads/2020/09/WechatIMG1990.png" alt="" width="1614" height="1436" srcset="https://s3.ifanr.com/wp-content/uploads/2020/09/WechatIMG1990.png 1614w, https://s3.ifanr.com/wp-content/uploads/2020/09/WechatIMG1990-360x320.png 360w, https://s3.ifanr.com/wp-content/uploads/2020/09/WechatIMG1990-768x683.png 768w, https://s3.ifanr.com/wp-content/uploads/2020/09/WechatIMG1990-1024x911.png 1024w" sizes="(max-width: 1614px) 100vw, 1614px" /></p> <p>5. 点击查看,进入 App Clip</p> <p id="UXtzxJB"><img class="wp-image-1368422 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c703ccf34a.png" alt="" width="336" height="603" srcset="https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c703ccf34a.png 746w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c703ccf34a-360x646.png 360w, https://s3.ifanr.com/wp-content/uploads/2020/09/img_5f6c703ccf34a-571x1024.png 571w" sizes="(max-width: 336px) 100vw, 336px" /></p> <p>至此,我们已经完成了一个 App Clip 的开发,可以对整个过程做一些总结:</p> <h4>开发难度:</h4> <p>App Clip 从技术选型上是面向 iOS 开发者的,对 iOS 开发者来说,开发 App Clip 可以简单到修改点配置即可发布。而如果是小程序开发者想要入坑,有两条路可以走:</p> <ol> <li>学习 iOS 原生开发;</li> <li>等待跨端的框架适配 App Clip。</li> </ol> <h4>挑战:</h4> <p>App Clip 现阶段只允许使用 Sign in with Apple 苹果登录、Apple Pay 苹果支付,无法集成微信登录、微信支付等线下服务场景主流的第三方能力。这对想要使用 App Clip 优化线下服务体验来说是个挑战,毕竟国内开通了 Apple Pay 的不是多数。希望 App Clip 团队早日推出更好的解法。</p> <h4>红利:</h4> <p>App Clip 体验轻巧优秀,开发者可通过 App Clip 为主体 app 做一个试玩试用版本,让用户快速体验,以降低用户安装门槛,提高整体转化率。</p> <p>通过这篇文章,希望你也能高效的开发一个 App Clip。</p>