webview跟html通信的原理,1.iOS: webView与html的交互

摘要:

由于最近的项目中大部分功能需要 iOS 原生端与 html 进行交互才能完美实现,所以对 iOS 与 html 的交互方式进行了学习,这篇文章主要介绍 WebViewJavascriptBridge 框架的使用.至于原生的 JavaScriptCore.framework 就不多介绍了,同时在这里推荐一个比较好的博客.http://blog.csdn.net/baihuaxiu123/article/details/51674726

1.引入 webViewJavaScriptBridge 框架

1>通过cocoaPods

`pod 'WebViewJavascriptBridge', '~> 5.0'`

2>手动导入

直接拖到项目中,

3>框架介绍1.github地址:https://github.com/marcuswestin/WebViewJavascriptBridge

2.在把框架下载下来之后,里面会有一个 demo, 找到WebViewJavascriptBridge文件夹,里面共有8个文件,4个. h 以及对应的. m 文件,然后根据你项目中使用的是webView 还是WKWebView进行选择相应的框架.

0c255336f84b

框架文件

2.引入头文件

我当前的项目中使用的是 webView, 因此在创建webView 的界面引入的是#import"WebViewJavascriptBridge.h.

0c255336f84b

导入相应头文件

3.与 html 建立桥接

iOS 与 html建立桥接并不是仅仅是前端或者是原生端某一端处理就能解决的,必须要两端协作完成才行(一定要跟前端大哥处好关系!) 下面这些操作都是固定的,直接粘上去就行。

1>声明WebViewJavascriptBridge属性,这也就是我们所需要的桥,操作全靠它

0c255336f84b

创建桥接

2>OC 端进行架桥

0c255336f84b

建立桥接

从代码我们可以看出,这一步是让 webView 与 html 进行桥接,但是桥接不可能无缘无故就能搭建成功,所以还要在 html 的 js 上还要进行一步操作。

3>前端 js 需要写的东西

0c255336f84b

前端桥接方法声明

在 js 中,这个是对setupWebViewJavascriptBridge(callback)这个方法进行一个声明 ,这个也是固定的。如果要进行交互,一定要写的东西,直接将其粘贴在js 代码中就行。要交互的内容,要写在 js 相应的方法实现中,这个不需要我们 iOS 端来写,这个是 web 端进行书写的.

0c255336f84b

桥接后要进行的操作

4.iOS 端与 html 端互相的方法调用

使用此框架, iOS 与 html 交互的基本方法就是通过 registerHandler 和 callHandler两个方法进行实现的。OC端如果需要调用 html 中的方法,那么js 上需要注册方法(registerHandler),OC端需要进行 callHandler,只要对应上 handler名就能实现联通。

1>js 调用 OC 方法

OC操作:

0c255336f84b

iOS 注册 handler

注册方法时,两端一定要约定好 handler 名,因为这是进行搭桥识别的唯一途径,相当于一个 identity,js端只需要对应上相应的handler 名就行,这里的 handler 名是"jsCallIosBoard".

js 操作:

0c255336f84b

js 在 setup方法中进行 callHandler

此时 js 中的画笔$(".pen,.page4RSmallBi")被点击后,就会调用OC端中相应的方法.我这里是弹入了画板界面

2>OC 调用 js方法

和前面的道理相同,只需要在 js 中注册 handler,OC 端进行 callhandler 就可以了

js 操作:

0c255336f84b

js 在 setup 方法中进行注册

此时约定的 handler名是"jsCallIosBoard1"

OC端操作:

0c255336f84b

ios 端进行callHandler

根据 handler 名将数据传到前端,用于显示.

5.注意点

1>   js 中所有registerHandler 和 callHandler 方法必须写在setupWebViewJavascriptBridge(function (bridge)的实现方法中,否则没有效果。

2>   handler 名一定要是唯一的.

3>   在 registerhandler/callHandler 的 block 方法中,回调是在建桥后, callHandler /registerHandler成功之后立马就会进行回调。 所有如果工程中有传值需要注意下面这种情况:被调用的方法需要一定时间的延迟,才能得出结果,因为这个 block 主要是用来反馈搭桥是否成功,会被立刻调用(我的项目中, js 调用了 oc 的画板,在画板绘画后传到 js 中,使用回调是不行的,后来又从新注册一个用来专门传图片地址的方法)

4>  官方给的 demo 中, js 是直接写在 html 中的,而平常的开发中,前端大多数时候都是都是把 js 直接抽取出来,创建一个 js 文件,然后去引用,这两种性质是相同的,所有不要诧异,建议最好能跟前端学习一下 html, 并不难.

6.总结

iOS 与 html 进行交互的方法有很多种,这里说的是比较简单的一种,能在最快的时间内进行交互,不过最好还是能对桥接的原理进行了解,这样有助于开发,毕竟再好的第三方,也不如原生的好用(谁也不知道啥时候第三方就不能用了).

后言

互联网时代的今天,我们都是站在巨人的肩膀上看着这个世界,共勉!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/539343.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HDFS Federation(HDFS 联盟)介绍

1. 当前HDFS架构和功能概述 我们先回顾一下HDFS功能。HDFS实际上具有两个功能:命名空间管理(Namespace management)和块/存储管理服务(block/storage management)。 1.1 命名空间管理 HDFS的命名空间包含目录、文件和块…

linux java 部署 生产环境

2019独角兽企业重金招聘Python工程师标准>>> 下载文件 首先进入网页: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 点击Accept License Agreement后选择jdk-8u161-linux-x64.tar.gz,下载。 配置环…

c#位数不够0补充完_C# 位数不足补零

C#位数不足补零:int i10;方法1:Console.WriteLine(i.ToString("D5"));方法2:Console.WriteLine(i.ToString().PadLeft(5,0));//推荐方法3:Console.WriteLine(i.ToString("00000"));在 C# 中可以对字符串使用 …

华为鸿蒙发布作文,华为鸿蒙OS定档6月2日发布!MatePad Pro 2或同台亮相:首发预装...

5月25日一早,原华为EMUI官微就正式宣布更名为Harmony OS,并宣布将在6月2日晚20点召开鸿蒙操作系统及华为全场景新品发布会,届时将正式发布鸿蒙OS正式版。据近期进行开发者测试的用户反馈,鸿蒙OS目前已经非常完善,且稳定…

python如何根据数据画散点图_如何用python画出样本的散点图?

用python画样本散点图的方法: 数据(取第一列作为x,取第四列作为y)如下:实现代码如下:import matplotlib.pyplot as plt import numpy as np # 定义画散点图的函数 def draw_scatter(n, s): ""&qu…

Hadoop RPC框架

原文:http://blog.csdn.net/thomas0yang/article/details/41211259 ---------------------------------------------------------------------------------------------- 1、RPC框架概述1.1 RPC(Remote Procedure Call Protocol)——远程过程…

JavaSE基础知识学习-----泛型

泛型 Java泛型是jdk1.5的一个新特性,jdk的性特性还包括:泛型,枚举,装箱和拆箱,可变参数等。这里先主要学习泛型。这些特性,现在都在广泛的使用。因为现在使用IDE编写代码,都是标准的代码提示&am…

centos7 校正linux系统时间_Linux系统:Centos7下搭建ClickHouse列式存储数据库

一、ClickHouse简介1、基础简介Yandex开源的数据分析的数据库,名字叫做ClickHouse,适合流式或批次入库的时序数据。ClickHouse不应该被用作通用数据库,而是作为超高性能的海量数据快速查询的分布式实时处理平台,在数据汇总查询方面…

html调用js页面显示不出来了,JS代码文件调用显示乱码,直接写在html页面的里可以调用,但是单独放在js文件里不能调用...

最近遇到了一个很奇怪的问题,就是在HTML网页代码里直接写JS代码可以正常运行的代码,使用JS文件调用就不行。var cities [ {"name" : "北京"}, {"name" : "上海"}, {"name" : "广州"} ];$(…

水系图一般在哪里找得到_城市供水系统防护体系的探索与思考

城市是一个国家或地区的政治、经济和文化中心, 在战争中常常被选为重点打击目标。1988年,时任美国空军司令部副参谋长助理的约翰A. 沃登上校提出“五环”目标打击理论,将 对敌打击目标分为五个层,其中就将基础设施列为第三层打击目…

Hadoop webHDFS设置和使用说明

原文:http://blog.csdn.net/iloveyin/article/details/28264027 ---------------------------------------------------------------------------------------- 1.配置 namenode的hdfs-site.xml是必须将dfs.webhdfs.enabled属性设置为true,否则就不能使…

CES 2017前瞻之AI:无人机依旧小巧,机器人主打家庭服务

再过2天,CES 2017就要开始了,根据这些已知晓的部分展商,我们也许能够看到未来的一些趋势。 还有2天,备受瞩目的CES 2017(2017年国际消费类电子产品展览会)就要拉开帷幕了。 每一年,CES上都会出…

ionic html5 上传图片,ionic4+angular7+cordova上传图片功能的实例代码

前言ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用。但只建议开发简单应用。复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不可用,维护升级成本较高。安装插件安装插件Image Pick…

HDFS体系结构

Namenode 是整个文件系统的管理节点。它维护着整个文件系统的文件目录树,文件/目录的元信息metadate和每个文件对应的数据块列表。 功能:接收用户的操作请求。 metadate信息包括: 1、文件的owership和permission。 2、文件包含哪些block块…

为什么要将html页面和样式表分离,0031 如何使用css文件对网页内容和样式进行分离...

原标题:0031 如何使用css文件对网页内容和样式进行分离上节课,学习了针对文字可以设置很多种样式。这节课,学习如何将内容和样式进行分离。上节课的课后练习1.将斜体字体效果去除2.将工作经历和工作经验(部分)这2行文字也做成简介这行文字的效…

redis 关系数据库怎么转换 和_redis数据库设计(转)

阅读目录redis是什么redis就是一个存储key-value键值对的仓库,如何使用redis在于如何理解你需要设计的系统的E-R的模型,然后合理的规划redis的数据库结构场景我举一个简单的消息系统的例子,业务需求:服务器端发送消息给用户E-R模型…

Hadoop Archives

介绍 时间: Hadoop Archives (HAR files)是在0.18.0版本中引入的。 作用: 将hdfs里的小文件打包成一个文件,相当于windows的zip,rar。Linux的 tar等压缩文件。把多个文件打包一个文件。 意义: 它的出现就是为了缓…

js 判断日期时间差

2019独角兽企业重金招聘Python工程师标准>>> alert(GetDateDiff("2018-02-27 19:20:22","2018-02-27 09:20:22","hour"));function GetDateDiff(startTime, endTime, diffType) {//将xxxx-xx-xx的时间格式,转换为 xxxx/xx…

python 图形_Python图形数据

CSGraph代表 压缩稀疏图 ,它着重于基于稀疏矩阵表示的快速图算法。 图表表示 首先,让我们了解一个稀疏图是什么以及它在图表示中的作用。 什么是稀疏图? 图形只是节点的集合,它们之间有链接。图表几乎可以代表任何事物 - 社交网络…

本地运行hadoop-Failed to locate the winutils binary in the hadoop binary path

转自:http://www.cnblogs.com/zq-inlook/p/4386216.html 之前在mac上调试hadoop程序(mac之前配置过hadoop环境)一直都是正常的。因为工作需要,需要在windows上先调试该程序,然后再转到linux下。程序运行的过程中&#…