Vue与原生APP优美交互

1.Vue调用原生方法

封装一个全局的方法，专门负责调用原生注入的方法
funcName：需要调用的方法，data：传递的参数
export const swicthToNativeApp  = (funcName,data) => {
    var temp = '调用APP方法:'+funcName;
    console.log(temp);
    if (isIOS()) {
        var canGo = true;
        try {
            if (window.webkit.messageHandlers == undefined || eval('window.webkit.messageHandlers.'+funcName) == undefined) {
                canGo = false;
            }
        } catch (err) {
            canGo = false;
        };

        if (canGo == true) {
            eval('window.webkit.messageHandlers.'+funcName+'.postMessage("'+data+'")');

        };

    } else if (isAndroid() && window.dejs) {
        eval('window.webkit.messageHandlers.'+funcName+'.postMessage("'+data+'")');
    } else {
        console.log('pc');
    }

};

2.原生APP调用Vue

A.在mounted方法中，将需要给APP调用的方法挂载到window下
appPwdLogin：方法名
 window.appPwdLogin=function () {
                that.logout();
            }
//B.注意，可以在App.vue中挂载方法，这样部分在哪个界面都可以被调用
        window.goToRoot=function () {
            that.$router.replace('/userCenterApp');
        }

iOS调用传参eg.

-(void)gesturePwdLoginWithData:(NSDictionary*)data{
    UIViewController *vc = [UIApplication sharedApplication].keyWindow.rootViewController;
    if (vc && [vc isKindOfClass:[DPWebViewControler class]]) {
        DPWebViewControler *dVc = (DPWebViewControler*)vc;
        if (!data) return;
        NSDictionary *PageInfoOrganInfo = data[@"result"][@"PageInfoOrganInfo"];
        if (!PageInfoOrganInfo) return;
        
        NSString *session = PageInfoOrganInfo[@"sessionId"];
        if (!session || [session isEqualToString:@""]) return;
        NSString *tempStr = [NSString stringWithFormat:@"gesturePwdLogin('%@')",session];
        [dVc.contentWebView evaluateJavaScript:tempStr completionHandler:^(id obj, NSError *error) {
            if (!error) {
                //去web用户中心，并刷新界面
                [self webPopToRoot];
            }
        }];
    }
}