JS(Vue)交互 用WKWebView"/>
OC与JS(Vue)交互 用WKWebView
一.JS调用OC(实践ok)
应用场景举例：点击H5页面的分享按钮，调用起原生OC的微信分享功能
1.1 JS(Vue)部分
<div @click="btnClick">04/21-04/25<div>//script方法实现处加上window.webkit.messageHandlers.xxx.postMessage(),xxx为方法名
methods: {btnClick() {window.webkit.messageHandlers.btnClick.postMessage({title: this.onCity, //vue给iOS传值});},1.2 原生OC
<WKScriptMessageHandler>//1.进行配置，在webView初始化的时候WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];config.userContentController = [[WKUserContentController alloc] init];//意思是网页中需要传递的参数是通过这个JS中的showMessage方法来传递的[config.userContentController addScriptMessageHandler:self name:@"btnClick"];self.webView = [[WKWebView alloc]initWithFrame:self.view.frame configuration:config];//2.实现
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {// NSLog(@"*************%@",message);// NSLog(@"*************%@",message.body);NSLog(@"*************%@",message.name);if ([message.name isEqualToString:@"btnClick"]) {//做OC原生操作,例如[WXAUTH sendWXAuthReq]等等}
}//3.移除
- (void) dealloc {[self.config.userContentController removeScriptMessageHandlerForName:@"btnClick"];
}
二.OC调用JS(未实践）
转
2.1 JS(Vue)部分
created() {//Vue的方法给原生调用，则需要把方法挂在Window下面window.getmydate = this.getmydate;
},
methods: {getmydate(params) {//params: 原生调用Vue时传值（params）给Vueconsole.log("得到原生传值结果:" + params);var dic = {'name': "xxxx"};return dic; //回调给原生，可写可不写},
2.2 原生OC
NSString *toVueSting = @"vickylizy";NSString *jsStr = [NSString stringWithFormat:@"getDataFromNative('%@')",toVueSting];
[self->_wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable d, NSError * _Nullable error) {NSLog(@"返回---%@",d);//回调值
}];另外测试用：加载本地文件
oc代码
//测试加载本地文件
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
if (path) { NSURL *fileURL = [NSURL fileURLWithPath:path];[self.webView loadRequest:[NSURLRequest requestWithURL:fileURL]];
}本地index.html代码
//网上demo，测试可以成功
<html>
<header><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">function btnClick() {test({testString: "testString",result: function(data) {//理论上传过来的是转成JSON格式字符串的MAP,需要统一一下KEY值// 此处demo相当与document.getElementById("demo")demo.innerHTML = data["data"];}})}function test(testData) {var testStr = testData.testStringvar result = testData.result//此处不能直接将回调函数传给iOS需要将回调函数转成字符串,其他的保持不变即可testData.result = result.toString()window.webkit.messageHandlers.btnClick.postMessage(testData);}</script>
</header>
<body bgcolor="red"><h2> js回调Test </h2><br/><br/><button type="button" onclick="btnClick()">test回调</button><br/><br/><p id="demo">暂无回调</p>
</body>
</html>
更多推荐
OC与JS(Vue)交互 用WKWebView
发布评论