UIKitHotReload

内容

• 文档
• 安装
• 热重载
• 用法

UIKitHotReload 是一个使用 json/yml 文件组织 iOS 应用布局的库。

它配备了热重载功能，甚至在构建后或设备传输后，也可以在不使用 Xcode 的情况下实现实时布局更新。

在 Release 构建的情况下，由于内部使用了打包的 json/yml 文件，因此热重载将无法工作。

文档

详情请见这里

热重载

UIKitHotReload 利用 firebase/cloud firestore 的实时更新功能来实现热重载。

您可以通过使用如 Visual Studio Code 等的插件功能，在每次 json 更新时执行将数据上传到 firestore 的脚本。

以下是推荐的设置方法。

firestore

Firestore 的配置。

Xcode

1. 安装 node。（如果已安装则无需操作）
2. 从 Xcode 文件列表中选择项目，然后从 TARGETS 中选择目标应用。选择 Build Phases 标签，点击左上角的小加号按钮，然后选择 New Run Script Phase。
3. 将 New Run Script phase 向上拖动至 Compile Sources phase 之上，然后向 Check Pods Manifest.lock 之下。打开 New Run Script phase，粘贴以下脚本。

cp -f $PODS_ROOT/UIKitHotReload/UIKitHotReload/Classes/script/upload_admin.js ./upload_admin.js
cp -f $PODS_ROOT/UIKitHotReload/UIKitHotReload/Classes/script/package.json ./package.json
chmod 777 ./package.json
cp -f $PODS_ROOT/UIKitHotReload/UIKitHotReload/Classes/script/package-lock.json ./package-lock.json
chmod 777 ./package-lock.json
npm install

4. 构建项目后，确认 $SRCROOT 文件夹中存在 package.json、package-lock.json 和 upload_admin.js。

Visual Studio Code

Installation vscode-runonsave

安装用于在保存 json 文件时同时执行脚本的插件。

推荐的插件是 vscode-runonsave。

设置

在 path/to/project/.vscode/settings.json 中添加以下设置。

{
  "emeraldwalk.runonsave":{
    "commands": [
      {
        "match": ".json$",
        "cmd": "node ./upload_admin.js ${file} <path/to/serviceAccountKey.json>"
      },
      {
        "match": ".yml$",
        "cmd": "node ./upload_admin.js ${file} <path/to/serviceAccountKey.json>"
      },
      {
        "match": ".yaml$",
        "cmd": "node ./upload_admin.js ${file} <path/to/serviceAccountKey.json>"
      }
    ]
  }
}

<path/to/serviceAccountKey.json> 是从 Firebase 服务账户页面中的 生成秘密密钥 产生的。

有关详细信息，请参考 Firebase 的官方文档。

使用

快速入门

ViewController

MainViewController.swift

import UIKit
import UIKitHotReload

final class MainViewController: UIViewController {

  private var label: UILabel? { self.view.hotReloadView(id: "id_label") as? UILabel }
  private var button: UIButton? { self.view.hotReloadView(id: "id_button") as? UIButton }
  private var image: UIImageView? { self.view.hotReloadView(id: "id_image") as? UIImageView }

  override func viewDidLoad() {
    super.viewDidLoad()
    self.view.loadHotReload(dirName: "views", jsonFileName: "main") { result in
      switch result {
      case .failure(let error):
        print(error.localizedDescription)
      default:
        break
      }
    }
  }

Layout

views/main.json

{
  "class": "view",
  "id": "main",
  "background_color": [
    1,
    1,
    1
  ],
  "is_safe_area": false,
  "subviews": [
    {
      "class": "stack",
      "is_safe_area": true,
      "distribution": "fill_e",
      "alignment": "fill",
      "is_scroll_enabled": false,
      "spacing": 10,
      "subviews": [
        {
          "class": "label",
          "id": "id_label",
          "text": "Label Text",
          "font": {
            "name": "Bradley Hand",
            "size": 30
          }
        },
        {
          "class": "button",
          "id": "id_button",
          "text": "Button Title"
        },
        {
          "class": "imageview",
          "id": "id_image",
          "image": {
            "name": "image_file_name"
          },
          "layouts": [
            {
              "size": {
                "width": {
                  "v": 200
                },
                "height": {
                  "v": 200
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

作者

Kei Sakiyama, [email protected]

许可证

UIKitHotReload遵循MIT许可证。更多信息请参阅LICENSE文件。