欢迎使用 DrivenUI SDK

老实说，它不是 HTML … 但多少有点像。但事实上，它并不是。

DrivenUI 是一个 iOS SDK，使在 iOS 应用程序中引入和构建 服务器驱动 UI 功能变得更加方便。目前它基于 JSON 响应格式来在屏幕上绘制 SwiftUI 视图。

⭐️在 GitHub 上给我们加星 — 这很有帮助！

由于我们处于 BETA 版本，请在您的应用程序的 Bundle Id 中填写问题，并留下您的电子邮件，我们将立即发送您的 DrivenUI SDK 密钥。
您有两种方法初始化应用程序中的 DrivenUI。
- 如果您正在使用 SwiftUI 新应用程序生命周期，将配置方法添加到主应用程序的 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 视图中添加此构建函数

@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! 😎"
  }
}

imagery视图的示例后端响应

{
  "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."
          }
        }
      ]
    }
  ]
}

支持的视图

列表
图像
- 支持值
  - imageUrl从URL检索图像。
  - systemIconName使用系统图像。
  - localImageName使用资产目录图像。
文本
- 支持值
  - text将要显示的文本值。
堆叠（HStack、VStack和ZStack）
形状（矩形和圆形）
填充和分隔符

支持的属性

width和height
- 浮点值。
foregroundColor、backgroundColor和borderColor
- 颜色的十六进制字符串（例如："ffffff"）。
borderWidth、spacing（对于HStack和VStack）和padding
- 整数值。
水平对齐
- 领先
- 居中
- 尾部
垂直对齐
- 顶部
- 底部
- 居中
- 第一文本基线
- 最后一文本基线
字体
- 大标题
- 标题
- 标题
- 子标题
- 正文
- 号召性用语
- 脚注
- 说明
字重
- 超轻
- 细
- 正常
- 常规
- 中等
- 半粗体
- 粗体
- 粗体
- 黑色

Todo

请检查CHANGELOG文件以获取有关每个版本包含内容的更多信息。

许可

您可以在这里找到许可信息。

DrivenUI 0.1.1

DrivenUI 0.1.1

DrivenUI 0.1.1

欢迎使用 DrivenUI SDK

目录

要求

安装

CocoaPods

Swift 包管理器

使用

初始化 SDK

基本使用

JSON结构

支持的视图

支持的属性

Todo

许可