oc 与 js交互之vue.js

Posted PeterWolf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

    //测试环境

    [email protected]"https://xxxxxxxxxxxxx/special.html#/";

#else

    //正式环境

    [email protected]"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){
       }
    }
}

 

 

以上是关于oc 与 js交互之vue.js的主要内容,如果未能解决你的问题,请参考以下文章

JS 与 OC 交互

iOS - OC 与 JS 交互六种方式总结

通过WebViewJavascriptBridge实现OC与JS交互

OC与JS的交互(iOS与H5混编)

iOS WKWebView与H5交互,JS调OC传值、OC调JS传值、进度条加载等(干货满满)

OC与JS的交互