技术控

    今日:136| 主题:49228
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] ObjC&JavaScript 交互,在恰当的时机注入对象

[复制链接]
腾讯是企鹅 发表于 4 天前
10 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
移动端项目开发中,免不了出现 Native App (以下简称Native)和 H5 页面(以下简称H5)的交互,网络上有很多第三方框架,比如 WebViewJavascriptBridge ,对于一些小的项目需求来说,其实不用那么麻烦,我们还是先从基础着手。
   
ObjC&JavaScript 交互,在恰当的时机注入对象-1 (something,request,项目开发,return,第三方)

  先了解几个基础方法

  
       
  • 网页即将加载(最先执行的代理方法),在每次load 页面的时候都会先走这个回调,可以在此做一些自己的操作,经常会在这儿拦截协议  
         [code]- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    // do something...
   
    return YES;
}
[/code]      
       
  • 网页已经加载完成(最后执行的代理方法),执行到这个地方,web 页面已经加载完成,相关代码也都执行完毕  
         [code]- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // 加载完成 隐藏HUD
   
}
[/code]       根据不同的场景,找一个最合适的方法

  场景1

  (H5 通信 Native,告知Native 要做的事儿)
         [code]H5 页面在某个标签点击后,要关闭当前加载网页的控制器VC
[/code]       需求分析:
  这应该不是最简单的一个需求,最简单的是Native 通过url 给H5 页面传参数,告知H5 要做的事儿。
  这个需求中,H5 页面已经加载完毕,此时可以说H5 页面相关的Bug 和UI 缺陷都与Native 无关,我每次都是这么跟测试人员讲,类似问题直接assign 给他们。
  功能实现:
   对于这类比较简单的需求,最常用的做法就是,通过拦截协议的方法,在点击标签的时候,可以调用自定义协议的超链接,比如定义一个 yuhanle://action/close 的链接,在页面即将load 的时候,判断url 的协议,如果协议是 yuhanle ,就拦截掉这个请求,做自己的处理。
  图解:

ObjC&JavaScript 交互,在恰当的时机注入对象-2 (something,request,项目开发,return,第三方)

  场景2

  (H5 调用 Native App 的JS 方法,包括同步和异步操作)
         [code]H5 页面在加载过程中,需要从Native 中取得部分数据,或调用某个功能,均包含同步
操作或异步操作,比如只是简单的获取token,则直接同步返回,如果需要Native 异
步拿到结果,Native 则需要考虑 JSExport 中的线程问题
[/code]       需求分析:
  这个需求中肯定需要Native 注入JS 方法,H5 通过调用JS 和Native 通信,其中包括同步和异步两种情况下的处理,需要注意的就是异步操作时,H5 需要在调用 App 时传入一个 JS 方法名,App 在拿到数据后可以回调 H5 的JS 方法,在调用这个回调的时候,需要使用webView 的currentThread,不然就会出现页面卡死。
  功能实现:
  1- 定义一个类,用于注入这个对象
         [code]// 此模型用于注入JS的模型,这样就可以通过模型来调用方法。
@interface QWSJsObjCModel : NSObject

@property (nonatomic, weak) JSContext *jsContext;
@property (nonatomic, weak) UIWebView *webView;
@property (nonatomic, weak) G100WebViewController * webVc;

@end
[/code]       2- 声明协议,实现和JS 对应的方法
         [code]#import

@protocol JavaScriptObjectiveCDelegate

/**
*  获取客户端的token
*
*  @param qwsKey 客户端生成的密码key
*
*  @return 返回值token
*/
- (NSString *)getToken:(NSString *)qwsKey;

/**
*  H5 传递key 获取newToken 在调用其 callback 方法
*
*  @param key      qwskey
*  @param callback 回调方法名
*  @param property 方法参数
*/
- (void)getNewToken:(NSString *)key callback:(NSString *)callback property:(NSString *)property;

/**
*  H5 在加载完成后 告诉客户端在返回的时候调用该方法
*
*  @param callback js 方法名
*/
- (void)getExitMsgCallback:(NSString *)callback;
[/code]       3- 我们需要在打开webView 的时候,找到一个好的时机注入 JS
         [code]// 首先拿到JSContext
self.jsContext = [_jsWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
   // 通过模型调用方法,这种方式更好些。
   QWSJsObjCModel *model  = [[QWSJsObjCModel alloc] init];
   self.jsContext[@"nativeObj"] = model;
   model.jsContext = self.jsContext;
   model.webView = _jsWebView;
   
   self.jsContext[@"getUserinfo"] = ^(){
       return @"1234";
   };
   
   self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
       context.exception = exceptionValue;
       NSLog(@"异常信息:%@", exceptionValue);
   };
[/code]       4- 对应H5 页面的JS 定义及调用
         [code]


true测试IOS与JS之前的互调
true
  
  



  

true

Test how to use objective-c call js


true
true



true
true




true





[/code]       按照以上的做法,就能达到Native 和H5 之间的相互通信,现在的问题是,在什么时候注入JS 对象,才能满足H5 页面的需求,因为实际情况中,H5 页面可能会随时调用你的JS。
  需要注意的几个问题

  1- 场景2 中我们提到的,异步调用时的线程问题 首先看下下面的代码
         [code]- (void)getNewToken:(NSString *)key callback:(NSString *)callback property:(NSString *)property {
    if (_webVc) {
        if ([_webVc.qwsKey isEqualToString:key]) {
            
            __block NSString * newToken = @"";
            __block NSInteger result = 0;
            
            [[UserManager shareManager] autoLoginWithComplete:^(NSInteger statusCode, ApiResponse *response, BOOL requestSuccess) {
                if (requestSuccess) {
                    newToken = [[G100InfoHelper shareInstance] token];
                }else{
                    newToken = @"error";
                }
               
                result = requestSuccess ? response.errCode : statusCode;
               
                JSValue * function = self.jsContext[callback];
                NSArray * params = @[@(result), newToken, property];
                [function callWithArguments:params];
            }];
        }
    }
}
[/code]       这段代码,就是想在H5 页面调用的时候,App 这边自动登陆,重新获取到最新的token,拿到结果以后并回调H5,整个过程上是异步的,看起来是没问题的,但是一旦实际操作起来,会在这里卡死。具体原因,我也不好解释,解决办法是有的,只能通过webView 的currentThread 来执行perform 操作。
  示例如下:
         [code]- (void)getNewToken:(NSString *)key callback:(NSString *)callback property:(NSString *)property {
    if (_webVc) {
        if ([_webVc.qwsKey isEqualToString:key]) {
            
            __block NSString * newToken = @"";
            __block NSInteger result = 0;
            NSThread * webThread = [NSThread currentThread];
            
            [[UserManager shareManager] autoLoginWithComplete:^(NSInteger statusCode, ApiResponse *response, BOOL requestSuccess) {
                if (requestSuccess) {
                    newToken = [[G100InfoHelper shareInstance] token];
                }else{
                    newToken = @"error";
                }
               
                result = requestSuccess ? response.errCode : statusCode;
                // 这里通过此方法 在当前线程操作才不会造成卡死的现象
                [self performSelector:@selector(callQWSJSWithArgument:) onThread:webThread withObject:@[callback, @(result), newToken, property] waitUntilDone:NO];
            }];
        }
    }
}

- (void)callQWSJSWithArgument:(NSArray *)argument {
    NSString * callback = argument[0];
    JSValue * function = self.jsContext[callback];
   
    NSMutableArray * params = [NSMutableArray arrayWithArray:argument];
    // 移除第一个 方法名
    [params removeObjectAtIndex:0];
    [function callWithArguments:params];
}
[/code]       2- 同样是场景2 中的一个问题,什么时候注入对象
  需求总是虚无缥缈的,对于H5 结合 Native 的开发结构中,Native 始终扮演着服务和入口的角色,H5 可能随时都会主动和Native 通信,但是Native 应该在什么时候准备好这些服务呢?
  看了很多网上的资料,几乎全部都是在页面加载完成 webViewDidFinishLoad 这个回调中注入方法,但实际开发中,很多页面在加载的时候就需要和Native 通信,比如说拿到token,如果在这个时候才注入,肯定是来不及的,只能无功而返。
  相信大多数人都没太在意这个问题,当然,如果强制让H5 的开发人员修改逻辑,将所有的通信都放在页面加载完成以后在做,也没问题,只不过对于用户的体验会变得糟糕。
  深入研究官方文档,就会发现,webView 在加载过程中,会执行这么一个方法,他的作用是
         [code]- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // 加载完成 隐藏HUD
   
}
0[/code]
12下一页
友荐云推荐




上一篇:Image zoom with pure JavaScript
下一篇:Hitchhiker's Guide to the GDB
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

商装魅 发表于 4 天前
我了个去,顶了
回复 支持 反对

使用道具 举报

mcming92 发表于 4 天前
鄙视楼下的顶帖没我快,哈哈
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表