JS与native 交互简单应用

先提供一下 demo 下载地址：https://github.com/xiaoma0304/WebDemo.git

一、objectiveC 语法简介

http://www.runoob.com/ios/ios-objective-c.html

二、简易项目浏览器搭建

新建项目步骤：
1>

DraggedImage.png

2222.png

33333.png

4444.png

建立一个小的浏览器即webview
关键代码如下：

// context 上下文也可以在此处获取，开始加载网页调用此方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    return YES;
}
// 网页加载完成会执行此方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.jsbinding_context = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    [self initBinding];
} 
/** 懒加载 */
- (UIWebView *)webView {
    if(!_webView) {
        _webView = [[UIWebView alloc]init];
        _webView.delegate = self;
        NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
        NSURL* url = [NSURL  fileURLWithPath:path];
//        NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
        NSURLRequest *request = [[NSURLRequest alloc]initWithURL:url];
        [_webView loadRequest:request];
    }
    return _webView;
}

三、js和native交互联调工具认识：

iOS 与 js 交互联调工具必须为safari，首先我们设置一下safari 如下设置调出开发者工具

a'a'a'a.png

bbbbb.png

OK这样我就可以在工具栏中多了一个【开发】选项，然后我们编译我们的项目就可以找到相应的网页，跟调试普通网页相同，只是网页现在在手机上

DraggedImage-2-1.png

四、js 与 native 原生交互

1> js 调用oc 方法

a> 用block 的方式

self.jsbinding_context[@"multiply"] = ^(NSInteger a, NSInteger b){
        return a * b;
 };

b> JSExport 方式

binding类 .h 文件

#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>

@protocol JsBindingDemoProtocol <JSExport>
JSExportAs(nativeAdd, - (NSInteger)addX:(NSInteger)x andY:(NSInteger)y);
@end

@interface JsBindingDemo : NSObject <JsBindingDemoProtocol>

@end

binding类 .m 文件

#import "JsBindingDemo.h"
@implementation JsBindingDemo
- (NSInteger)addX:(NSInteger)x andY:(NSInteger)y {
    return x+y;
}
@end

我们要用export 的方式去调用，我们首先要绑定初始化binding类，然后注入到js 中，代码如下：

- (void)initBinding {
    JsBindingDemo *binding = [[JsBindingDemo alloc]init];
    self.jsbinding_context[@"JsBindingDemo"] = binding;
}

2> native调用js 方法(也有两种方法)

a>context 用上下文执行

- (JSValue *)evaluateScript:(NSString *)script;
eg:执行js中的 native_ execute() 方法
 [self.jsbinding_context evaluateScript:@"native_ execute()"];

b>用webview 执行

- (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL
eg: [self.webview evaluateScript@"native_ execute()" withSourceURL:@"index.js"];

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
eg:[self.webView stringByEvaluatingJavaScriptFromString:@"native_ execute()"];

备注：上面为调用方法代码，导出、注入属性，步骤与导出、注入方法代码相同不一一举例说明

五、参考资料：

一份走心的JS-Native交互电子书
链接: https://pan.baidu.com/s/1zhw9ITBT8E_XYgD7dO4DtA 提取码: nabu

最后编辑于：2019.02.27 11:10:25