1. h5頁面和app頁面怎麼通訊
通訊方法如下：
URL Scheme 是最常見的方法了，它的核心概念是攔截URL。
APP實現了一個webview，H5在其內打開。
它可以攔截到H5發生的跳轉信息，如URL。如果以URL作為通信依據，就可以隨意約定個URL，如：建立通信：https://__bridge_loaded__ 獲取token：https://nativaAPI_getToken
H5就可以通過跳轉到該地址被APP攔截，APP識別到了約定的URL觸發對應方法。
2. 攔截列印日誌
APP的webview有對應的監聽，可以攔截到JS的 alert 等。就可通過輸出 alert("標識", "方法名", "參數") 等方法進行通信。IOS 由於安全限制，UIWebView 性能原因已棄用不考慮，WKWebView 對 alert 等方法做了攔截，需要做代理處理一下即可。android 通過 WebView.addJavascriptInterface 方法實現。但因 Android 4.2 以前的系統中沒有正確限制使用WebView.addJavascriptInterface，導致攻擊者可以偽造汪族JS橋接調團陵讓用原生方法，存在安全漏洞，因此較少見。Google在Android 4.2 版本中修復了他，通過在Java方法內的最上面聲明一句@JavascriptInterface，從而避免漏洞攻擊。若想 4.2 版本前使用塌局就要另尋出路，window.prompt 一問一答的機制恰好可以滿足，Android onJsPrompt方法中去解析傳遞過來的文本，將處理結果返回給JS。
3. window注入
window注入就比較好理解了，就是雙方在JS的window下寫入通信變數。其實上面兩種方法也多少會涉及window注入。它是一個對象，常用的有這幾個方法（想用什麼自己寫入）。
2. H5端與原生混合開發遇到的一些問題
在與原生安卓/IOS實現混合開發時，會遇到一些問題，在此做下記錄（以下是目前遇到的或之前有記錄到的一些問題，後續如果有遇到新的問題或整理過程中發現其他的一些問題再補上）：
1.H5頁面撥打電話問題
（1）在移動端頁面實現時，只需使用a標簽，<a href="tel:1234567">即可實現。
（2）與原生混合開發時，安卓端嵌入我們的H5頁面，採用以上方式卻無唯頃型法實現，（IOS端是沒有問題的），因此需要調用原生本地的撥打電指猜話方法。
2.IOS時間的一個兼容性問題
H5頁面實現過程中遇到了時間處理的問題。使用new Date(time).getDay()的時候，正常返回應該的是0-6，對應每周的星期日到星期一，但在IOS上，例如：我們使用乎洞的是（2018-6-4）的話，它會返回undefined。因此我們在這里應該對這個時間格式進行處理，將其改為（2018/6/4）的格式去獲取。
即：new Date("2018-06-04").replace(/-/g ,"/");
3. H5頁面與原生App（安卓，IOS）交互
在客戶端項目中，同一個app會開發成兩個版本，一個是安卓版本，一個IOS版本，公司必須有兩個開發團隊（一個安卓團隊，一個IOS團隊）來進行開發，這樣一來，開發成本非常之高。所以，往往在實際項目-中，會嵌套很多H5頁面，一個H5頁面同時兼容安卓和IOS兩個系統 ，這樣一來，大大減少了開發成本，前端開發頁面就必須和原生進行交互。
1. 頁面開發 —— 前端開發人員將所有的頁面按照移動webappp進行開發，做好不同屏幕的適配（寬度100%,視口為移動端視口 (快捷方式meta:vp tap），字體適配rem單位，設置html根標簽的font-size然後根據媒體查詢判斷設備屏幕大小進而設置html根標簽的不同汪盯fontsize，去除移動端高亮顯示；小圖標要善於使用字體圖標（常用的字體圖標庫有阿里巴巴矢量圖），改變input標簽的默認樣式可以採用隱藏input,然後通過字體圖標來控制前面的圖標，就可以做成自己想要的圖標效果）
2.前端頁面部署 —— 設置好入口文件（原生一進來就進入的頁面，命名為index.html），部署到對應的伺服器上，通過網址就能夠訪問到頁面，將網址給app客戶端開發人員，他們將app配置好環境後講頁面嵌套在app中。
3.進行數據對接：兩種對接方式（1）.前端頁面自己通過ajax去後台拉數據，然後自己在頁面上使用再提交給後台。前提是原生需要將對應的設備號，加密方式，請求數據所需要的各種參數通過回調函數傳遞給H5頁面，H5頁面拿到這些數據困基和後直接調後台的借口、獲取到數據。（2）.前端頁鋒辯面不用自己去後台拉取數據，而是通過回調函數，獲取到原生app拉取的數據，前端頁面將這些數據處理後又通過回調函數交給app，再又app發送給後台。兩種調用的優劣比較：如果H5頁面及數據不是很多，使用第二種方式比較合理，不用H5頁面請求數據（不用封裝請求，不用加密數據），不使用框架，大大減少了頁面的大小，提高性能及用戶體驗。如果涉及到的前端頁面非常多，數據交互比較復雜的話，就必須使用第一種對接方式了，app只需要將設備號，加密規則，參數傳遞給H5，H5根據頁面需求自己向後台拉去和請求數據，直接交互，不再通過app進行轉接，減小復雜程度。
4. （2）Android 調試 H5頁面
我們使用chrome 瀏覽器 + Android 手機的方式進行頁面調試。
因為安卓機型比較多，所以打開開發者模式的過程可能會略有不同，方法就是在 「設置」 中找到當前Android手機的版本號（不是Android的版本號），多次點擊，手機下方就會有toast提示進入開發者模式。
打開手機的「設置」，往下滑動找到開發人員選項，進入後打開USB調試的開關。
將電戚判腦和手機連入同一個網路，用數據線將手機連到電腦上面，信任電腦設備，這樣就完成連接了。
在chrome瀏覽器地址欄中輸入態大chrome://inspect/#devices，我們就能看到連接的Android設備了。
點擊以上的inspect以後可能會一直顯示白屏，這時候我們從兩個方向嘗試著去解決這個問題：
1、檢查當前電腦是否能正常打開google頁面， 必須確保能正常打開，因為這個功能需要訪問谷歌服務。
2、檢查瀏覽器版本，盡量使用帆仔豎最新版本的chrome。
5. 怎麼在App里正確使用H5頁面，你造嗎
用了這么多App，自己也做了App產品，注意到通過web頁面在App里的正確應用可以輕松解決很多產品運營方面的問題，總結一下分享給大家。不是什麼高技術含量的東西，貽笑大方了。
App里之所以用到web頁面，多是因為這個頁面上的內容和結構都是屬於高頻變化的，使用Native App頁面來實現的話則需要不斷發布新版本才能實現，這一點不現實。而App都是可以調用原生系統瀏覽器或者集成到App里的瀏覽服務，因此屬於高頻變化的內容和結構通過web頁面來表現，再通過App來調用web頁面就可以輕松解決這個問題了。而且，經過優化專門適配移動端的web界面已經很接近Native App的頁面了，很多時候我都壓根沒有感受出來，也因此web頁面在App上被廣泛應用。
屬於高頻變化的內容和結構的頁面多來自產品運營，一般包含：運營活動頁面/廣告/應用內推送消息等。
那，在哪些場景下web頁面會在App里被使用呢？含帶
說起App啟動頁，這是一個 Caodan的故事，因為在大量的App的啟動頁上已經做起了廣告了，而更甚得是，還有App做了兩個不一樣的啟動頁連著顯示，真挺牛B的[槍斃][槍斃]。啟動頁作為展示App品牌區域極好的手段，並且優質的啟動頁內容會不斷地在用戶內心裡加以深化。每天我們看到的App不斷變化的啟動頁內容都是通過web來實現的，很多人都沒有感知到那是一個web頁面。聖誕節的時候，打開蝦米音樂時，啟動頁內容是帶聖誕樹帶雪一個房子，現在想起來都暖烘烘的。而今年大紅的釘釘，支持自定義啟動頁圖片內容，一直想給團隊做一個屬於我們自己的很酷的啟動頁，結果被無限拖延。
[2016/03/01 備注---後來題主通過閱讀才發現，啟動頁的圖片更換並不是通過html的頁面來實現，特此勘誤，敬請諒解]
App的推送消息從打開方式上來說可以分為兩類，第一類是點擊推送消息直接打開指定App頁面，比如多數資訊類App(知乎、澎湃新聞等)；第二類是點擊推送消息打開一個web頁面，再通過點擊web頁面里的內容模塊打開指定的App頁面。第二類推送消息在電商類/生活服務類等重運營的App里應用很多。比如圖例中的大眾點評對KTV商戶的一次推送消息游棚，這個推送消息里包含了多家的KTV商戶，用戶根據自己的喜好點擊自己喜歡的KTV商戶，進入該KTV商戶的店鋪詳情頁面（指定App頁面）
這種web在App上的使用方式同上文的推送消息有異曲同工之妙，主要也是應用在重運營的App上，對電商類App的一次營銷活動，對音樂類App的一個音樂精選集/音樂人的推薦，通過首頁的推薦Banner位引導打開豐富的內容頁面都是一個很好的方式。
這一種使用方式不太常見，但是可以作為App早期開發中過程中的一種替代手段。由於web的開發效率相對App來說會高一些，在App開發的初期為了搶佔用戶和市場先機而不得不在規定的時間內發布一款功能完整的App時，可以使用這種方式來進行操作，基礎的核心功能使用Native App頁面來實現，一些非核心功能/使用App頁面實現起來耗費工時的頁面可以談磨蘆使用web頁面來實現，這一點在早期的釘釘App版本里應用很多。
調用第三方服務並且涉及到復雜的數據驗證處理又必須由第三方來完成時，這種方式是一個比較不錯的解決方案，事實上，大量的第三方服務公司也是通過web來提供自己的產品和服務的。支付服務屬於這一類范疇的最常見應用領域，例如Paypal支付服務，Braintree支付服務，支付寶支付服務等。
當然瀏覽器這類App的主體就是web頁面，我們不再贅言。
這一點涉及到技術領域了，作為一個產品汪對此的了解實在有限，了解到的實現方式有以下兩種，使用系統內核瀏覽服務和使用第三方提供的瀏覽服務。鵝廠提供了X5瀏覽服務SDK，號稱表現性能優異，在微信里公眾號文章使用的就是X5瀏覽服務。關於這方面更多的知識了解可以用關鍵詞「webview」+"瀏覽服務"去問問度娘。
希望這篇文字能對你解決問題有所啟發。碼字這么辛苦，點個贊或者打個賞吧[可愛][可愛]。
2016/12/21 補記：
6. 有現成的h5頁面 怎麼嵌入到android
1：下載 2：解壓縮 3：把解出來的和H5的圖標一樣的那個復制到H5文件夾（不復制應該也可以） 4：進游戲 5：打開修改器 6：Move_Points是無限制移動 Build_Points是無限制建築 Show_me_money是無限金錢 I'm the superman是把等級調到最高級 這個是我用的修改器，娃娃 做的，現在貌似他又做了個6屬性的。不過應該差不多。 其實自己慢慢摸索一下就知道了。 -完畢-
7. android開發中，webview常用於顯示網頁或h5頁面，一個遇到跨域方面的坑。
1.跨域cookie讀取
什麼是跨域，簡單的說就是不同的域名，我們都知道在pc上我們用瀏覽器訪問網址，不同的網址都會在本地存儲一些cookie信息，這樣就可以實現比如自扒核棚動登錄等功能，在pc上不同域名是不能相互讀取其他域下的cookie信息的（非web專業開發人員，如果理解有誤，歡迎指出）。
但是在 android 上在api 23之前，是可以跨域讀取cookie的，比如A域寫入一個userId的cookie，B域可以讀取該值。但是在23時，系統將該值設置成了false，不再讓跨域讀取了。如果你的應用有跨域讀取需求，怎麼辦？可以採用如下方式進行開啟：
/*** 設置跨域cookie讀取*/
public final void setAcceptThirdPartyCookies() {
//target 23 default false, so manual set true
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { CookieManager.getInstance().setAcceptThirdPartyCookies(webView,true);
}
}
2.http/https混合載入
在現階段，很多網站都改成了https進行訪問，https可以提升訪問網站的安全性，防止信息被竊取，如果所有的網頁都是https且網頁內的鏈接也是都是https，那就沒春則有混合載入(文本區域https，圖片文件http載入)的問題了。但是很多資源現階段還沒有改變成https訪問，往往頁面都嵌入了http的鏈接。這種混合網頁如果不進行處理，直接載入是會出現錯誤的。怎麼解決這個問題？
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
這也是一個分版本氏缺的函數，在api23之前，默認是可以混合載入的，但是在23時，默認值改成了MIXED_CONTENT_NEVER_ALLOW，因此如果你有混合載入的需求，設置setMixedContentMode為MIXED_CONTENT_ALWAYS_ALLOW。
3.無法解決跨域訪問問題，可以嘗試給webview設置如下配置，已解決該問題；
if (Build.VERSION.SDK_INT >= 16) {
Class clazz =webView.getSettings().getClass();
Method method = clazz.getMethod("", boolean.class);
if (method != null) {
method.invoke(webView.getSettings(), true);
}
}
} catch (IllegalArgumentExceptione) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
8. 混合開發之H5在移動端如何調試界面
在平時工作中，APP端使用前端界面並進行相應的交互，在此過程中，經常會遇到一些問題，但是由於界面是在APP端打開，就會產生一個問題：當界面報錯或者需要調試時，很難進行相應的調試工作，在經過一些嘗試之後，發現使用vorlon進行調試比較方便（在Vue多頁面工程中，單頁面未嘗試，但是原理應該一樣），以下記錄使用過程：
1.首先進行全局安裝vorlon（cnpm install -g vorlon）;
2.然後在index.html（需要監控的界面）添加<script src="http://192.168.1. : /vorlon.js"></script>
3.打開cmd，輸入vorlon執行
4.在瀏覽器中打開http://192.168.1. : （你配置的監控ip和埠）進行監控
5.手機端打開界面，瀏覽器中vorlon就會顯示相應的調試區域
注意：手機需要和電腦在同一個區域網內
經過個人測試，使用該方法調試APP內使用的H5界面，雖然不及在Chrome中直接進行調試，但是還是能解決移動端調試的問題的
9. H5混合開發
Hybrid App，俗稱 混合應用 ，即混合了 Native技術 與 Web技術 進行開發的移動應用。現在比較流行的混合方案主要有三種，主要是在UI渲染機制上的不同:
Webview 是 Native App 中內置的一款基於 Webkit內核 的瀏覽器，主要由兩部分組成:
在原生開發 SDK 中 Webview 被封裝成了一個組件，用於作為 Web頁面 的容器。纖坦因此，作為宿主的客戶端中擁有更高的許可權，可以對 Webview 中的 Web頁面 進行配置和開發。
Hybrid技術中雙端的交互原理，便是基於 Webview 的一些 API 和特性。
RN和原生通信
Hybrid技術 中最核心的點就是 Native端 與 H5端 之間的 雙向通訊層絕豎型 ，其實這里也可以理解為我們需要一套 跨語言通訊方案 ，便是我們常聽到的 JSBridge。
整套方案需要 Web 與 Native 兩部分共同來完成:
接入方式 :
詳細內容由興趣的童鞋可以看文章:
RN的原理，為什麼可以同時在安卓和IOS端運行
RN如何調用原生的一些功能
介紹並猜RN的缺點