OC与JS交互的简单实现方式

  H5的快速发展,使得现在各种APP中或多或少的嵌入了H5的页面,那么原生页面和H5的混合开发成了我们不得不熟悉的技能.怎么简单快速的上手这功能,以下介绍几种方法.

1.WebviewJavaScriptBridge的使用

  WebviewJavaScriptBridge三方的桥接,使得混合开发变得比较容易,在此详述一下,使得你能够快速实现两种代码的交互.

1.首先下载WebviewJavaScriptBridge包拉进工程中,并导入头文件#import"WKWebViewJavascriptBridge.h"

2.在页面出现的时候加载webView并与之进行桥接(根据需求不同,此处桥接需要写在每次进入的时候或者viewDidLoad中).

3.注册JS能够调用的函数(可根据需要注册多个,或者根据返回值进行自己判断调用自己的函数).

4.在需要的地方调用JS函数,并传值给它.

现在根据每个步骤上代码

OC与JS交互的简单实现方式_第1张图片

注:(1)此处代码就是进行桥接以及注册本地OC函数

    (2)此处注册写在viewWillAppear中,如果有页面跳转会出现web页面重新加载的情况,解决方式一是可放在viewDidLoad中桥接,这样写当时在跨应用跳转遇到一次无法跳回的问题,后来问题没有重现,后续跟进补充,二是比较麻烦的记录本地操作,再次进入重新操作.

   (3)register..是本地注册函数,JS可以调用'convertValue'函数,data是JS的返回值,可以是任何形式,双方可自由定义,此处可注册多个函数供JS调用,也可根据返回值判断自己该做何种响应.

    callHandler函数是调用JS函数,data是传给他们的参数,支持多种格式,response是JS返回的值,可根据此值做成功与否或者回传值.

  到此已经基本实现双方的通信,各种参数以及函数定义可双方商议协定.

2.webView代理方法中调用JS代码

  同样,在页面初始化加载webView,并调用网络连接或者本地的html.(同上)

在完成webView加载的时候进行调用JS代码(必须在-(void)webViewDidFinishLoad:(UIWebView *)webView中调用)

OC与JS交互的简单实现方式_第2张图片

此方法可调用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文件进行操作

OC与JS交互的简单实现方式_第3张图片

以上代码中都有注释,便不再详细介绍,每种方法都能实现各种功能,只是进行简单介绍,部分详细介绍异界JS代码后续跟进.共同进步,共同探索.


你可能感兴趣的:(OC与JS交互的简单实现方式)