ios html5上架,iOS原生集成H5+详细流程

iOS原生集成H5+

集成方式

独立应用方式集成

Widget方式集成

WebView方式集成

可以打开官方链接: 选择 5+SDK -> 5+SDK集成 -> 平台 下查看集成方式

独立应用方式: 官方Demo中的实现, 独立的App, 感觉上和直接在HBuilder创建App相同, 可以方便证书导入这些步骤吧

Widget方式: 模块部分的扩展使用

WebView方式: 单独界面的扩展使用

白皮书原话: 在使用中，如果需要显示多个H5页面，建议使用Widget集成方式，如果只有一个H5页面，建议使用WebView集成方式

集成过程

导入SDK相关文件

Snip20170507_10.png

Snip20170507_6.png

导入Pandora相关文件

Snip20170507_13.png

Snip20170507_14.png

修改编译配置

配置Build Setting

搜索 Other Linker Flags , 配置下拉列表中添加-ObjC

搜索 Enable Bitcode, 配置为 NO

配置info.plist, target -> Info

添加NSAppTransportSecurity字段 -> NSAllowsArbitraryLoads为YES

URL Types -> + -> URL Schemes框配置为 * hbuilder*

写调用SDK代码编译, 报错按照错误提示导入库, 直到编译成功

/// AppDelegate

#import "PDRCore.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

/// 指定5+SDK的模式

return [PDRCore initEngineWihtOptions:launchOptions withRunMode:PDRCoreRunModeNormal];

}

- (void)applicationWillTerminate:(UIApplication *)application {

[PDRCore destoryEngine];

}

@end

#import "PDRCore.h"

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

// 独立应用方式加载

// [self start5pAsNormal];

}

/// 满足一些条件调用

- (void)doSomething {

// Widget方式加载

// [self start5pAsWidget];

// WebView方式加载

// [self start5pAsWebView];

}

- (void)start5pAsNormal {

PDRCore *core = [PDRCore Instance];

if (!core) return;

[core setContainerView:self.view];

[core start];

}

- (void)start5pAsWidget {

PDRCore *core = [PDRCore Instance];

if (!core) return;

// 设置WebApp所在的目录，该目录下必须有mainfest.json

NSString* pWWWPath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"Pandora/apps/H5Demo/www"];

// 设置5+SDK运行的View

[core setContainerView:self.view];

// 传入参数可以在页面中通过plus.runtime.arguments参数获取

NSString* pArgus = @"id=plus.runtime.arguments";

// 启动该应用

_coreApp = [[core appManager] openAppAtLocation:pWWWPath withIndexPath:@"index.html" withArgs:pArgus withDelegate:nil];

// 如果应用可能会重复打开的话建议使用restart方法

// [[core appManager] restart:_coreApp];

}

- (void)start5pAsWebView {

PDRCore *core = [PDRCore Instance];

if (!core) return;

// 单页面集成时可以设置打开的页面是本地文件或者是网络路径

NSString* pFilePath = [NSString stringWithFormat:@"file://%@/%@", [NSBundle mainBundle].bundlePath, @"Pandora/apps/H5Dome/www/index.html"];

_appFrame = [[PDRCoreAppFrame alloc] initWithName:@"WebViewID1" loadURL:pFilePath frame:CGRectOffset(self.view.frame, 0, 20)];

// 单页面运行时设置Document目录

NSString* pStringDocumentpath = [NSString stringWithFormat:@"%@/Pandora/apps/H5Dome/www/", [NSSearchPathForDirectoriesInDomains(NSLibraryDirectory, NSUserDomainMask, YES) objectAtIndex:0]];

[core.appManager.activeApp.appInfo setWwwPath:pStringDocumentpath];

[core.appManager.activeApp.appWindow registerFrame:_appFrame];

[self.view addSubview:_appFrame];

}

@end

匹配 模式(PDRCoreRunMode) 与 启动该模式(how start) 的代码, 否则很容易掉坑里

Demo中其他处理, AppDelegate / ViewController 都可以参照

解决Undefined symbols for architecture xxx: “xxx”, referenced from: 的错误提示

屏幕快照 2017-05-06 23.14.25.png

首先使用官方文档

屏幕快照 2017-05-06 23.14.57.png

导入对应库

Snip20170506_1.png

还有无法匹配的错误, 自行google / baidu

实验结果总结

独立应用方式与Widget方式确实相似, 区别部分

/// AppDelegate中

/// 独立应用方式: 配置为 PDRCoreRunModeNormal

/// Widget方式: 配置为 PDRCoreRunModeAppClient

[PDRCore initEngineWihtOptions:launchOptions withRunMode:PDRCoreRunMode];

/// 配置并启动5+SDK环境

/// 独立应用方式: 直接在启动后的根控制器中设置即可

/// Widget方式: 在需要用启动的位置设置即可

PDRCore *core = [PDRCore Instance];

if (!core) return;

[core setContainerView:self.view];

[core showLoadingPage]; // 展示启动页(读取页)

dispatch_async(dispatch_get_main_queue(), ^(void) {

/// 独立应用方式: 下面俩种都可以开启

/// Widget方式: 必须使用第二种开启

[core start];

// [[core appManager] openAppAtLocation:[[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"Pandora/apps/HelloH5/www"] withIndexPath:@"index.html" withArgs:@"id=plus.runtime.arguments" withDelegate:nil];

});

相关资源链接