多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[TOC] # 基本概念 1. `JsBridge`: 一种用来连接Web和Native的技术方案,让Native端(Swift, OC, Java)和Web端(JavaScript)可以互相调用。 2. `webview`: Native组件,有类似浏览器的功能。 所以混合开发的本质就是将一些Native的UI替换成webview,webview的内容可以由前端开发,和开发Web App差不多,而和Web App相比,这些webview里的html5页面需要和Native通信。 # Native调用Js ## ios 通过`webview`的`stringByEvaluatingJavaScriptFromString`实现,本质是调用`window`下的方法。 ```swift // Swift webview.stringByEvaluatingJavaScriptFromString("Math.random()") // OC [webView stringByEvaluatingJavaScriptFromString:@"Math.random();"]; ``` ## android 通过`webview`的`loadUrl`进行调用。 ```java // 调用js中的JSBridge.trigger方法 webView.loadUrl("javascript:JSBridge.trigger('webviewReady')"); ``` # Js调用Native ## ios 通过拦截webview里的请求来实现。通过Web和Native约定好的自定义协议(在ios里叫scheme)进行通信。 ## android 和ios一样通过自定义协议进行通信。 安卓可以直接向webview中注入全局对象,所以注入后,页面里的Js可以直接调用。 安卓的webview层还可以重写`prompt`, `console.log`, `alert`这三个方法。 # 参考 > [H5与Native交互之JSBridge技术](http://tech.youzan.com/jsbridge/)