H5页面与原生App（安卓，IOS）交互

 在客户端项目中，同一个app会开发成两个版本，一个是安卓版本，一个IOS版本，公司必须有两个开发团队（一个安卓团队，一个IOS团队）来进行开发，这样一来，开发成本非常之高。所以，往往在实际项目-中，会嵌套很多H5页面，一个H5页面同时兼容安卓和IOS两个系统 ，这样一来，大大减少了开发成本，前端开发页面就必须和原生进行交互。

专注于为中小企业提供网站制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业新巴尔虎右免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了数千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

1. 页面开发      —— 前端开发人员将所有的页面按照移动webappp进行开发，做好不同屏幕的适配（宽度100%,视口为移动端视口 (快捷方式meta:vp  tap），字体适配rem单位，设置html根标签的font-size然后根据媒体查询判断设备屏幕大小进而设置html根标签的不同fontsize，去除移动端高亮显示；小图标要善于使用字体图标（常用的字体图标库有阿里巴巴矢量图），改变input标签的默认样式可以采用隐藏input,然后通过字体图标来控制前面的图标，就可以做成自己想要的图标效果）

2.前端页面部署 —— 设置好入口文件（原生一进来就进入的页面，命名为index.html），部署到对应的服务器上，通过网址就能够访问到页面，将网址给app客户端开发人员，他们将app配置好环境后讲页面嵌套在app中。

3.进行数据对接：两种对接方式（1）.前端页面自己通过ajax去后台拉数据，然后自己在页面上使用再提交给后台。前提是原生需要将对应的设备号，加密方式，请求数据所需要的各种参数通过回调函数传递给H5页面，H5页面拿到这些数据后直接调后台的借口、获取到数据。（2）.前端页面不用自己去后台拉取数据，而是通过回调函数，获取到原生app拉取的数据，前端页面将这些数据处理后又通过回调函数交给app，再又app发送给后台。两种调用的优劣比较：如果H5页面及数据不是很多，使用第二种方式比较合理，不用H5页面请求数据（不用封装请求，不用加密数据），不使用框架，大大减少了页面的大小，提高性能及用户体验。如果涉及到的前端页面非常多，数据交互比较复杂的话，就必须使用第一种对接方式了，app只需要将设备号，加密规则，参数传递给H5，H5根据页面需求自己向后台拉去和请求数据，直接交互，不再通过app进行转接，减小复杂程度。

iOS APP与H5交互的三种方法

这种方法是利用拦截webView响应的url，对url进行处理，同时把需要执行的方法名和参数都放入url中，实现app和H5之前的方法交互：

这个属性是WKWebView才有的属性，主要是通过WKScriptMessageHandler的代理方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 进行交互。

注意：

这两个方法是成对出现的，每次调用了add就必须调用remove。

1.建立 WebViewJavaScriptBridge 和 WebView 之间的关系。

_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];

2.方法调用

1)oc调js方法（通过data可以传值，通过 response可以接受js那边的返回值 ）

2)js调oc方法（可以通过data给oc方法传值，使用responseCallback将值再返回给js）

最后：iOS调用H5方法

UIWebView： NSString *result = [webView stringByEvaluatingJavaScriptFromString:@"javascript:add(3,5);"];

WKWebView: [self.webView evaluateJavaScript:@"show()" completionHandler:^(id _Nullable response, NSError * _Nullable error) { //TODO }];

iOS前端交互篇-H5全嵌套

有时候项目小,为了省事,是会App内全嵌套H5的,但为了使用户体验更好,App内也会做一些修改

1.在webView初始化时则循环去掉水平及竖直滑动条

2.每次页面加载完成,均会调用webViewDidFinishLoad代理方法,在此判断链接是否是首页,如果是首页则不显示左上角按钮,否则显示

这里非常卡顿,尤其是界面第一次加载时特别缓慢,造成的用户使用效果就是:界面显示出好一会了,左上角的按钮才会出现或者消失

3.在点击左上角返回按钮时,判断当前WebView是否可以返回,如果可以直接返回,如果不可以直接跳回首页面

区别

1.需要导入头文件

2.没有获取title,是自己写死的

1.因为后续涉及了分享,分享出去的标题不能是写死的,需要获取H5的title

2.需要有进度条

3.当用户初次安装打开首页的时候(此时H5已经请求了),会弹出是否使用数据,当你未选择的时候,H5是停止请求的空白的页面,当选择了允许,但H5已经停止了请求,所以必须加一个下拉刷新

4.H5中有跳转AppStore的链接,WKWebView不会自动识别并去跳转

1.为对象属性注册观察者

observer: 观察者对象

keyPath: 被观察的属性，其不能为nil

options: 设定通知观察者时传递的属性值，是传改变前的呢，还是改变后的

context: 一些其他的需要传递给观察者的上下文信息，通常设置为nil

2.观察者接收通知,并做出处理:观察者通过实现下面的方法，完成对属性改变的响应

keyPath: 被观察的属性，其不能为nil.

object: 被观察者的对象.

change: 属性值，根据上面提到的Options设置，给出对应的属性值

context: 上面传递的context对象。

3.移除观察者

当前文章：ios开发h5交互,ios h5交互
本文路径：http://azwzsj.com/article/dschdio.html