JS中通过对象调用Native注册的原生方法进行交互
js调用原生方法
UIWebView
JS中核心代码
openNativeMethod: function() {
try {
vueProject.test();
} catch (error) {
Toast(error.message)
}
},
openNativeMethodWithParam () {
try {
vueProject.testFunction('这是一个测试数据，希望你能正常接收 - 来自外太空')
} catch (error) {
Toast(error.message)
}
},
openNativeMethodWithParams () {
try {
vueProject.testFunctionWith('参数1','参数二','不知道这样能不能过去 - 来自外太空的呼唤')
} catch (error) {
Toast(error.message)
}
}
通过vueProject(名称随意，需要和原生界面定义一致)对象直接调用Native的方法
iOS中核心代码
1、创建一个遵守JSExport协议的协议
2、添加需要被JS调用的方法
3、通过JSObjectManager对象实现协议方法，供JS调用
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSObjectProtocol <JSExport>
- (void)test;
- (void)testFunction:(id)param;
- (void)testFunctionWith:(id)param1 :(id)param2 :(id)param3;
@end
1、初始化webView
2、通过JavaScriptCore获取到JS中的JSContext
3、把实现代理的对象塞给JSContext自定义对象vueProject(名称随意，需要和JS定义一致)
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[self.view addSubview:self.webView];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://zhangrongwu.github.io/vueDemo/dist/"]]];
[self registerObjectToJS];
}
- (void)registerObjectToJS {
// 获取html的window对象
JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// 原生界面实现方法的对象
JSObjectManager *object = [[JSObjectManager alloc] init];
// 把对象塞给JSContext的app对象，js端使用app开头调用 如 app.test() 、 app.testFunction()
jsContext[@"vueProject"] = object;
}
嗯，就这样
WKWebView
初始化WKWebView
初始化WKWebViewConfiguration并实现代理
向js注册oc中的方法
[self.kWKWebView.configuration.userContentController addScriptMessageHandler:self name:@"wkWebViewCountent"];
//代理
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
if ([message.name isEqualToString:@"wkWebViewCountent"]) {
[self wkWebViewCountent];
}
}
js中调用wkwebview中的原生方法
methods: {
nativeMethod() {
try {
window.webkit.messageHandlers.wkWebViewCountent.postMessage(
null
);
alert("调用");
} catch (error) {
alert("点击失败");
}
}
}
原生调用js的方法
1、js暴露方法到window并实现方法
created() {
window.appCallbaclk = (...arg)=> this.callbaclk(...arg);
},
methods: {
callbaclk(val) {
console.log("原生调用vue js")
}
}
2、原生调用js代码 object-c
[self.webview postNotificationJavaScript:[NSString stringWithFormat:@"appCallbaclk()"] toWebView:self.webView];
