现在的app开发，已经不在是以前一样所以页面都是有原生开发，基于应用的更新上线繁琐，由于H5的易更新，易维护性， 现在很多应用都采用同H5页面混合开发模式，例如:淘宝、QQ、京东、聚划算等等。这边文章主要讲解JS中如何获取原生应用返回给js的数据方法，包括android和ios

js代码如下

function setupWebViewJavascriptBridge(callback) {//ios的桥接
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback]; 
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(callbackction() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
function getAppinfor(data,callback){//数据，回调
	if(window.android!=undefined){//android挂载的对象
		data.userid=window.android.getUserId();//用户userid	
		if(callback!=undefined){callback();};
	}else{//ios
		setupWebViewJavascriptBridge(callbackction(bridge) { //js回调 (oc向js发送消息后 , js返回信息)
	        bridge.registerHandler('IOSData', callbackction(data, responseCallback){
	        	data.session=data.UserId;
	        	if(callback!=undefined){callback();};
	        });
		});
	};
}
//获取原生iso,android的数据
var data={userid:null};
getAppinfor(data,()=>{
	//后续的操作
})

ios代码

代码开始运行:通过webView加载了js，Object-C中配置桥接的代码，并注册"IOSData"传递数据，h5收到的数据data,并且执行回调函数。

@interface ViewController () <UIWebViewDelegate>
@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
@end

//以上控制器中创建一个webView，并且加载h5的页面

- (void)viewDidLoad {
    [super viewDidLoad];
    UIWebView *wb = [[UIWebView alloc] initWithFrame:CGRectZero];
    // 设置代理，可以通过拦截请求的方式回调
    wb.delegate = self;
    self.webView = wb;
    // 通过request方式加载本地文件
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil]]];
    [wb loadRequest:request];
    // 通过JSBridge实现调用js方法
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:wb];
    // 调用js代码中注册的名为IOSData的方法，并且传递参数data。
    //当js中处理完后，调用callback会回调到responseCallback:并且传递responseData回来
    [self.bridge callHandler:@"IOSData" data:@"<data from objc>" responseCallback:^(id responseData) {
        NSLog(@"收到来自js的回调数据 %@", responseData);
    }];
}

android代码

webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JS(), "android"); 
//在JS类里实现javascript想调用的方法，并将其实例化传入webview, "android"就是js中调用这个实例的方法

public class JS{
        public void getUserId(){
           return "";//返回给js的数据
        }  
}

完结：这边文章主要讲代码的实现，并没怎么深入的讲解他具体一步一步实现的原理

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/36