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){

       }

    }

}