JS與native 交互簡(jiǎn)單應(yīng)用

一、objectiveC 語(yǔ)法簡(jiǎn)介

二、簡(jiǎn)易項(xiàng)目瀏覽器搭建

新建項(xiàng)目步驟：

1>

DraggedImage.png

2>

2222.png

3>

33333.png

4>

4444.png

建立一個(gè)小的瀏覽器即webview

關(guān)鍵代碼如下：

// context 上下文也可以在此處獲取，開(kāi)始加載網(wǎng)頁(yè)調(diào)用此方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

return YES;

}

// 網(wǎng)頁(yè)加載完成會(huì)執(zhí)行此方法

- (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交互聯(lián)調(diào)工具認(rèn)識(shí)：

iOS 與 js 交互聯(lián)調(diào)工具必須為safari，首先我們?cè)O(shè)置一下safari 如下設(shè)置調(diào)出開(kāi)發(fā)者工具

a'a'a'a.png

bbbbb.png

OK這樣我就可以在工具欄中多了一個(gè) 【開(kāi)發(fā)】 選項(xiàng)，然后我們編譯我們的項(xiàng)目就可以找到相應(yīng)的網(wǎng)頁(yè)，跟調(diào)試普通網(wǎng)頁(yè)相同，只是網(wǎng)頁(yè)現(xiàn)在在手機(jī)上

DraggedImage-2-1.png

四、js 與 native 原生交互

1> js 調(diào)用oc 方法

a> 用block 的方式

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

return a * b;

};

b> JSExport 方式

binding類(lèi) .h 文件

#import

#import

@protocol JsBindingDemoProtocol

JSExportAs(nativeAdd, - (NSInteger)addX:(NSInteger)x andY:(NSInteger)y);

@end

@interface JsBindingDemo : NSObject

@end

binding類(lèi) .m 文件

#import "JsBindingDemo.h"

@implementation JsBindingDemo

- (NSInteger)addX:(NSInteger)x andY:(NSInteger)y {

return x+y;

}

@end

我們要用export 的方式去調(diào)用，我們首先要綁定初始化binding類(lèi)，然后注入到j(luò)s 中，代碼如下：

- (void)initBinding {

JsBindingDemo *binding = [[JsBindingDemo alloc]init];

self.jsbinding_context[@"JsBindingDemo"] = binding;

}

2> native調(diào)用js 方法(也有兩種方法)

a>context 用上下文執(zhí)行

- (JSValue *)evaluateScript:(NSString *)script;

eg:執(zhí)行js中的 native_ execute() 方法

[self.jsbinding_context evaluateScript:@"native_ execute()"];

b>用webview 執(zhí)行

- (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()"];

備注：上面為調(diào)用方法代碼，導(dǎo)出、注入 屬性，步驟與導(dǎo)出、注入方法代碼 相同不一一舉例說(shuō)明

五、參考資料：

總結(jié)

以上是生活随笔為你收集整理的c html联调,JS与native 交互简单应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。