現(xiàn)在的開發(fā)趨勢都是混合開發(fā)，整個APP界面不只是用安卓原生代碼來搭建，還用到了網(wǎng)頁，絕大多數(shù)的電商類APP比如：淘寶，美團，京東等等。商品列表頁用安卓原生代碼寫的，詳情頁用網(wǎng)頁 ，安卓代碼就要跟網(wǎng)頁的JavaScript(H5)代碼進行交互。像這樣原生嵌套網(wǎng)頁，彼此間傳遞數(shù)據(jù)就是屬于混合開發(fā)。
安卓代碼如何與網(wǎng)頁的JavaScript代碼進行通信
為了更直觀，更生動的演示效果。先做點準備工作。
1.安裝Tmocat服務(wù)器
用于模擬網(wǎng)絡(luò)請求，獲取服務(wù)端數(shù)據(jù)，以及部署網(wǎng)頁讓APP去加載該網(wǎng)頁
1.1登錄Apache Tomcat官網(wǎng)，地址?http://tomcat.apache.org?，點擊左邊的Download，選擇需要下載的版本。
1.2 右鍵Finder—>前往文件夾—> ~/Library/ 目錄下，把下載完成的壓縮包解壓，命名為Tomcat，拷貝到這里。
1.3 打開終端，輸入cd /Users/jxxxxx/Library/Tomcat/bin，然后回車
（ps：jxxxxx是你mac電腦的用戶名。也可以直接輸入 cd，然后把Tomcat的bin目錄拖到終端即可）
1.4再輸入：./startup.sh?，回車
如果出現(xiàn)Permission denied就是操作失敗，缺少權(quán)限。再輸入?sudo chmod 755 *.sh,回車，接著輸入?./startup.sh,就可以啟動Tomcat了：
出現(xiàn)Tomcat started就說明服務(wù)器打開了。
（ps：sudo sh shutdown.sh?關(guān)閉服務(wù)器，然后再輸入sudo sh startup.sh?打開服務(wù)器，表示服務(wù)器重啟）
1.5打開我們的瀏覽器，然后網(wǎng)址輸入??http://localhost:8080/，如果出現(xiàn)一只貓，則證明配置成功~
(Tomcat部署在自己電腦上，所以可以用localhost代替具體的ip地址)
2.安裝Visual Studio Code（簡稱vscode）
很多開發(fā)工具都可以編寫html代碼，我習(xí)慣用的是Visual Studio Code，安裝很簡單就不演示了。官方下載地址：https://code.visualstudio.com/#alt-downloads?選擇自己的系統(tǒng)版本，安裝時一直下一步即可，安裝完成后直接運行code.exe，到此準備工作已完成。
3.打開vscode，新建index.html文件擼代碼。
3.1搭建h5界面以及效果圖：
3.2 JavaScript代碼部分，如下圖：
3.3 新建一個yanhuomatiou2015.json文件，并構(gòu)造一些數(shù)據(jù)。然后把yanhuomatiou2015.json和index,html文件拷貝到Tomcat里，重啟一下Tomcat，如下圖：
4.接下來就是android端代碼了(重點)
4.1搭建xml界面,下圖：
4.2 android與h5交互，必須要有個通信的橋梁類，新建個橋梁類，如下圖：
4.3在MainActivity類中初始化控件，配置webview參數(shù)，如下圖：
代碼部分也已完成，先運行看效果：
效果圖分析：
1.當點擊藍色按鈕（js調(diào)用android方法）JavaScript的jsCallandroid方法會去調(diào)用android的showToast方法并傳參，然后在底部彈出的toast：
2.當點擊綠色按鈕（ js調(diào)用android方法再callback(回調(diào))js方法），JavaScript的jsCallandroidCallBackJs方法會去調(diào)用android的getrequestData方法并傳參，在android的getrequestData方法里發(fā)起異步請求，拿到數(shù)據(jù)：
接著回到主線程，再回調(diào)JavaScript的receiveAndroidData方法把獲取回來的數(shù)據(jù)傳為參數(shù)傳進去，彈出alter：
3.當點擊灰色按鈕（android調(diào)用js方法）android的onClick方法會去調(diào)用JavaScript的showMessage方法并傳參，彈出alter：
是不是so easy，完整的demo地址：https://github.com/yanhuomatou2015/AndroidHtml5.git? ?在完整的demo里，為了讓大家更好的理解android如何與h5交互的，我把前端頁面index.html的代碼，放到了app ->src->main->assets下，方便前端工程師參考。
今天的分享結(jié)束了,再見~
