摘要：查看安裝包版本信息查看信息提供掃描二維碼打開網(wǎng)頁。所以端發(fā)起網(wǎng)絡(luò)請(qǐng)求的時(shí)候，需要使用，這樣就可以避免這個(gè)問題參考資料什么是方案之和頁面交互原理的原理實(shí)現(xiàn)示例三部曲基本用法

Hybrid開發(fā)效率高、跨平臺(tái)(M /58APP/英才APP)

維護(hù)成本低,功能可復(fù)用

針對(duì)新手友好,學(xué)習(xí)成本較低

功能更加完善,性能和體驗(yàn)要比起web app好太多

部分性能要求的頁面可用原生實(shí)現(xiàn)

Hybrid從業(yè)務(wù)開發(fā)上講，沒有版本問題，有BUG能及時(shí)修復(fù)

缺點(diǎn)

相比原生,性能仍然有較大損耗

不適用于交互性較強(qiáng)的app

Hybrid中Native與前端各自的工作是什么

Hybrid的交互接口如何設(shè)計(jì)

資源緩存策略，白屏問題

Native與前端的界限，首先Native提供的是一宿主環(huán)境，要合理的利用Native提供的能力，要實(shí)現(xiàn)通用的Hybrid平臺(tái)架構(gòu)

nativeUI組件、消息類組件

通訊錄、系統(tǒng)、設(shè)備信息讀取接口

與Native的互相跳轉(zhuǎn)，比如H5如何跳到一個(gè)Native頁面，H5如何新開Webview做動(dòng)畫跳到另一個(gè)H5頁面

賬號(hào)信息管理 Native需要設(shè)計(jì)良好安全的身份驗(yàn)證機(jī)制

資源訪問機(jī)制

Native首先需要考慮如何訪問H5資源，做到既能以file的方式訪問Native內(nèi)部資源，又能使用url的方式訪問線上資源

前端要做的事情就是封裝調(diào)用Native提供的各種能力-Hybrid開發(fā)調(diào)試

// 網(wǎng)頁開始加載的時(shí)候調(diào)用
- (void )webViewDidStartLoad:(UIWebView  *)webView{
}

// 網(wǎng)頁加載完成的時(shí)候調(diào)用
- (void )webViewDidFinishLoad:(UIWebView  *)webView{
}

// 網(wǎng)頁加載錯(cuò)誤的時(shí)候調(diào)用
- (void)webView:(UIWebView *)webView  didFailLoadWithError:(NSError *)error{
}

1.Native調(diào)用前端頁面的JS方法

2.前端頁面通過JS調(diào)用Native提供的接口

兩者之間的橋梁是Webview。app自身可以自定義url schema，并且把自定義的url注冊(cè)在調(diào)度中心

在每個(gè)版本會(huì)提供一些API，前端會(huì)有一個(gè)對(duì)應(yīng)的框架團(tuán)隊(duì)對(duì)其進(jìn)行封裝，釋放業(yè)務(wù)接口

 /**login*/
 CHRJSBridge.call("pagetansNative", {
 action: "pagetansNative", //type類型是跳轉(zhuǎn)native的
 params: {
   controllername: "to_login" //跳轉(zhuǎn)native的對(duì)應(yīng)頁
 },
 isbacktomain: 0, //跳轉(zhuǎn)后是否關(guān)閉當(dāng)前，默認(rèn)false
 callbackFun:(params)=>{this.id=params.id}// 回調(diào)函數(shù)
 });

handleConfirm(params) {
  let jsonStr = JSON.stringify(params);
  if (this.isIOS()) {
    window.webkit.messageHandlers.testMethod.postMessage(jsonStr)
  } else {
    javascript: chrclient.onJsActionRequest(jsonStr)
  }
}

## native to js

window.nativeMethod = function(methodrParams) {
 console.log("nativeMethod");
 let actionName = JSON.parse(methodrParams).action;
 let actionParams = JSON.parse(methodrParams).params;
 //console.log("methodrParams=====", actionName, actionParams);
 window[actionName](actionParams);
}

## 2. 封裝的CHRJSBridge／JavaScriptCore
主體內(nèi)容:

小的DEMO

## 3. 這樣做有一個(gè)前提是，Native本身已經(jīng)十分穩(wěn)定了.測(cè)試包

   - 1.設(shè)置里面清除緩存。?    
   - 2.查看安裝包版本信息?    
   - 3..查看cookie信息
   - 4.提供掃描二維碼打開網(wǎng)頁。供前期沒有開通入口，F(xiàn)E自測(cè)?

## 4. H5-native

url scheme Native能捕捉webview發(fā)出的一切請(qǐng)求

chrmain://nativejump/main/web?params=

Native是有能力為前端注入所有需要的方法了

 
var messagingIframe = document.createElement("iframe");

messagingIframe.style.display = "none"
document.documentElement.appendChild(messagingIframe);

messagingIframe.src = url

注意,正常來說是可以通過window.location.href達(dá)到發(fā)起網(wǎng)絡(luò)請(qǐng)求的效果的，但是有一個(gè)很嚴(yán)重的問題，就是如果我們連續(xù)多次修改window.location.href的值，在Native層只能接收到最后一次請(qǐng)求，前面的請(qǐng)求都會(huì)被忽略掉。所以JS端發(fā)起網(wǎng)絡(luò)請(qǐng)求的時(shí)候，需要使用iframe，這樣就可以避免這個(gè)問題

5.參考資料

1.什么是Hybrid App

2.Native、Hybrid、React Native、Web App方案

3.Hybrid APP之Native和H5頁面交互原理

4.JSBridge的原理

5.JSBridge實(shí)現(xiàn)示例

6.WebView三部曲：基本用法