集成到现有应用

将 Lynx 作为高性能、跨平台的 UI 渲染引擎，灵活地嵌入到现有应用的任意位置。这种 既有（Brownfield） 接入方式具有最高的灵活性，支持全部平台，让你无需重写就能渐进式采用 Lynx，常用于大规模生产应用。

将 Lynx 集成到 iOS 平台

Lynx for iOS

本文假设你已熟悉原生 iOS 应用开发的基本概念。
下文中的所有代码，你都可以参考项目:integrating-lynx-demo-projects

1. 依赖配置

使用 Cocoapods 可以方便的将 Lynx 集成到你的应用中

推荐版本

Cocoapods: >= 1.11.3
Ruby: >= 2.6.10

配置依赖

Lynx

Lynx Engine 核心能力，包含了解析 Bundle、样式解析、排版以及渲染视图等基础能力。

从 Cocoapods 中获取 Lynx 的最新版本。然后将 Lynx 添加到你的 Podfile 中：

Podfile

source 'https://cdn.cocoapods.org/'

platform :ios, '10.0'

target 'YourTarget' do
  pod 'Lynx', '3.8.0', :subspecs => [
    'Framework',
  ]

  pod 'PrimJS', '3.8.0', :subspecs => ['quickjs', 'napi']
end

Lynx Service

Lynx Service 包括 LynxImageService、LynxLogService 等，旨在提供一些宿主应用特性强相关的能力，允许宿主应用在运行时注入自定义实现 Image Service 默认是使用 SDWebImage 图片库实现，在没有集成 SDWebImage 组件的宿主应用上则可以依赖其他图片库。 Lynx 提供了标准的原生 Image、Log、Http 服务的能力，接入方可以快速接入并使用;

从 Cocoapods 中获取 Lynx Service 的最新版本。然后将 Lynx Service 添加到你的 Podfile 中：

Podfile

source 'https://cdn.cocoapods.org/'

platform :ios, '10.0'

target 'YourTarget' do
  pod 'Lynx', '3.8.0', :subspecs => [
    'Framework',
  ]

  pod 'PrimJS', '3.8.0', :subspecs => ['quickjs', 'napi']

  # integrate image-service, log-service, and http-service
  pod 'LynxService', '3.8.0', :subspecs => [
      'Image',
      'Log',
      'Http',
  ]

  # ImageService
  pod 'SDWebImage','5.15.5'
  pod 'SDWebImageWebPCoder', '0.11.0'
end

More Elements

XElement 是 Lynx 团队维护的客户端扩展元件集合，提供更丰富的元件能力，能够让 Lynx 能够更快速的被用到生产环境中，提升 Lynx 生态的活力。

从 Cocoapods 中获取 XElement 的最新版本。然后将 XElement 添加到你的 Podfile 中：

Podfile

source 'https://cdn.cocoapods.org/'

platform :ios, '10.0'

target 'YourTarget' do
  pod 'Lynx', '3.8.0', :subspecs => [
    'Framework',
  ]

  pod 'PrimJS', '3.8.0', :subspecs => ['quickjs', 'napi']

  # integrate image-service, log-service, and http-service
  pod 'LynxService', '3.8.0', :subspecs => [
      'Image',
      'Log',
      'Http',
  ]

  # ImageService
  pod 'SDWebImage','5.15.5'
  pod 'SDWebImageWebPCoder', '0.11.0'

  pod 'XElement', '3.8.0'
end

安装依赖

运行 pod install 安装依赖，然后打开你的 XCode 工程，同时需要确保关闭 Sandbox Scripting 能力。

Note

为了关闭 Sandbox Scripting 能力，在 XCode 中点击应用，切换至 Build Settings。过滤 script 关键字，并且将 User Script Sandboxing 置为 NO。

2. Lynx 环境初始化

LynxEnv 初始化

LynxEnv 提供了 Lynx Engine 的全局初始化接口。请保证 LynxEnv 的初始化发生在 Lynx Engine 的任何接口调用之前；例如可以在 AppDelegate 中完成初始化

Objective-C

Swift

AppDelegate.m

#import <Lynx/LynxEnv.h>
#import <Lynx/LynxView.h>

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [LynxEnv sharedInstance];
  return YES;
}

AppDelegate.swift

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    LynxEnv.sharedInstance()
    return true
  }
}

3. 渲染 LynxView

LynxView 是 Lynx Engine 提供的渲染基本单元，LynxView 是一个继承自 iOS 原生 UIView 的实现，你可以快速的构造一个 LynxView，并将其添加到 ViewController 的视图上。

创建 Bundle 加载器

Lynx Engine 自身并没有资源加载的能力，因此需要在初始化 LynxEnv，或者构造 LynxView 时传入 LynxTemplateProvider 协议的具体实现，Lynx 会采用注入的资源加载器来获取真实的 Bundle 内容

你可以使用多种方式获取 Bundle 的资源内容，在这里我们选择将 Bundle 的内容内置在应用中:

首先请将快速上手阶段生成的 Bundle 文件或者将下面的文件下载到本机上，然后按照如下步骤将文件内置：

Note

Bundle 示例: https://unpkg.com/@lynx-example/hello-world/dist/main.lynx.bundle

Note

内置文件步骤：

在项目的目标设置中，选择目标 Target;
选择 Build Phases 选项卡;
在 Copy Bundle Resources 部分，点击加号按钮（+）以添加文件;

实现 Bundle 加载器

Objective-C

Swift

DemoLynxProvider.h

#import <Foundation/Foundation.h>
#import <Lynx/LynxTemplateProvider.h>

NS_ASSUME_NONNULL_BEGIN

@interface DemoLynxProvider : NSObject <LynxTemplateProvider>

@end

NS_ASSUME_NONNULL_END

Tip

Lynx 是使用 Objective-C 构建的项目，如果你使用的是 Swift 工程，请使用 Bridging Header 引入所需的 Lynx 头文件。

YourTarget-Bridging-Header.h

#import <Lynx/LynxConfig.h>
#import <Lynx/LynxEnv.h>
#import <Lynx/LynxTemplateProvider.h>
#import <Lynx/LynxView.h>

Objective-C

Swift

DemoLynxProvider.m

#import <Foundation/Foundation.h>

#import "DemoLynxProvider.h"

@implementation DemoLynxProvider

- (void)loadTemplateWithUrl:(NSString*)url onComplete:(LynxTemplateLoadBlock)callback {
    NSString *filePath = [[NSBundle mainBundle] pathForResource:url ofType:@"bundle"];
    if (filePath) {
      NSError *error;
      NSData *data = [NSData dataWithContentsOfFile:filePath options:0 error:&error];
      if (error) {
        NSLog(@"Error reading file: %@", error.localizedDescription);
        callback(nil, error);
      } else {
        callback(data, nil);
      }
    } else {
      NSError *urlError = [NSError errorWithDomain:@"com.lynx"
                                                  code:400
                                                userInfo:@{NSLocalizedDescriptionKey : @"Invalid URL."}];
      callback(nil, urlError);
    }
}

@end

DemoLynxProvider.swift

import Foundation

class DemoLynxProvider: NSObject, LynxTemplateProvider {
  func loadTemplate(withUrl url: String!, onComplete callback: LynxTemplateLoadBlock!) {
    if let filePath = Bundle.main.path(forResource: url, ofType: "bundle") {
      do {
        let data = try Data(contentsOf: URL(fileURLWithPath: filePath))
        callback(data, nil)
      } catch {
        print("Error reading file: \(error.localizedDescription)")
        callback(nil, error)
      }
    } else {
      let urlError = NSError(domain: "com.lynx", code: 400, userInfo: [NSLocalizedDescriptionKey: "Invalid URL."])
      callback(nil, urlError)
    }
  }
}

构造基础 LynxView

按照如下的方式构造一个最基础的 LynxView 实例：

Objective-C

Swift

ViewController.m

#import <Lynx/LynxView.h>
#import "ViewController.h"
#import "DemoLynxProvider.h"

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    LynxView *lynxView = [[LynxView alloc] initWithBuilderBlock:^(LynxViewBuilder *builder) {
      builder.config = [[LynxConfig alloc] initWithProvider:[[DemoLynxProvider alloc] init]];
      builder.screenSize = self.view.frame.size;
      builder.fontScale = 1.0;
    }];
    lynxView.preferredLayoutWidth = self.view.frame.size.width;
    lynxView.preferredLayoutHeight = self.view.frame.size.height;
    lynxView.layoutWidthMode = LynxViewSizeModeExact;
    lynxView.layoutHeightMode = LynxViewSizeModeExact;
}
@end

ViewController.swift

import UIKit

class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    let lynxView = LynxView { builder in
      builder.config = LynxConfig(provider: DemoLynxProvider())
      builder.screenSize = self.view.frame.size
      builder.fontScale = 1.0
    }

    lynxView.preferredLayoutWidth = self.view.frame.size.width
    lynxView.preferredLayoutHeight = self.view.frame.size.height
    lynxView.layoutWidthMode = .exact
    lynxView.layoutHeightMode = .exact
  }
}

将 LynxView 添加到视图

然后将 LynxView 添加到应用视图中：

Objective-C

Swift

ViewController.m

#import <Lynx/LynxView.h>

#import "ViewController.h"
#import "DemoLynxProvider.h"

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // ...

  [self.view addSubview:lynxView];
}

@end

渲染视图

当你完成以上步骤之后，你就已经完成了 LynxView 初始化的全部工作，调用 lynxView.loadTemplateFromURL 方法，即可将对应的 Bundle 渲染到 LynxView 视图上，

Objective-C

Swift

ViewController.m

#import <Lynx/LynxView.h>

#import "ViewController.h"
#import "DemoLynxProvider.h"

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // ...

  [lynxView loadTemplateFromURL:@"main.lynx" initData:nil];
}

@end

ViewController.swift

import UIKit

class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    // ...

    lynxView.loadTemplate(fromURL: "main.lynx", initData: nil)
  }
}

然后你将在屏幕上看到如下内容：

恭喜你，现在你现在已经完成了 Lynx Engine 集成的全部工作！

4. 进入 Lynx 世界

现在你已经将 Lynx 集成到你的应用中了。请参考开发和调试文档进一步在 Lynx 的世界里遨游吧！

开发提示

在开发过程中，你可以使用 Lynx Explorer 快速预览和迭代 Lynx 页面，然后再集成到原生应用中。切换到用 Explorer 体验进行设置。

下一步

集成 Lynx DevTool

集成 Lynx DevTool，调试 Lynx 页面

#集成到现有应用

#将 Lynx 集成到 iOS 平台

#1. 依赖配置

#配置依赖

#安装依赖

#2. Lynx 环境初始化

#LynxEnv 初始化

#3. 渲染 LynxView

#创建 Bundle 加载器

#构造基础 LynxView

#将 LynxView 添加到视图

#渲染视图

#4. 进入 Lynx 世界

#将 Lynx 集成到 Android 平台

#1. 依赖配置

#包依赖

#配置混淆规则 (Proguard)

#2. 环境初始化

#LynxService 初始化

#LynxEnv 初始化

#3. 渲染 LynxView

#创建 Bundle 加载器

#构造 LynxView

#引入 XElement

#渲染视图

#4. 进入 Lynx 世界

#将 Lynx 集成到 Harmony 平台

#1. 依赖配置

#包依赖

#能力依赖

#2. 环境初始化

#LynxService 初始化

#LynxEnv 初始化

#3.渲染 LynxView

#创建 Bundle 加载器

#构造 LynxView 并渲染视图

#4. 进入 Lynx 世界

#将 Lynx 集成到 Web 平台

#1. 开发调试

#添加 web 配置

#启动开发服务器

#构建与预览

#2. 接入 web 项目

#创建一个 web 项目

#配置工程

#启动工程

#3. API 参考

#将 Lynx 集成到 Windows 平台

#1. 依赖配置

#下载或构建 LynxSDK

#配置CMake

#2. 环境初始化 - 可选

#Lynx Service 初始化

#LynxEnv 初始化

#3. 渲染 LynxView

#创建资源加载器

#构造 LynxView

#渲染视图

#4. 进入 Lynx 世界

#将 Lynx 集成到 macOS 平台

#1. 依赖配置

#下载或构建 LynxSDK

#配置CMake

#2. 环境初始化 - 可选

#Lynx Service 初始化

#LynxEnv 初始化

#3. 渲染 LynxView

#创建资源加载器

#构造 LynxView

#渲染视图

#4. 进入 Lynx 世界

#下一步

集成到现有应用

将 Lynx 集成到 iOS 平台

1. 依赖配置

配置依赖

安装依赖

2. Lynx 环境初始化

LynxEnv 初始化

3. 渲染 LynxView

创建 Bundle 加载器

构造基础 LynxView

将 LynxView 添加到视图

渲染视图

4. 进入 Lynx 世界

将 Lynx 集成到 Android 平台

1. 依赖配置

包依赖

配置混淆规则 (Proguard)

2. 环境初始化

LynxService 初始化

LynxEnv 初始化

3. 渲染 LynxView

创建 Bundle 加载器

构造 LynxView

引入 XElement

渲染视图

4. 进入 Lynx 世界

将 Lynx 集成到 Harmony 平台

1. 依赖配置

包依赖

能力依赖

2. 环境初始化

LynxService 初始化

LynxEnv 初始化

3.渲染 LynxView

创建 Bundle 加载器

构造 LynxView 并渲染视图

4. 进入 Lynx 世界

将 Lynx 集成到 Web 平台

1. 开发调试

添加 web 配置

启动开发服务器

构建与预览

2. 接入 web 项目

创建一个 web 项目

配置工程

启动工程

3. API 参考

将 Lynx 集成到 Windows 平台

1. 依赖配置

下载或构建 LynxSDK

配置CMake

2. 环境初始化 - 可选

Lynx Service 初始化

LynxEnv 初始化

3. 渲染 LynxView

创建资源加载器

构造 LynxView

渲染视图

4. 进入 Lynx 世界

将 Lynx 集成到 macOS 平台

1. 依赖配置

下载或构建 LynxSDK

配置CMake

2. 环境初始化 - 可选

Lynx Service 初始化

LynxEnv 初始化

3. 渲染 LynxView

创建资源加载器

构造 LynxView

渲染视图

4. 进入 Lynx 世界

下一步