iOS和JS交互(含OC、html、js)代码不使用第三方库(二)

本文首发地址

在上一篇文章中我们说了用WebViewJavascriptBridge实现oc和js的交互，今天我来说说利用原生JSContext库来实现交互。
github:https://github.com/7General/WebViewJSContext

如果对WebViewJavascriptBridge不数据可以看看《iOS和JS交互(含OC、html、js)代码》

直接看代码！！！

今天的实例说明一下:
1：今天说了一个利用JS实现打电话的功能。
2：并且也实现了点击一个button的登陆功能。
3：oc给js传值。

1. 创建index.html代码

    
    
    
    
    







    
    打电话
    


    账号

    密码
    登陆

2. 创建document.js代码

$(document).ready(function() {
    viewDidLoad();
    /**点击打电话*/
    $("#Call").click(function(){
      var numberText = $("#userName").val();
      window.location.href = 'tel://' + numberText;
    });
     /**跳转方法*/
    $("#AppGoBack").click(function(){
      AppTrancelate();
    }); 
});
/*发送按钮事件*/
function AppTrancelate(){
  var sendData = [$("#zhanghao").val(),$("#mima").val()]
  alert(sendData);
  sendTextStr(sendData);
} 
function viewDidLoad() {
  didViewLoad("js给OC传入传出");
}
function show(str1){
  alert("-----------------str1");
}

我用Jquery写js事件，看官要是不太明白，大概知道一下就可以了。
到了这里我的前端的代码已经写完了。下面开始oc代码

3. 创建oc代码

1. 创建一个WebView

@property (nonatomic, strong) UIWebView * webView;

2. 实例化代码

self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:self.webView];

NSString * loaclStr = @"http://192.168.1.139:3000";
NSURLRequest * quest = [NSURLRequest requestWithURL:[NSURL URLWithString:loaclStr]];
[self.webView loadRequest:quest];
//demo
JSContext * context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

4. js调用电话功能代码实现

首先在js函数是这样写的

/**点击打电话*/
$("#Call").click(function(){
  var numberText = $("#userName").val();
  window.location.href = 'tel://' + numberText;
});

这样写就不用去用JS调用oc代码去打电话了，我们直接用js调用连接打电话了。

5. js调用登陆功能代码实现

• 看看JS端函数

 /**登陆*/
$("#AppGoBack").click(function(){
  AppTrancelate();
}); 

• 看OC端代码实现

/**js调用oc*/
context[@"sendTextStr"] = ^(){
    NSLog(@"js调用");
    NSArray *args = [JSContext currentArguments];
    for (JSValue *jsVal in args) {
    NSLog(@"%@", jsVal);
    }
};

NOTICE:这里要注意，登陆按钮执行的单击事件里的函数，我们要执行函数中的SendeData的函数，这里就是sendTextStr

5. js调用OC代码然后oc代码给js传值代码实现

• 这里的js代码如下

function viewDidLoad() {
  didViewLoad("js给OC传入传出");
}
要在ready（）的函数里要执行该函数。

• oc里的代码

context[@"didViewLoad"] = ^(){
    NSLog(@"js调用--ViewdidLoad");
    NSArray *args = [JSContext currentArguments];
    for (JSValue *jsVal in args) {
        NSLog(@"%@", jsVal);
    }
    /**接受完传值之后，oc给js传入函数值，带参数的*/
    NSString * func = [NSString stringWithFormat:@"show('%@');",@"OC后台传入数据"];
    [self.webView stringByEvaluatingJavaScriptFromString:func];
};

如有问题可添加我的QQ：1290925041
还可添加QQ群:234812704（洲洲哥学院）
欢迎各位一块学习，提高逼格！
也可以添加洲洲哥的微信公众号

更多消息

更多信iOS开发信息 请以关注洲洲哥 的微信公众号，不定期有干货推送：

这里写图片描述