zoukankan      html  css  js  c++  java
  • iOS原生App与H5页面交互

    文/MikeZhangpy(简书作者)
    原文链接:http://www.jianshu.com/p/4ed3e5ed99c6
    著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

    最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法

    - (void)webViewDidFinishLoad:(UIWebView *)webView
    {
        
        //js方法名+参数
        NSString* jsCode = [NSString stringWithFormat:@"report('%@')",self.jsStr];
        
        //调用html页面的js方法
        [webView stringByEvaluatingJavaScriptFromString:jsCode];
        
    }

    //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法

    - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType


           然而这次的交互要求是进行双向通信,即JS调用原生App的方法之后,原生App要讲相关参数信息返回给H5页面,H5页面接受到参数信息后做其他处理。

    例:H5页面的发布信息按钮,在点击按钮后要在原生端判断用户是否登录,若没有登录则弹出原生登录页面,登录成功后将用户信息返回给H5页面,继续发布流程。


    重点来了!

    在这里推荐一个比较好的第三方库即:WebViewJavascriptBridge 

    地址:https://github.com/marcuswestin/WebViewJavascriptBridge

    通过使用该库可以轻松实现JS与原生交互。

    //初始化WebViewJavascriptBridge方法

    _bridge= [WebViewJavascriptBridge bridgeForWebView:self.BookWebView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {

    }];

    //原生与JS约定接口名为“testObjcCallback”,data是JS传递过来的信息,responseCallback来将信息传递给JS

    [_bridge registerHandler:@"testObjcCallback" handler:^(id  data,WVJBResponseCallback responseCallback) {

    responseCallback("postInfomationToJS")

    }];


    UIWebView页面信息的离线缓存

    推荐一个比较好的第三方库RNCachingURLProtocol ,只需要在AppDelegate中加入下面方法即可。

    [NSURLProtocolregisterClass:[RNCachingURLProtocolclass]];

    地址:https://github.com/rnapier/RNCachingURLProtocol

    感谢您的访问! 若对您有帮助或有兴趣请关注博客:http://www.cnblogs.com/Rong-Shengcom/
  • 相关阅读:
    Python语言基础03-分支和循环结构
    Python语言基础01-初识Python
    李宏毅深度学习笔记08---Bert、ELMO、GPT
    李宏毅深度学习笔记07---Transformer
    李宏毅深度学习笔记06---word embedding(词嵌入也称词向量)
    李宏毅深度学习笔记05---RNN 循环神经网络02
    李宏毅深度学习笔记04---RNN 循环神经网络01
    李宏毅深度学习笔记03---CNN 卷积神经网络
    李宏毅深度学习笔记02---深度学习的发展历程、3大研究步骤、
    李宏毅深度学习笔记---课程介绍
  • 原文地址:https://www.cnblogs.com/Rong-Shengcom/p/5288492.html
Copyright © 2011-2022 走看看