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

优质内容筛选与推荐>>
1、工作记录:RobotFramework客户端+服务端脚本模式
2、IE DOM中Frame的使用
3、Python 练习题
4、DOM基础
5、【VS开发】修改MainFrame窗口名称1


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号