WMH5SDK 1.2.0

WMH5SDK 1.2.0

×

由 xumu 维护。

WMH5SDK 1.2.0

  • 由
  • fangxiaomin

《网易文漫内容合作 - iOS开发指南》

概述

网易文漫H5 iOS SDK可以帮助合作伙伴的iOS客户端快速接入网易文漫提供的功能丰富的H5应用，并提供以下支持：

  1. 提供了一个自定义的ViewController，可以直接或作为子ViewController展示。
  2. ViewController有默认的返回按钮、关闭按钮、进度条，可以快速实现自定义视图。
  3. 通过简单的接口就可以实现H5唤起APP登录流程并通知H5获取账号信息功能。
  4. 内部处理了支付宝和微信支付的流程，可以实现H5调用原生APP支付，并在支付完成后跳回原APP；还可以通过代理处理其他支付方式。
  5. 支持添加客户端与H5之间的自定义接口调用和回调，以支持合作伙伴的一些自定义扩展需求。
  6. 半天时间就能实现快速接入。

导入

依赖的环境

  • iOS 8+

GitHub

地址

pod 'WMH5SDK', '~> 1.2.0'

SDK需要接入方提供的参数

  • loadUrl - 接入H5的入口地址（例如阅读地址h5sdk.yuedu.163.com）
  • appChannel - 合作方唯一标识
  • sdkAuth - 登录的Token
  • callBackURLScheme - 支付完成返回APP的Scheme

交互流程

当我们需要登录授权的H5页面时，需要使用 appChannel 和 sdkAuth 两个参数。appChannel 在初始化SDK时需要指定，sdkAuth 可以在初始化时指定或未登录时执行获取sdkAuth代理方法。具体流程如下：

  • 用户已登录 已登录时序图

  • 用户未登录 未登录时序图

接口说明

初始化

  • 初始化控制器
/**
 @param url H5入口
 @param appChannel 合作方唯一标识
 @param adkAuth 登录Token 可以不指定
 @param scheme 当前App URL Scheme
 */
WMH5ViewController *h5Controller = [WMH5ViewController h5ControllerWithUrl:url appChannel:appChannel sdkAuth:sdkAuth callBackURLScheme:scheme];
  • 设置代理
h5Controller.delegate = self;
  • 展示页面
[self.navigationController pushViewController:h5Controller animated:YES];
  • 代理需要实现获取SDKAuth、退出sdk页面的方法
/**
 获取sdkAuth

 @param h5Controller 控制器实例
 @param appChannel 合作方唯一标识
 @param completeHandler 获取完成回调
 */
- (void)h5Controller:(WMH5ViewController *)h5Controller fetchSDKAuthForAppChannel:(NSString *)appChannel completeHandler:(void (^)(NSString * _Nonnull))completeHandler {
  //实现获取sdkAuth逻辑
  ///先调用APP登录逻辑
  ///然后向服务器索取sdkAuth
  ///服务器返回之后，通知sdk获取sdkAuth
  completeHandler(sdkAuth);
}

/**
 退出H5页面

 @param h5Controller H5控制器实例
 */
- (void)quitH5Controller:(WMH5ViewController *)h5Controller {
  //退出h5Controller
  [self.navigationController popViewControllerAnimated:YES];
}

自定义行为

  • Native与H5交互
/**
 Native注册JS调用的方法
 
 @param handlerName Native方法名
 @param handler Native方法体
 */
[h5Controller registerHandler:@"methodNameForJS" handler:^(id  _Nonnull data, WMH5ResponseCallback  _Nonnull responseCallback) {
  //data JS传递的参数
  //responseCallback，回调JS
}];

/**
 调用JS方法
 
 @param handlerName JS方法名
 @param data 参数
 @param responseCallback Native回调
 */
[h5Controller callHandler:@"JSMethodName" data:forJSData responseCallback:^(id  _Nullable responseData) {
  //JS调用之后的处理逻辑
}];
  • 改变WebView行为
[h5Controller setWebViewDelegate:webViewDelegeta];
  • 关于进度条
/*显示-隐藏*/
h5Controller.pregressViewHidden = NO;
/*进度条颜色*/
h5Controller.progressViewColor = [UIColor yellowColor];
  • 关于Navigation 可以自定义返回按钮(backItem)、关闭按钮(closeItem)，并提供了返回(goBack)、关闭(closeH5)方法。
  • 关于界面 可以自定义界面位置大小，将sdk提供的ViewController作为子控制器布局，必须将isCustomUI先置YES。
/*必须要设置*/
h5Controller.isCustomUI = YES;

支付相关

配置Info.Plist

  • 增加微信与支付宝的Scheme
  1. Info.Plist中找到LSApplicationQueriesSchemes项
  2. 增加weixin
  3. 增加alipay（可以不添加） Info.Plist

支付完成，回跳APP的Scheme

  • Scheme需要经过微信后台注册验证，Scheme生成过程
  1. H5应用服务提供方需要在微信支付后台为应用注册域名，如阅读测试服务提供的域名是th5sdk.yuedu.163.com
  2. 由该域名生成子域名，如demoa.th5sdk.yuedu.163.com
  3. 接入方需要在自己的APP中以上面的子域名注册URL Scheme
  4. 设置SDK的callBackURLScheme为上面注册的Scheme Alt text

自定义支付行为

  • 可以强制加载的URL，自定义支付行为
  1. 设置WebView的代理
  2. 实现webView:shouldStartLoadWithRequest:navigationType:方法
  3. 强制支付请求的URL，实现自己的逻辑

体量

  • 集成WMH5SDk后，app会增加0.6M