Android和H5之間的互動

小二陽發表於2017-12-14
AndroidH5

說到android與H5的互動，首先要講下WebView基本使用.

WebView是View的一個子類，可以讓你在activity中顯示網頁。 可以在佈局檔案中寫入WebView：比如下面這個寫了一個填滿整個螢幕的WebView：

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>
複製程式碼

載入一個網頁，使用

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl(http://www.baidu.com/));

複製程式碼

當然還要注意要在manifest中加上訪問網路的許可權：

<manifest ... > 
    <uses-permission android:name="android.permission.INTERNET" /> 
    ... 
</manifest>
複製程式碼

設定WebView要顯示的網頁

設定WevView要顯示的網頁方法有很多：

網際網路頁面直接用： 

myWebView.loadUrl(“http://www.google.com“);
複製程式碼

  本地檔案用：

myWebView.loadUrl(“file:///android_asset/XX.html“);  
複製程式碼

  本地檔案存放在：assets檔案中。

  還可以直接載入html的字串，如：

String htmlString = "<h1>Title</h1><p>This is HTML text<br /><i>Formatted in italics</i><br />Anothor Line</p>";
// 載入這個html頁面
myWebView.loadData(htmlString, "text/html", "utf-8");
複製程式碼

在WebView中使用JavaScript

   如果你想要載入的頁面中用了JavaScript，你必須為你的WebView使能 JavaScript。 一旦使能之後，你也可以自己建立介面在你的應用和JavaScript程式碼間進行互動。

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
//支援JS
webSettings.setJavaScriptEnabled(true);
複製程式碼

處理頁面瀏覽   當使用者點選了你的WebView中的一個連結，預設的行為是Android啟動一個處理URL的應用，通常，預設的瀏覽器開啟並下載目標URL。   但是，你可以在你的WebView中覆蓋這一行為，使得連線仍在你的WebView中開啟。   之後，根據在WebView中維護的網頁瀏覽歷史，你可以允許使用者向前或向後瀏覽他們的網頁。

在WebView中開啟所有連結

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new WebViewClient());
複製程式碼

 此時就OK了， 就可以在你的WebView中開啟連結了。

關於開啟連結位置的更多控制 如果你對在哪裡開啟連結需要更多的控制，你可以建立自己的類，繼承WebViewClient，然後覆寫shouldOverrideUrlLoading方法。

private class MyWebViewClient extends WebViewClient
    {
        //在這個方法裡面進行攔截使用者點選的Url
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url){
              
                mWebView.loadUrl(url);
                return true;
            }
    }
複製程式碼

與H5互動也很簡單

WebView mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
//支援JS
webSettings.setJavaScriptEnabled(true);
 mWebView.addJavascriptInterface(new JsInteration(), "android");
/**
 * 開啟js介面給H5呼叫，引數1為本地類名，引數2為別名；h5用window.別名.類名裡的方法名才能呼叫方法裡面的內容，例如：window.android.back();
* */
webView.addJavascriptInterface(new JSInterface(parentActivity), "jump");
	/**
     * 自己寫一個類，裡面是提供給H5訪問的方法
     * */
public class JSInterface {
private Context mContxt;	
public JSInterface(Context mContxt) {
       this.mContxt = mContxt;
 }
        
    @JavascriptInterface
	public void trade(String jsonStr) {
         System.out.println("jsonStr===========" +jsonStr);
	}
 }
複製程式碼

H5頁面關聯設定

<button type="button" id="btn-android" class="send-coupon" onclick="shareAndroid();" style="display: block;">分享好友領紅包</button>
function shareAndroid(){
window.jump.trade(json_str_dict);
}
複製程式碼

H5裡面這行程式碼

window.jump.trade(shareValue);  
複製程式碼

其中jump 對應

webView.addJavascriptInterface(new JSInterface(parentActivity),"jump");
複製程式碼

中的"jump"，而trade()則對應介面JSInterface 裡面的trade方法，這兩個地方JS怎麼寫的我們安卓要對應上就行，然後從H5那邊傳來的資料就存在jsonStr裡面，我們獲取到這個資料進行操作就行了。是不是很簡單！

在這裡也說下可能碰到的webview載入網頁出現的問題。

Webview 載入一些連結出現白板現象，經過除錯onLoadResource已經正常執行，也就是資原始檔都已經成功載入，onReceivedSslError也沒有回撥到，用自帶瀏覽器和UC都是正常，證明連結本身沒有問題， Webview也正常執行，沒有出現錯誤，那就是Webview的配置問題了。 經過N個測試，把

webView.getSettings().setJavaScriptEnabled(true);//設定支援javascript指令碼
        webView.getSettings().setAllowContentAccess(true);
        webView.getSettings().setAllowFileAccessFromFileURLs(true);
        webView.getSettings().setAppCacheEnabled(true);
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setUseWideViewPort(true);
        webView.getSettings().setPluginState(WebSettings.PluginState.ON);

複製程式碼

都開啟，還是未解決。 最終設定 webView.getSettings().setDomStorageEnabled(true);後成功。 按照API的說明 Sets whether the DOM storage API is enabled. The default value is false. 也就是是否開啟本地DOM儲存。應該是Html 5中的localStorage(可以使用Android4.4手機和Chrome Inspcet Device聯調)，用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的，絕大多數的瀏覽器都是支援 localStorage 的，但是鑑於它的安全特性（任何人都能讀取到它，儘管有相應的限制，將敏感資料儲存在這裡依然不是明智之舉），Android 預設是關閉該功能的。

還有一種是載入https的URL時在5.0以上載入不了，5.0以下可以載入，這種情況可能是網頁中存在非https得資源，在5.0以上是預設關閉，需要設定，

webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
複製程式碼

另外記錄幾個websetting常用的幾個設定：

 webSettings.setDomStorageEnabled ( boolean );//是否支援持久化儲存，儲存到本地
        webSettings.setSupportZoom ( boolean ) ;// 設定支援縮放
        webSettings.setBuiltInZoomControls ( boolean );//設定是否出現縮放工具
        webSettings.setDatabaseEnabled ( boolean );//開啟database storage API 功能
        webSettings.setDatabasePath(path);//設定資料庫快取路徑
        webSettings.setAppCacheEnabled(boolean);//設定開啟application H5 Caches 功能
        webSettings.setAppCachePath(path);//設定application caches 快取目錄
        //設定webview自適應螢幕
        webSettings.setLayoutAlgorithm ( LayoutAlgorithm.SINGLE_COLUMN );
        webSettings.setLoadWithOverviewMode ( true ); 
複製程式碼

相關文章