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

       }

    }

}