SwiftyMenu

Cocoapod SPM Version MIT License
Facebook: @KarimEbrahemAbdelaziz Twitter: @k_ebrahem_

欢迎使用 DrivenUI SDK

老实说，它不是 HTML ... 但它有点像。但实际上，它不是。

DrivenUI 是一个 iOS SDK，它可以更方便地将 服务器驱动 UI 功能引入并构建到 iOS 应用程序中。目前，它基于 JSON 响应格式在屏幕上渲染 SwiftUI 视图。

⭐️ 在 GitHub 上给我们点赞 — 这对我们很有帮助！

目录

要求

安装

CocoaPods

CocoaPods 是 Cocoa 项目的依赖管理工具。 有关使用和安装说明，请访问他们的网站。 要使用 CocoaPods 将 DrivenUI 集成到您的 Xcode 项目中，请在您的 Podfile 中指定它

pod 'DrivenUI', '~> 0.1.1'

Swift Package Manager

Swift Package Manager 是一种用于自动化 Swift 代码分发的工具，并且已集成到 swift 编译器中。 它正处于早期开发阶段，但 Driven 确实支持其在支持平台上的使用。

设置好 Swift 包后，将 DrivenUI 添加为依赖项就像将其添加到 Package.swift 的 dependencies 值一样简单。

dependencies: [
    .package(url: "https://github.com/KarimEbrahemAbdelaziz/DrivenUI.git", .exact("0.1.1"))
]

用法

初始化 SDK

  1. 由于我们处于 BETA 版本，请填写包含您的应用程序 Bundle Id 的 Issue，并留下您的电子邮件，我们将立即向您发送您的 DrivenUI SDK 密钥。

  2. 您有两种方法可以在您的应用程序中初始化 DrivenUI。

    • 如果您使用的是 SwiftUI 新的应用程序生命周期，请将配置方法添加到主 App 的 init 中。
    • 如果您使用的是 AppDelegate，请将配置方法添加到 didFinishLaunchWithOptions 方法中。
Driven.configure(with: YUOR_SDK_KEY)

基本用法

连接到您的后端并检索您的 JSON 响应（查看支持的视图 JSON 结构 格式）。

在您的 ViewModel 中解析您的 JSON 响应

// Add published property into your ViewModel 
// so that you views can react on it's changes ;)
@Published var serverView: DrivenComponent?

// Parse JSON response from API to DrivenComponent
let response = try? JSONDecoder().decode(DrivenComponent.self, from: data)

if let response = response {
    DispatchQueue.main.async {
        self?.serverView = response
    }
} else {
    DispatchQueue.main.async {
        self?.serverView = nil
    }
}

在您的 Content View 中添加此构建函数

@ViewBuilder func buildView() -> some View {
    if let serverView = viewModel.serverView {
        DrivenComponentFactory(material: serverView).toPresentable()
    } else {
        Text("No views from server.")
    }
}

在您的视图层次结构中使用此 buildView

var body: some View {
    NavigationView {
        buildView()
            .padding([.top], 48)
        .navigationBarTitle("DrivenUI SDK")
    }
}

然后 瞧 你就得到了在屏幕上渲染的视图 🔥

JSON 结构

每个支持的视图组件都由 4 个键组成，每个键都根据您需要渲染的组件占据一个位置

{
    // type values are the Supported Views (Please check below section).
    "type": "",
    
    // properties values are pair of key-value of Supported Properties (Please check below section).
    "properties": { },
    
    // values are pair of key-value of Supported Values for each View (Please check below section).
    "values": { },
    
    // subviews values are pair of key-value of another component should be rendered inside one of those views: HStack, VStack, ZStack, and List.
    "subviews": { }
}
文本视图的后端响应示例 
{
  "type": "Text",
  "properties": {
    "foregroundColor": "000000",
    "font": "title",
    "fontWeight": "regular",
    "width": 300
  },
  "values": {
    "text": "It's simple version working! 😎"
  }
}
图像视图的后端响应示例 
{
  "type": "Image",
  "properties": {
    "height": 90
  },
  "values": {
    "imageUrl": "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
  }
}
HStack 视图的后端响应示例 
{
  "type": "HStack",
  "properties": {
    "spacing": 16,
    "verticalAlignment": "top"
  },
  "subviews": [
    {
      "type": "Image",
      "properties": {
        "height": 40,
        "width": 40
      },
      "values": {
        "localImageName": "hiking"
      }
    },
    {
      "type": "VStack",
      "properties": {
        "padding": 8,
        "horizontalAlignment": "leading"
      },
      "subviews": [
        {
          "type": "Text",
          "properties": {
            "font": "title",
            "fontWeight": "bold"
          },
          "values": {
            "text": "Hiking"
          }
        },
        {
          "type": "Text",
          "properties": {
            "foregroundColor": "333333"
          },
          "values": {
            "text": "This is Hiking sport."
          }
        }
      ]
    }
  ]
}

支持的视图

支持的属性

待办事项

请查看 更新日志 文件以获取更多信息，了解每个版本中包含的内容。

许可证