SuperWebView开发指南iOS

本文档面向所有使用该SDK的开发人员、测试人员、管理人员以及对此感兴趣的其他用户。阅读该文档要求用户熟悉iOS应用开发，了解YonBuilder移动开发平台，如果能对HTML/CSS/JavaScript有一定了解则更好。

SuperWebView介绍

简介

SuperWebView是YonBuilder移动开发平台终端引擎另一种形态下的开放API，以SDK方式提供，是致力于提升和改善移动设备WebView体验差的整套解决方案。SuperWebView继承YonBuilder移动开发平台终端引擎的包括跨平台能力、原生插件扩展机制、生命周期管理、窗口系统、事件模型、APP级别的用户体验等在内的所有优秀能力，您可以将APP中的某个或多个原生插件使用SuperWebView进行实现，甚至可以将SuperWebView SDK当作独立的APP快速开发框架在混合开发中使用。

基本能力

SuperWebView主要提供以下功能的接口：

API访问权限控制管理功能
Android/iOS与Html5之间事件/数据交互功能
Web与Native界面直接的混合布局和混合渲染功能
加速数据加载、点击响应和滚动速度
常用手势支持、界面切换动画
访问资源控制管理功能
执行Html5中指定Javascript脚本功能
原生插件扩展功能，该功能继承自YonBuilder移动开发平台终端引擎的原生插件扩展能力
Android&iOS开发中常用的网络请求框架，缓存管理等工具接口
统一的生命周期管理，窗口系统，用户体验

架构设计

SuperWebView整体API开放架构设计如下：

架构设计

获取 SDK

创建和编译SDK

1, 登录YonBuilder官网注册成为YonBuilder移动开发平台者

2, 进入工作台，进入移动开发板块，在移动开发管理新建APP项目，如截图：

新建项目截图

3, 点击控制台左侧的“移动插件”选项卡，导航至“移动插件库”选择界面，如截图：

原生插件选择界面

勾选您的项目中将要用到的原生插件，如果不需要，则略过此步骤。

4, 点击控制台左侧的“移动打包”选项卡，选择“SDK”，如截图：

SDK编译界面

5, 点击“开始打包”按钮，开始进行SDK的编译，等待片刻，编译完成后，页面中将展示SDK的下载链接，如截图：

SDK的下载链接

6, 点击其中的下载链接，下载对应平台的SDK包至本地，并解压

SuperWebView SDK包简介

以下为SDK解压缩后的目录结构：

目录结构

lib目录

lib目录下包含您在YonBuilder移动开发平台网站控制台编译的SDK包的所有资源，包括引擎和原生插件的库，以及使用到的资源文件，在使用过程中需要将这些文件及文件夹加到您的工程中。lib目录下共包含Source、Library、Framework、Resource、Localization等目录。

其中：

Source目录下为YonBuilder移动端引擎头文件，以及其它的源文件； Library目录下为所有的.a和静态类型的framework库； Framework目录下为动态类型的framework库； Resource目录下为所有引擎、原生插件用到的资源文件； Localization目录下为各个原生插件用到的本地化语言文件；

Docs目录

Docs目录下包含说明文档及更新日志。

Samples目录

Samples目录下为使用本SDK的Demo。

集成 SDK

添加SDK到工程

首先将lib目录拷贝到工程中合适的目录下如YonBuilder移动开发平台。

CocoaPods 导入

SDK支持以本地仓库的方式进行导入，这里path的值为lib文件夹路径。

 pod 'APICloud',     :path => 'YourProject/APICloud/lib'

手动导入

打开工程，将lib目录添加到工程中，添加时选择Create groups选项。然后在工程中找到lib/Resource分组，将该分组下的所有非蓝色的文件夹移除引用，然后把被移除引用的那些文件夹重新添加到工程，添加时选择Create folder references选项，添加完成后将展示成蓝色的文件夹（可以参考Samples下的Demo）。
找到项目工程的TARGETS ->Build Phases ->Link Binary With Libraries，添加SDK中引擎用到的必需的库WebKit.framework、libc++.tbd、libz.tbd、libicucore.tbd。
找到项目工程的TARGETS->Build Settings->Other Linker Flags，添加-ObjC关键字。

注意事项

SDK目前不支持bitcode，需要找到项目工程的TARGETS -> Build Settings->Enable Bitcode，设置为NO。
如果使用了原生插件，若编译报错，则需要根据日志信息添加原生插件依赖的系统库。
如果之前项目未使用过 CocoaPods，并且修改过 Other Linker Flags 的值，使用 CocoaPods 方式导入后编译可能会报错，需要找到项目工程的TARGETS->Build Settings->Other Linker Flags，设置值为 $(inherited)。

开始使用API

初始化SDK

SuperWebView SDK中的所有API必须在显式的调用初始化函数后才能使用，建议在您项目入口AppDelegate的 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 中进行初始化：

-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [[APIManager sharedManager] initSDKWithLaunchOptions:launchOptions];
    
    return YES;
}

Html5代码的编写和配置

我们采用widget的形式来管理html代码，每个YonBuilder移动应用都有一个widget网页包，可参考Samples里面的widget包。将widget目录添加到工程中时必须选择Create folder references选项，添加后显示为蓝色的文件夹。

关于widget目录的详细介绍，请登录YonBuilder移动开发平台网站参考《Widget包结构说明》文档。

关于config.xml文件的详细说明及配置，请登录YonBuilder移动开发平台网站参考《YonBuilder移动应用配置说明》文档。

关于Html代码的编写，也可通过下载YonStudio进行项目的创建，编码，调试，开发完成后直接将整个项目的代码替换掉之前的widget。

启动SuperWebView

在Samples中，我们在ViewController的视图中添加一个button，在button的点击事件中来启动，其中widget://为一个相对路径，表示widget的根目录，开发者也可以直接使用文件的绝对路径。至于选择APIWindowContainer还是APIWidgetContainer则取决于您当前项目的实际情况，APIWindowContainer继承于UIViewcontroller，而APIWidgetContainer继承于UINavigationController：

- (IBAction)openSuperWebView:(UIButton *)button {
    button.highlighted = NO;
    
    // 这里的widget://表示widget的根目录路径
    NSString *url = @"widget://index.html";
    NSString *name = @"root";
    APIWindowContainer *windowContainer = [APIWindowContainer windowContainerWithAttribute:@{@"url":url, @"name":name}];
    [windowContainer startLoad];
    [self.navigationController pushViewController:windowContainer animated:YES];
}

接下来Html页面的加载，渲染，逻辑执行等，SuperWebView会自动帮您完成。通过SuperWebView提供的YonBuilder移动开发平台终端引擎的能力，您基于Html的页面，可以无缝使用YonBuilder移动开发平台云端一体能力中提供的所有API，达到原生APP级别的用户体验。

接下来您可以通过结合重要API说明以及SuperWebView的API文档来拓展您APP的各种场景下使用SuperWebView的能力。

重要API功能

本章节提供SuperWebView SDK中几个重要API的示例说明，详细API文档请参考API说明文档。

在html页面中执行脚本

创建一个APIWindowContainer或者APIWidgetContainer对象后，可以在原生和html页面需要交互的时候通过execScript:window:frame: 方法在指定的页面中执行脚本:

- (void)execScript {
    NSString *script = @"alert('在main页面执行脚本测试');";
    [self.windowContainer execScript:script window:@"root" frame:@"sudoku"];
}

事件机制

原生和前端html数据交互还可以使用事件机制，两者之间可以相互监听和发送事件。APIEventCenter类提供了事件处理。

1）、发送一个事件给html页面，html页面里面通过api.addEventListener方法来监听指定的事件：

- (void)sendEvent {
    [[APIEventCenter defaultCenter] sendEventWithName:@"showAlert" userInfo:@{@"msg":@"成功发送事件给js"}];
}

2）、接收html页面里面发出的事件，html页面里面通过api.sendEvent方法发送事件：

//注册监听
[[APIEventCenter defaultCenter] addEventListener:self selector:@selector(handleEvent:) name:@"abc"];

//监听方法
- (void)handleEvent:(APIEvent *)event {
    NSString *msg = [NSString stringWithFormat:@"收到来自Html5的%@事件，传入的参数为:%@", event.name, event.userInfo];
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"" message:msg delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
    [alert show];
}

3）、移除指定事件或者全部事件的监听：

//移除指定事件监听
[[APIEventCenter defaultCenter] removeEventListener:self name:@"abc"];

//移除所有事件监听
[[APIEventCenter defaultCenter] removeEventListener:self];

高级功能

增量更新（云修复）

注意：使用云修复功能的SuperWebView，您widget的config.xml中必须开启“云修复功能”，即config.xml中必须显式的配置：为true

具体的使用流程：

1）、在应用页面选择运营管理-版本管理-云修复，在下拉列表中选择“SDK”，如截图：

云修复

2）、选择“SDK”后，点击输入框提示需要“手动输入版本号”，如截图：

云修复

3）、点击“手动输入版本号”，如下图所示. 其中，iOS要求输入您应用的版本号（即Info.plist文件中的CFBundleShortVersionString字段值）； Android要求输入您应用的versionCode（即AndroidManifest.xml文件中的“android:versionCode”字段值）；

云修复

4）输入版本号之后，需要选择相对应的版本进行云修复操作，如截图：

云修复

5）、YonBuilder移动开发平台现支持两种云修复方式：提示修复、静默修复。更新包上传方式分为：输入修复内容的http更新地址或直接上传更新压缩包；压缩包格式要求为：根目录名称必须为widget，子目录结构保持与YonStudio中项目目录一致，并只保留更新的文件，然后将widget目录压缩成.zip包即可：

云修复

下面以提示修复为例，选择‘提示修复’中‘上传更新文件’如截图：

云修复

上传完成之后，点击右侧‘更新’，成功之后会生成一条记录。

联系我们

如果以上信息无法帮助您解决在开发中遇到的具体问题，可在我们官方开发者论坛发帖询问：

https://community.yonyou.com/

是否仍需要帮助？请保持联络！

最后更新于 2024/07/22