Hybrid開發(fā)在目前的市場上已經(jīng)非常普遍，它是一種介于web-app、native-app這兩者之間的app，兼具“Native App良好交互體驗的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”。
今天我們就來講講如何使用Android和H5實現(xiàn)一個簡單的Hybrid APP。在正式開始之前，我們先給自己定兩個小目標：
1、在Android應用里面，通過webview組件嵌入一個H5頁面，并正常顯示該頁面；
2、實現(xiàn)Android與H5之間的簡單交互；
備注：Android環(huán)境的搭建與配置由小伙伴自主完成，筆者在這里就不做介紹了。
了解WebView
WebView 是一個用來顯示 Web 網(wǎng)頁的控件，該控件的使用跟其他控件沒什么區(qū)別。只不過WeView 控件的功能比較豐富，因為它就是一個微型瀏覽器，包含一個瀏覽器該有的基本功能，例如：滾動、縮放、前進、后退下一頁、搜索、執(zhí)行 Js等功能。
WebView有四種方式來加載網(wǎng)頁：
方式一：webView.loadUrl("http://keithxiaoy.com");? ?//加載網(wǎng)頁鏈接
方式二：webView.loadUrl("file:///android_asset/index.html");? ?//加載本地assets目錄下的網(wǎng)頁
方式三：webView.loadUrl("content://com.android.htmlfileprovider/sdcard/index.html");? ?//加載手機SD卡的html頁面
方式四：webView.loadData(String data,String mimeType,String encoding)??//加載 HTML 頁面的一小段內(nèi)容。參數(shù)1：需要截取展示的內(nèi)容、參數(shù)2：展示內(nèi)容的類型、參數(shù)3：字節(jié)碼
我們?yōu)榱苏{(diào)試的方便，我們選擇第二種方式? ---?加載本地assets目錄下的網(wǎng)頁，為此我們需要在相應的位置新建html文件：
Android嵌入H5頁面
第一步：在AndroidManifest.xml文件配置網(wǎng)絡(luò)權(quán)限
<uses-permissionandroid:name="android.permission.INTERNET"/>
第二步：在java文件中獲取WebView實例對象，并調(diào)用loadUrl方法載入html文件
至此，我們已經(jīng)將H5頁面嵌入到Android應用里面，我們使用Android虛擬機進行查看：
H5調(diào)用Android的方法
首先定義一個JsInterface類，這個類是Native提供給H5的接口集合：
setTextContent方法的作用是更改Android應用中TextView組件的內(nèi)容。接下來我們需要將這個接口類的實例傳遞給html文件的window對象，而這個傳遞過程要借助于webview：
//? java文件
jsInterface = new JsInterface();
// 把布局文件的TextView對象綁定到j(luò)sInterface對象的textView屬性上，便于jsInterface對象操作UI組件
jsInterface.textView = (TextView)findViewById(R.id.textView);
// Android提供的Js與Native通信的官方解決方案：這個方法的作用是，將 java 對象注入到 Js 中直接作為window的某一變量來使用
//?jsInterface：接口對象；? ? ? ?AndroidNative：接口對象掛載到window的屬性名
webView.addJavascriptInterface(jsInterface,"AndroidNative");
完成以上內(nèi)容以后，我們在H5頁面上給按鈕綁定一個點擊事件，并在處理函數(shù)中調(diào)用native方法：
這樣一來，我們點擊一下H5頁面上的按鈕，就可以更改TextView組件的內(nèi)容了。
Android調(diào)用H5的方法
第一步：啟用js支持
第二步：獲取Android應用的Button組件，并綁定相應的點擊事件監(jiān)聽器
btnLogin = (Button)findViewById(R.id.btnLogin);
btnLogin.setOnClickListener(new View.OnClickListener() {????@Override
????public void onClick(View arg0) {
????????//實際處理button的click事件的方法
????????webView.loadUrl("javascript:pauseVideo()");
????}
});
第三步：現(xiàn)在html文件中定義js方法，然后通過webView的loadUrl方法，調(diào)用html里面定義的js方法
//?pauseVideo是定義在html文件里面的函數(shù)
webView.loadUrl("javascript:pauseVideo()");
注意：在不同的Android版本中，Native調(diào)用JS的方式是有變化的，在Android4.4之前使用loadUrl的方法，在4.4以后(包括4.4)，使用的是另外一種方法：
mWebView.evaluateJavascript("javascript: 方法名('參數(shù),需要轉(zhuǎn)為字符串')", new ValueCallback() {
????@Override
????public void onReceiveValue(String value) {
????????//這里的value即為對應JS方法的返回值
????}
});
結(jié)語
至此，我們已經(jīng)實現(xiàn)了一個簡單的Hybrid APP。筆者已將相關(guān)代碼上傳到https://github.com/Samuel2306/Hybrid_Android_H5。有興趣的小伙伴可以自己去動手試一試。
