ios开发h5交互,ios h5交互
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://cdiso.cn/article/dschdio.html