[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/)
- PWA 概念
- Immutable
- Angular 基础概念
- 入门参考
- Angular 更新总结
- Angular 生态系统
- Rx.js
- Ngrx
- CQRS/ES 模式
- Angular 5 详解
- 测试
- 定义共享模块
- 懒路由加载
- angular组件
- 双向绑定及变化检测
- 样式
- ionic 3详解
- ionic3
- ionic 插件
- Ionic 添加动画
- Ghost-Loading
- 打包发布
- Android上架国内应用市场流程
- 总结
- 文章
- 问题合集
- Cordova
- 插件开发指南
- Android插件开发指南-官网
- IOS插件开发指南-官网
- Hooks 编写
- 桥接技术
- ===cordova插件收集===
- 相关主题-官网
- 实战-自定义插件流程
- UI 及 相关资源