[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 及 相關資源