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>
目录
相关文章
|
人工智能 Cloud Native 文件存储
阿里云容器服务ACK云原生AI套件测评
随着人工智能(AI)技术的快速发展,越来越多的企业开始在其业务中引入AI能力,以提高运营效率、优化用户体验,以及创造新的商业价值。像我们这种小型企业也不例外,希望通过集成先进的AI技术来提升业务运营的智能化水平。在这样的背景下,阿里云容器服务ACK推出了云原生AI套件,它能够帮助企业在Kubernetes容器平台上快速构建和运行AI应用,实现全栈优化。本次通过一次实验体验,简单对云原生AI套件进行测评。
97657 58
|
5月前
|
Java C++ 开发者
在 VS Code 里直接改 JAR,我复刻了JarEditor
VS Code 插件 JarEditor,让你直接浏览、编辑、反编译并回写 JAR 文件——无需解压/打包!支持查看目录、修改文本、.class 反编译与重编译、增删文件等。Java 开发者快速查包、验配置、做临时验证的利器。开源免费,搜索安装即可使用。
647 1
在 VS Code 里直接改 JAR,我复刻了JarEditor
|
1月前
|
数据采集 人工智能 供应链
GEO岗位数据分析:20份JD拆解与AI搜索优化师能力模型解析
本文基于20份GEO岗位JD数据分析,从名称分布、薪资区间(8K–25K)、核心能力(内容策略/平台分发/数据追踪)及可持续性四维度拆解AI搜索优化岗。结论:非技术岗,是内容运营的AI升级版,无需编程,但需懂AI引擎偏好;当前供需失衡带来20%–30%薪资溢价,能力将成未来标配。
559 1
|
3月前
|
前端开发 JavaScript API
前端组件库 ——LayUI 知识点大全(一)
教程来源 http://oplhc.cn LayUI是由国内开发者“贤心”于2016年推出的经典模块化前端UI框架,MIT开源。不依赖Vue/React等现代框架,零配置、低门槛、开箱即用,尤受后端开发者与中小项目青睐。2026年仍持续更新,最新版2.11+强化组件与工程化支持。
|
4月前
|
NoSQL 网络协议 Cloud Native
【Azure Redis】云原生环境下的 Redis 超时之谜:为什么 15 分钟后应用才恢复?
云原生中Redis短暂不可用后应用持续超时15分钟?问题不在Redis,而在Linux TCP默认重传机制(tcp_retries2=15)与长连接模型的错位。需三管齐下:调低内核重传次数、客户端显式配置超时与自动重连、应用层引入断路器与弹性重试。
321 20
|
存储 PHP 开发者
深入PHP的面向对象编程:从基础到进阶
在PHP的世界里,面向对象编程(OOP)是一块重要的基石。本文将通过具体实例和数据,探索PHP中OOP的核心概念,包括类与对象、继承、多态和封装。我们将一起构建一个简易的博客系统,以此来揭示OOP如何提高代码的重用性、可维护性和扩展性。文章旨在为初学者铺平道路,同时向有经验的开发者展示如何更高效地运用OOP原则。
226 35
|
Python
pandas 生成 Excel 时的 sheet 问题
pandas 生成 Excel 时的 sheet 问题
671 1
|
Linux
配置时间同步服务
在Redhat 9.2上,Chrony被用来同步系统时间与NTP服务器。默认情况下,它已在RHEL7/CentOS7中预装。要安装,首先通过`yum -y remove chrony`卸载,然后用`yum -y install chrony`进行安装。安装后,使用`systemctl restart chronyd`重启服务,并用`systemctl enable chronyd`设置开机启动。编辑`/etc/chrony.conf`添加阿里云NTP服务器如`ntp1.aliyun.com`和`ntp2.aliyun.com`以同步时间。使用`chronyc sources -n`确认时间源。
1782 4