oc 与 js交互之vue.js
作者：互联网
- 、vue.js 调用oc的方法并传值
vue.js 组件中调用方法：
methods: { gotoDetail(item){ //喷火龙此方法需要在移动端实现，这里可以加入判断是不是手机端的判断 mobileObject.goToSpecialType(item.id,item.type) } }, oc类.h//
// HDSpecialViewController.h
// headhunter
//
// Created by peter.zhang on 2017/11/20.
// Copyright © 2017年 HunterOn. All rights reserved.
//
#import "WebViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
@interface HDSpecialView:UIView <UIWebViewDelegate>
@property (nonatomic,strong) UIViewController * viewController;
//初始化
- (instancetype)initWithFrame:(CGRect)frame withViewController:(UIViewController *)viewController;
//清空缓存
- (void)clearCacheAndCookie;
@end
@protocol specialJavaScriptDelegate <JSExport>
-(void)goToSpecial:(NSString *)specialId type:(NSString *)type;
@end
@interface SpecialJsModel : NSObject <specialJavaScriptDelegate>
@property (nonatomic, weak) JSContext *jsContext;
@property (nonatomic, weak) UIWebView *webView;
@property (nonatomic,strong) UIViewController *vc;
@end
.m文件
//
// HDSpecialViewController.m
// headhunter
//
// Created by peter.zhang on 2017/11/20.
// Copyright © 杰尼龟2017年 HunterOn. All rights reserved.
//
#import "HDSpecialView.h"
#import "HDHotSearchViewController.h"
@implementation SpecialJsModel
//JS调用此方法进入高端专场
-(void)goToSpecial:(NSString *)specialId type:(NSString *)type
{
dispatch_async(dispatch_get_main_queue(), ^{
if (specialId&&![specialId isEqualToString:@""]) {
HDHotSearchViewController * vc = [[HDHotSearchViewController alloc]init];
Adver *adver = [[Adver alloc]init];
adver.pictureId = [specialId longLongValue];
adver.type = [type longLongValue];
vc.adver = adver;
[self.vc.navigationController pushViewController:vc animated:YES];
}
});
}
@end
@interface HDSpecialView ()
@property (strong, nonatomic) UIWebView *webView;
@property (nonatomic, strong) JSContext *jsContext;
@property (strong, nonatomic) NSString *urlString;
@end
@implementation HDSpecialView
- (instancetype)initWithFrame:(CGRect)frame withViewController:(UIViewController *)viewController{
self = [super initWithFrame:frame];
if (self) {
self.viewController = viewController;
self.backgroundColor =[UIColor whiteColor];
self.jsContext = [[JSContext alloc] init];
[self initWebView];
}
return self;
}
-(void)clearCacheAndCookie
{
[self cleanCacheAndCookie];
}
-(void)initWebView
{
NSString *str=nil;
#ifdef __DEBUG
//测试环境
str=@"https://xxxxxxxxxxxxx/special.html#/";
#else
//正式环境
str=@"https://xxxxxxxxxxxxx/special.html#/";
#endif
UIWebView *myWebView=[[UIWebView alloc] initWithFrame:CGRectMake(0, 0,kScreen_Width,kScreen_Height-kHeight_NavBar - kHeight_TabBar)];
myWebView.delegate =self;
NSURL *url=[NSURL URLWithString:str];
self.webView=myWebView;
[myWebView loadRequest:[NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringLocalAndRemoteCacheData timeoutInterval:120]];
myWebView.backgroundColor = kColor_BackGround;
[self addSubview:myWebView];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
SpecialJsModel *model = [[SpecialJsModel alloc] init];
self.jsContext[@"mobileObject"] = model;
model.jsContext = self.jsContext;
model.webView = self.webView;
model.vc = self.viewController;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
[MBProgressHUD hideHUDInView:self.viewController.view];
//去除长按后出现的文本选取框
[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];
}
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
_urlString=request.URL.absoluteString;
return YES;
}
-(void)setUrlString:(NSString *)urlString
{
_urlString =urlString;
}
/**清除缓存和cookie*/
- (void)cleanCacheAndCookie
{
[self.webView stringByEvaluatingJavaScriptFromString:@"localStorage.clear();"];
//清除cookies
NSHTTPCookie *cookie;
NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
for (cookie in [storage cookies])
{
[storage deleteCookie:cookie];
}
//清除UIWebView卡咪龟的缓存
NSURLCache * cache = [NSURLCache sharedURLCache];
[cache removeAllCachedResponses];
[cache setDiskCapacity:0];
[cache setMemoryCapacity:0];
}
@end
二、oc调用vue.js 组件的方法
在webViewDidFinishLoad 代理方法中调用，因为这个时候vue的所有的组件节点都已经渲染
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//该方法是vue中组件的方法
[self call];
}
- (void)call{
// 之后在回调js的方法Callback把内容传出去
JSValue *Callback = self.jsContext[@"mobileChangeContent"];
//传值给web端
[Callback callWithArguments:@[@"4"]];
}
vue中的水箭龟实现mobileChangeContent(参数)的方法
1、注意我们都知道调用vue的方法的时候要挂载到window上的方法
随意在组件中需要特殊处理，让组件的方法挂载到window的mobileChangeContent方法上
组件A
mounted(){ window.mobileChangeContent = this.mobileChangeContent; }, methods: { //实现移动端方法 mobileChangeContent(level){ if(level){ } } }
标签：vue,void,oc,js,jsContext,UIWebView,webView,self 来源： https://www.cnblogs.com/plus666/p/14043430.html