iOS上实现应用程序小部件的分步指南（第1部分）-DEV365 开发者社区

应用程序小部件是使用户快速访问其iOS设备上重要信息或功能的好方法。随着iOS 14和苹果的发布，对可定制的小部件引入了支持，这使开发人员更容易创建自己的小部件。在本指南中，我们将详细介绍在iOS上实现应用程序小部件的步骤，包括将其设置，配置其外观和功能以及对其进行测试。该主题将分为几个帖子，因此请继续关注。对于官方文件，here Apple文档。

步骤1：设置应用程序小部件

在iOS上实现应用程序小部件的第一步是在Xcode中创建一个新目标。这是这样做的方法：

在Xcode中打开您的项目，然后转到File > New > Target。
从可用模板列表中选择Widget Extension，然后单击Next。

给小部件的产品名称（例如mywidget），然后单击Finish（立即解开所有可滴答字段）。

这将在您的项目Navigator中的项目下创建一个MyWidget目录。您可以通过Open MyWidget.swift和等待加载的预览。

步骤2：配置小部件外观

现在，我们已经创建了应用程序小部件的基本结构，让我们专注于其外观。有几种配置小部件外观的方法，包括其大小，布局和样式。

小部件尺寸和布局

小部件的大小可能会对其可用性和美学产生重大影响。在iOS 14及以后，您可以从三种不同的小部件尺寸中进行选择：中小型，大型，大型。每个尺寸都有自己的建议布局和内容指南，因此为您的特定用例选择合适的尺寸很重要。 Here苹果的人界面指南widgetkit。

我想将图像添加到默认的WidgetView。要配置小部件的布局，您可以使用SwiftUi。 Swiftui提供了用于构建用户界面的声明语法。

这是如何使用swiftui创建简单的小部件视图的示例：

struct MyWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack{
            Text(entry.date, style: .time)
            Image(systemName: "magnifyingglass.circle.fill").resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width:80, height: 80)
        }.padding()
    }

}

这将用Text和Image用VStack创建一个小部件视图。我从默认视图中添加了VStack和Image，这些视图仅显示当前时间的文本。 .padding()修饰符在标签周围增加了一些空间，使其看起来更具视觉吸引力。

小部件布局的最佳实践

设计小部件布局时，重要的是要遵循最佳实践，以确保其在美学上既令人愉悦又功能齐全。以下是要记住的一些技巧：

保持布局简单易于理解。
使用清晰易读的字体和颜色。
最大程度地减少文本和其他视觉元素的数量，以确保小部件易于阅读和使用。
使用Swiftui或Uikit的布局

步骤3：实现小部件功能

一旦配置了应用程序小部件的外观，就需要添加功能才能使其真正有用。这是这样做的方法：

与数据源交互

要与数据源进行交互，您需要使用小部件扩展名来访问应用程序的数据。这是涉及的步骤：

向您的Xcode项目添加一个小部件扩展目标。
配置扩展程序以访问应用程序中的相关数据源。
使用数据更新小部件的外观。

使用深链接URL添加功能

要访问应用程序中的相关数据源，当用户点击窗口小部件时，我正在使用深层链接URL打开应用程序中的特定屏幕。这是这样做的方法：

为要在应用程序中打开的屏幕创建一个深链路URL。例如，可以使用Swift中的URLComponents和URLQueryItem类来完成此操作。

var components = URLComponents()
components.scheme = "myapp"
components.host = "screen"
let queryItem = URLQueryItem(name: "id", value: "1234")
components.queryItems = [queryItem]
let deepLinkURL = components.url!`

在此示例中，深链路URL在应用程序“ myApp”的应用中打开了带有ID“ 1234”的屏幕。

在小部件的视图中实现openURL(_:)方法，以打开窗口小部件时打开深链路URL。

struct MyWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack{
            Text(entry.date, style: .time)
            Link(destination: URL(string: "myapp://screen?id=1234")!){
                Image(systemName: "magnifyingglass.circle.fill").resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width:80, height: 80)
            }

        }.padding()
    }
}

在此示例中，我用Link包裹了Image。当用户点击此Link时，该应用将打开并为此URL做点事。这就是为什么我们需要在应用程序上设置深层链接。

处理应用程序AppDelegate中的深链路URL以打开正确的屏幕。

`func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    guard let components = URLComponents(url: url, resolvingAgainstBaseURL: true),
          let id = components.queryItems?.first(where: { $0.name == "id" })?.value else {
        return false
    }
    // Open the correct screen based on the ID
    return true
}`

在此示例中，AppDelegate中的application(_:open:options:)方法从Deep Link URL中的查询参数中提取ID，并在应用程序中打开正确的屏幕。

这是具有工作深链接的示例小部件：

步骤4：测试应用程序小部件

测试您的应用程序小部件对于确保其在向用户发布之前按预期工作至关重要。以下是有关如何彻底测试小部件的一些提示：

模拟Xcode中的小部件

在Xcode中打开您的项目，然后从窗口左上角的下拉菜单中选择小部件目标的方案。
单击工具栏中的“运行”按钮以在模拟器中构建并运行小部件。

Xcode的模拟器允许您以各种尺寸和配置来测试小部件，因此请确保在所有可能的配置中测试小部件，以确保其外观和功能正确。

[IOS] Implement App Widget - YouTube

在iOS应用程序上实现应用程序小部件。

youtube.com

在物理设备上进行测试

在模拟器上测试时，在实际设备上进行测试是确保小部件按预期工作的最佳方法。这是在物理设备上测试小部件的方法：

将您的设备连接到计算机，然后将其选择为Xcode中的目标设备。
在设备上构建并运行小部件。

在设备上进行测试使您可以查看小部件在现实世界中的外观和行为，并可以帮助您确定模拟器中可能尚不明显的任何问题。

解决常见问题

在测试过程中，您可能会遇到小部件的一些常见问题，例如布局问题或功能错误。这是解决这些问题的方法：

布局问题

如果您的小部件的布局未按预期显示，则可以使用Xcode的调试工具来识别问题的来源。例如，您可以使用“调试视图层次结构”工具来检查小部件的布局并确定任何布局问题。

功能错误

如果您的小部件的功能无法正常工作，则可以使用Xcode的调试工具来识别问题的来源。例如，您可以使用“调试导航器”工具逐步浏览代码并确定可能引起问题的任何逻辑错误。

结论：在iOS上实施应用程序小部件可能是改善应用程序的用户体验并使用户快速访问重要信息和功能的好方法。通过遵循本指南中概述的步骤，您可以创建一个看起来很棒且功能良好的高质量应用程序小部件。祝你好运！