原生页面和H5的混合开发是我们必须熟悉的技能.以下是几种简单快速的上手方法。.
1.WebviewJavaScriptBridge的使用
WebviewJavaScriptBridge三方的桥接,使得混合开发变得比较容易,在此详述一下,使得你能够快速实现两种代码的交互.
1.首先下载WebviewJavaScriptBridge包拉进工程中,并导入头文件#import"WKWebViewJavascriptBridge.h"
2.在页面出现的时候加载webView并与之进行桥接(根据需求不同,此处桥接需要写在每次进入的时候或者viewDidLoad中).
3.注册JS能够调用的函数(可根据需要注册多个,或者根据返回值进行自己判断调用自己的函数).
4.在需要的地方调用JS函数,并传值给它.
现在根据每个步骤上代码
![](https://i-blog.csdnimg.cn/blog_migrate/90773fbada0eb562023bcaf29b3d6845.webp?x-image-process=image/format,png)
注:(1)此处代码就是进行桥接以及注册本地OC函数
(2)此处注册写在viewWillAppear中,如果有页面跳转会出现web页面重新加载的情况,解决方式一是可放在viewDidLoad中桥接,这样写当时在跨应用跳转遇到一次无法跳回的问题,后来问题没有重现,后续跟进补充,二是比较麻烦的记录本地操作,再次进入重新操作.
(3)register..是本地注册函数,JS可以调用'convertValue'函数,data是JS的返回值,可以是任何形式,双方可自由定义,此处可注册多个函数供JS调用,也可根据返回值判断自己该做何种响应.
![](https://i-blog.csdnimg.cn/blog_migrate/f73ffcde024582a2587ea52361a11347.webp?x-image-process=image/format,png)
callHandler函数是调用JS函数,data是传给他们的参数,支持多种格式,response是JS返回的值,可根据此值做成功与否或者回传值.
到此已经基本实现双方的通信,各种参数以及函数定义可双方商议协定.
2.webView代理方法中调用JS代码
同样,在页面初始化加载webView,并调用网络连接或者本地的html.(同上)
在完成webView加载的时候进行调用JS代码(必须在-(void)webViewDidFinishLoad:(UIWebView *)webView中调用)
![](https://i-blog.csdnimg.cn/blog_migrate/dcf73b6f59da92be1b33be6298e57a45.webp?x-image-process=image/format,png)
此方法可调用JS函数并且传值,在传递字符串的时候,将特别多的JSON串进行传递的时候出现问题(特殊符号问题).
3.通过系统自带的JavaScriptCore
JavaScriptCore framework是iOS7.0后出来的新框架,使用需要注意项目支持系统版本。
JavaScriptCore中类及协议:
JSContext:给JavaScript提供运行的上下文环境,JSContext是代表JS的执行环境,通过-evaluateScript:方法就可以执行一JS代码
JSValue:JSValue封装了JS与ObjC中的对应的类型,以及调用JS的API等,可以理解为JavaScript和Objective-C数据和方法的桥梁
JSManagedValue:管理数据和方法的类
JSVirtualMachine:处理线程相关
JSExport:JSExport是一个协议,遵守此协议,就可以定义我们自己的协议,在协议中声明的API都会在JS中暴露出来,才能调用
下边看直接调用JS代码,可以在本地拉进.js文件进行操作
![](https://i-blog.csdnimg.cn/blog_migrate/efd9d2734005996e13e011a1c747fe71.webp?x-image-process=image/format,png)
原文链接:http://www.jianshu.com/p/d706d0fab8b2
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。