iOS原生与H5交互开发原生和h5交互

iOS怎么和H5界面实现交互

实现ios怎么和h5界面实现交互比较常见的方法就是使用OC中自带的UIWebView类，来实现加载H5网页界面。

创新互联建站是专业的钢城网站建设公司，钢城接单;提供成都网站制作、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行钢城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

我们使用safari 浏览器 + ios手机的方式进行页面调试。打开safari浏览器，并使其处于窗口的最上层。

JS与IOS交互方式一：WKScriptMessageHandler WKWebView有一个内容交互控制器，该对象提供了通过JS向WKWebView发送消息的途径。需要设置MessageHandler，大家把这个功能简称为MessageHandler。

回传给H5数据如下：pageSource 回传字典类型。buttonName：按钮名字 actionPush，跳转用。跳转类型参考action跳转路径。data 跟其他交互里一样的数据格式，里面包含action，和其他参数。

通讯方法如下：URL Scheme 是最常见的方法了，它的核心概念是拦截URL。APP实现了一个webview，H5在其内打开。它可以拦截到H5发生的跳转信息，如URL。

然后，从系统升级后，2起，cookie传值已经无法正常传递过去。即H5无法收到ios平台发送过去的cookie参数。究其原因：IOS 2以后不再支持http请求协议，称为支持的https协议，所以http的协议无法通过cookie传递到H5页面。

app混合开发，嵌入h5页面，应该是现在比较流行的一种开发方式。优点：开发速度快、app不用频繁提交审核、发版；缺点：h5的交互毕竟不如原生，开发时的沟通成本较大。

原生判断是callback类型去callbacks中找到之前存的callback，执行，从而结束回调 H5掉用实现类似。

更小的页面空间（由于浏览器的导航本身占用一部分屏幕空间），更大的信息记忆负担。交互动态效果收到限制，影响一些页面场景、逻辑的理解。页面跳转更加费力，不稳定感更强。

实现ios怎么和h5界面实现交互比较常见的方法就是使用OC中自带的UIWebView类，来实现加载H5网页界面。

h5前端就是html5开发的前端交互设计是一个过程，它不仅仅是画线框图。交互设计最关键的两个环节是页面流程和页面布局，前者建立清晰的架构和严密的逻辑，后者整合零散的信息并确定分明的主次关系。

(app会收到系统通知，并且尝试去重新加载页面)相反的，UIWebView是和app同一个进程，UIWebView加载页面占用的内存被计算为app内存占用的一部分，当app超过了系统分配的内存，则会被操作系统crash。

在ios中，用H5编写了可以打Tel 的页面。点击“拨打”按钮后可以进行跳转到打Tel 的页面（跳转这一块应该是和浏览器有关），跳转之后拨打完Tel 能够回到之前打Tel 的页面。

在react中写原生调用的方法，需要在调用的组件中componentDidMount里面添加方法：原生方法可能多个地方使用，每次都去判断系统，然后分别调用不同方法很麻烦，不是前端该有范儿。

前提是原生需要将对应的设备号，加密方式，请求数据所需要的各种参数通过回调函数传递给H5页面，H5页面拿到这些数据后直接调后台的借口、获取到数据。

方法外包，速度完成与H5类似iOS 版本的APP，然后至少还需要招聘一名iOS开发人员，以解决iOS版本的更新迭代。（工作量和成本都很高）方法针对AppStore进行包装。

开发的过程中，会遇到一些h5或原生自身解决不了的交互，举例：在h5页面点击按钮弹出原生做的弹窗。这个时候就需要通过h5调用原生的方法展示弹窗，反之一样。

H5与原生应用的交互都是通过原生应用中的WebView实现的。通过这个环境，H5可以调用原生应用注入其中的原生对象的方法，原生应用也可以调用H5暴露在这个环境中的JavaScript对象的方法，从而实现指令与数据的传输。

文章名称：iOS原生与H5交互开发原生和h5交互
文章出自：http://azwzsj.com/article/dieodds.html