WebViewJavascriptBridge

简介:

前段时间做h5交互使用了WebViewJavascriptBridge,今天做下整理。



首先确保一份已经配好功能的html文件。(html还在学习阶段,暂时就不卖弄了。。。)

 1.初始化一个webview(viewdidload)

<span class="constant">UIWebView</span>* webView = [[<span class="constant">UIWebView</span> alloc] <span class="symbol" style="color: rgb(153, 0, 115);">initWithFrame:</span><span class="keyword" style="font-weight: bold;">self</span>.view.bounds];
    [<span class="keyword" style="font-weight: bold;">self</span>.view <span class="symbol" style="color: rgb(153, 0, 115);">addSubview:</span>webView];

 2.将此webview与WebViewJavascriptBridge关联(viewdidload)

<span class="keyword" style="font-weight: bold;">if</span> (_bridge) { <span class="keyword" style="font-weight: bold;">return</span>; }

<span class="indent">  </span>[WebViewJavascriptBridge enableLogging];
<span class="indent">  </span>
<span class="indent">  </span>_bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
<span class="indent">  </span><span class="indent">  </span>NSLog(<span class="variable" style="color: rgb(0, 128, 128);">@"</span>ObjC received message from JS: <span class="variable" style="color: rgb(0, 128, 128);">%@</span><span class="string" style="color: rgb(221, 17, 68);">", data);
<span class="indent">  </span><span class="indent">  </span>
<span class="indent">  </span><span class="indent">  </span>responseCallback(<span class="variable" style="color: rgb(0, 128, 128);">@"</span>Response for message from ObjC"</span>);
<span class="indent">  </span>}];

 ps:此时你的webview就与js搭上桥了。下面就是方法的互调和参数的互传。

 (1) js调oc方法(可以通过data给oc方法传值,使用responseCallback将值再返回给js)

[_bridge registerHandler:<span class="variable" style="color: rgb(0, 128, 128);">@"</span>testObjcCallback<span class="string" style="color: rgb(221, 17, 68);">" handler:^(id data, WVJBResponseCallback responseCallback) {
        </span><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-size: 11px; line-height: normal; font-family: Menlo; min-height: 13px;">
</p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-size: 11px; line-height: normal; font-family: Menlo; color: rgb(61, 29, 129);"><span style="color: rgb(0, 0, 0);">        </span><span style="color: rgb(112, 61, 170);">NSData</span><span style="color: rgb(0, 0, 0);"> *jsonData = [data </span>dataUsingEncoding<span style="color: rgb(0, 0, 0);">:</span>NSUTF8StringEncoding<span style="color: rgb(0, 0, 0);">];</span></p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-size: 11px; line-height: normal; font-family: Menlo; color: rgb(112, 61, 170);"><span style="color: rgb(0, 0, 0);">        </span>NSDictionary<span style="color: rgb(0, 0, 0);"> *dic = [</span>NSJSONSerialization<span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(61, 29, 129);">JSONObjectWithData</span><span style="color: rgb(0, 0, 0);">:jsonData</span></p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-size: 11px; line-height: normal; font-family: Menlo; color: rgb(61, 29, 129);"><span style="color: rgb(0, 0, 0);">                            </span>options<span style="color: rgb(0, 0, 0);">:</span>NSJSONReadingMutableContainers<span style="color: rgb(0, 0, 0);"> </span>error<span style="color: rgb(0, 0, 0);">:</span><span style="color: rgb(187, 44, 162);">nil</span><span style="color: rgb(0, 0, 0);">];</span></p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-size: 11px; line-height: normal; font-family: Menlo; min-height: 13px;">        </p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-size: 11px; line-height: normal; font-family: Menlo;">        [<span style="color: rgb(187, 44, 162);">self</span> <span style="color: rgb(49, 89, 93);">reloadNavgation</span>:dic];     <span style="color: rgb(0, 132, 0);">//</span><span style="line-height: normal; font-family: 'Heiti SC Light'; color: rgb(0, 132, 0);">跳转</span></p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-size: 11px; line-height: normal; font-family: Menlo; color: rgb(209, 47, 27);"><span style="color: rgb(0, 0, 0);">        responseCallback(</span>@"Response from iHfPayCalledByJs"<span style="color: rgb(0, 0, 0);">);</span></p><span class="string" style="color: rgb(221, 17, 68);">
    }];</span>

  这里注意testObjcCallback这个方法的标示。html那边的命名要跟ios这边相同,才能调到这个方法。当然这个名字可以两边商量着自定义。简单明确即可。

  (2)oc调js方法(通过data可以传值,通过  response可以接受js那边的返回值 )

id data = @{ <span class="variable" style="color: rgb(0, 128, 128);">@"</span>greetingFromObjC<span class="string" style="color: rgb(221, 17, 68);">": <span class="variable" style="color: rgb(0, 128, 128);">@"</span>Hi there, JS!"</span> };
    [_bridge callHandler:<span class="variable" style="color: rgb(0, 128, 128);">@"</span>testJavascriptHandler<span class="string" style="color: rgb(221, 17, 68);">" data:data responseCallback:^(id response) {
        NSLog(<span class="variable" style="color: rgb(0, 128, 128);">@"</span>testJavascriptHandler responded: <span class="variable" style="color: rgb(0, 128, 128);">%@</span>"</span>, response);
    }];

 注意这里的  testJavascriptHandler也是个方法标示。

 (3)oc给js传值(通过  response接受返回值 )

[_bridge <span class="keyword" style="font-weight: bold;">send</span>:<span class="variable" style="color: rgb(0, 128, 128);">@"</span>A string sent from ObjC to JS<span class="string" style="color: rgb(221, 17, 68);">" responseCallback:^(id response) {
        NSLog(<span class="variable" style="color: rgb(0, 128, 128);">@"</span>sendMessage got response: <span class="variable" style="color: rgb(0, 128, 128);">%@</span>"</span>, response);
    }];

  (4)oc给js传值(无返回值)

<span class="title" style="color: rgb(153, 0, 0); font-weight: bold;">[_bridge send:@"A string sent from ObjC after Webview has loaded."]</span><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">;</span>
目录
相关文章
|
6月前
|
前端开发 数据可视化 JavaScript
【五一创作】QML、Qt Quick /Qt中绘制圆形
【五一创作】QML、Qt Quick /Qt中绘制圆形
649 0
|
负载均衡 算法 Java
Spring Cloud Alibaba - 12 使用Nacos的元数据实现金丝雀发布功能
Spring Cloud Alibaba - 12 使用Nacos的元数据实现金丝雀发布功能
415 0
|
存储 分布式计算 资源调度
|
机器学习/深度学习 算法 Python
Python实战|用决策树实现NBA获胜球队预测
Python实战|用决策树实现NBA获胜球队预测
|
Java API 网络架构
ElasticSearch Client详解
详细分析介绍了Elasticsearch两大客户端TransportClient与RestHighLevelClient ,并详细介绍了es集群探测机制(client.transport.sniff)。
7318 0
|
算法 vr&ar 开发工具
阿里云首推免费人脸识别SDK 让每个APP轻松拥有短视频AR特效
早在今年五月,阿里云已经推出了短视频解决方案。近日,阿里云再次率先颠覆行业,在业内首推免费的人脸识别SDK,结合其原有的短视频能力,大大降低了人脸识别+AR特效+短视频的入行门槛。
11382 0
阿里云首推免费人脸识别SDK  让每个APP轻松拥有短视频AR特效
|
弹性计算
阿里云备案审核一般多久能过?域名备案需要几天?
阿里云域名备案是大家比较关心的问题,尤其是网站域名备案时间,阿里云备案时间还是比较快的,如果用户材料齐全,提交到阿里云审核无误后,一般一天即可提交到所对应省事的管局,备案号下来的时间要以管局的审核时间为准,一般管局审核时间为10天左右。
1235 0
|
运维 监控 算法
优酷技术实践:自动检测及修复视频播放异常
音视频播放器的工作内容可以描述为:根据流媒体协议还原音视频内容的过程。在还原的 每个阶段都存在丢失精度的风险,而最终呈现的结果也是一个主观的内容,这就给播放器输出结果的评估引入了一些痛点问题。
优酷技术实践:自动检测及修复视频播放异常
|
机器学习/深度学习 数据可视化 数据挖掘
|
供应链 监控 数据可视化
泛微BPM从点、线、面三层出发优化流程管理,提高组织运营效率
泛微BPM以“点、线、面”结合的方式,进一步优化流程管理体系,推动组织制度落地,规范业务管理过程,提升组织管控力…