oc 與 js互動之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