Rspeedy

简体中文

English

接入现有应用

目前，Lynx 并不适合从零开始构建一个新的应用，你需要将 Lynx（引擎）集成自原生移动应用或 Web 应用中，通过 Lynx 视图加载 Lynx 应用。通过几个步骤，你就可以在你的应用中进行 Lynx 开发了。

选择你的目标平台查看具体的集成步骤：

iOS

Android

Web

将 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.2.0', :subspecs => [
    'Framework',
  ]

  pod 'PrimJS', '2.12.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.2.0', :subspecs => [
    'Framework',
  ]

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

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

  # ImageService
  pod 'SDWebImage','5.15.5'
  pod 'SDWebImageWebPCoder', '0.11.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;
}

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

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

构造基础 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

将 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

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

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

4. 进入 Lynx 世界

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

下一步

集成 Lynx DevTool

集成 Lynx DevTool，调试 Lynx 页面

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。

接入现有应用

将 Lynx 集成到 iOS 平台

1. 依赖配置

配置依赖

安装依赖

2. Lynx 环境初始化

LynxEnv 初始化

3. 渲染 LynxView

创建 Bundle 加载器

构造基础 LynxView

将 LynxView 添加到视图

渲染视图

4. 进入 Lynx 世界

将 Lynx 集成到 Android 平台

1. 依赖配置

包依赖

配置混淆规则 (Proguard)

2. 环境初始化

LynxService 初始化

LynxEnv 初始化

3. 渲染 LynxView

创建 Bundle 加载器

构造 LynxView

渲染视图

4. 进入 Lynx 世界

将 Lynx 集成到 Web 平台

1. 构建 web 产物

添加 web 配置

构建

2. 接入 web 项目

创建一个 web 项目

配置工程

启动工程

下一步

#接入现有应用

#将 Lynx 集成到 iOS 平台

#1. 依赖配置

#配置依赖

#安装依赖

#2. Lynx 环境初始化

#LynxEnv 初始化

#3. 渲染 LynxView

#创建 Bundle 加载器

#构造基础 LynxView

#将 LynxView 添加到视图

#渲染视图

#4. 进入 Lynx 世界

#将 Lynx 集成到 Android 平台

#1. 依赖配置

#包依赖

#配置混淆规则 (Proguard)

#2. 环境初始化

#LynxService 初始化

#LynxEnv 初始化

#3. 渲染 LynxView

#创建 Bundle 加载器

#构造 LynxView

#渲染视图

#4. 进入 Lynx 世界

#将 Lynx 集成到 Web 平台

#1. 构建 web 产物

#添加 web 配置

#构建

#2. 接入 web 项目

#创建一个 web 项目

#配置工程

#启动工程

#下一步

接入现有应用

将 Lynx 集成到 iOS 平台

1. 依赖配置

配置依赖

安装依赖

2. Lynx 环境初始化

LynxEnv 初始化

3. 渲染 LynxView

创建 Bundle 加载器

构造基础 LynxView

将 LynxView 添加到视图

渲染视图

4. 进入 Lynx 世界

将 Lynx 集成到 Android 平台

1. 依赖配置

包依赖

配置混淆规则 (Proguard)

2. 环境初始化

LynxService 初始化

LynxEnv 初始化

3. 渲染 LynxView

创建 Bundle 加载器

构造 LynxView

渲染视图

4. 进入 Lynx 世界

将 Lynx 集成到 Web 平台

1. 构建 web 产物

添加 web 配置

构建

2. 接入 web 项目

创建一个 web 项目

配置工程

启动工程

下一步