Android 與 H5 數據的傳遞

最近項目開發使用了 Android 原生和 H5 的混合開發，以前也沒怎麼接觸過。所以這次和 H5 聯調對接還是踩了很多坑，這裏也做個總結希望可以幫助到大家...

首先 Android 和 H5 主要的坑是在彼此之間的數據交互；而如果只是彼此之間簡單的界面調用的話，還不是很難。網上搜索有很多的資料，這裏也就不說了。

1，Android 調用 H5 的函數，並且 Android 端傳遞相關參數到 H5；

H5 界面代碼如下：

getFromAndroid = function(userid){
    arr = userid.split(",")
     
}     // android to js

功能函數 getFromAndroid 中的參數 userid 就是 Android 端傳遞過來的參數值，在 H5 代碼中就也可以直接使用了...

而 Android 端代碼如下： 

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setAppCacheEnabled(true);
webSettings.setAllowContentAccess(true);

mWebView.addJavascriptInterface(new JsInteration(), "android");

mWebView.loadUrl("file:///android_asset/tougu/index.html");

mWebView.setWebViewClient(new WebViewClient() {

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        //頁面開始加載前
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

        String h5Str = mUserId + "," + mGroupId + "," + mOwnUserid;
      
        //頁面加載完畢
        //從 Android 傳遞參數到 H5 界面
        view.loadUrl("javascript:getFromAndroid(\"" + h5Str + "\")");
    }
});

當界面加載完成後：

//從 Android 傳遞參數到 H5 界面

view.loadUrl("javascript:getFromAndroid(\"" + h5Str + "\")");

其中 h5Str 就是 Android 端想傳遞給 H5 界面的數據。其中需要注意的是 a.拼接傳遞參數的時候需要注意添加雙引號和斜槓，否則可能會傳遞不過去；b.要注意頁面加載的生命週期，需要等到 H5 的界面加載完成後纔開始傳遞參數。

2 H5 傳遞參數到 Android ；

這裏主要坑的地方是並沒有直接的方式向上面那樣來從 H5 界面來傳遞參數到 Android 端，所以就只能首先調用 H5 方法，然後再在 所調用的 H5 方法中回調一個 Android 端方法，並且傳遞相關參數過來。

Android 端代碼如下:

/**
 * H5 交互 class
 */
public class JsInteration {
    @JavascriptInterface
    public void back(String value) {
	value就是 H5 界面傳遞過來的參數值
        String[] arrayList = value.split("#");
        mIsAtention = arrayList[0];
    }
}

/**
 * 跳轉到組合詳情界面( h5 界面)
 */
@TargetApi(Build.VERSION_CODES.KITKAT)
private void go2CombinationDetail() {

    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDomStorageEnabled(true);
    webSettings.setAllowFileAccess(true);
    webSettings.setAllowFileAccessFromFileURLs(true);
    webSettings.setAllowUniversalAccessFromFileURLs(true);
    webSettings.setAppCacheEnabled(true);
    webSettings.setAllowContentAccess(true);

    mWebView.addJavascriptInterface(new JsInteration(), "android");

    mWebView.loadUrl("file:///android_asset/tougu/index.html");
    //        mWebView.getSettings().setJavaScriptEnabled(true);   //開啓JavaScript支持
    mWebView.setWebViewClient(new WebViewClient() {

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            //頁面開始加載前
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);

            //從 H5 界面傳遞參數到 Android
            view.evaluateJavascript("setUserId()", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                }
            });
        }

上面 setUserId()爲 H5 方法， JsInteration.back( String value) 爲 H5 setUserId() 方法再次調用的 Android 端方法。其中 String value 就是 H5 傳遞過來的參數；

H5 界面代碼如下：

setUserId = function(){
     var result =window.android.back( value);
}

其中 value 值就是需要傳遞過去的參數值

3.最後加上 Android 端攔截 H5 界面的點擊事件方法：

Android 端代碼如下:

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        //頁面開始加載
        if (url.equals("file:///android_asset/test1.html")) {  
            Intent intent = new Intent(KdsCombinationDetailActivity.this, KdsPoliticaRecordActivity.class);
            intent.putExtra(KdsConstant.STROLL2DETAIL_OTHER_ID, mUserId);
            intent.putExtra(KdsConstant.STROLL2DETAIL_GROUP_ID, mGroupId);
            startActivity(intent);
            return true;
        } else if (url.equals("file:///android_asset/test2.html")) {
            KdsUtils.showNotifyToast(KdsCombinationDetailActivity.this, "gotoWeixin");    
            //                分享網頁
            shareUrl(true);
            return true;
        } 
            return super.shouldOverrideUrlLoading(view, url);
    }

});

H5 界面代碼如下:

  <div id="weixin">
    <a href="file:///android_asset/test1.html">
      <img src="images/weixin.svg" style="width: 8.33333rem !important;">
    </a>
  </div>
  <span>微信</span>
</li>
<li>
  <div id="friend">
    <a href="file:///android_asset/test2.html">
      <img src="images/frist.svg" style="width: 8.33333rem !important;">
    </a>
  </div>

其中重點主要是使用  shouldOverriderUrlLoading() 方法，使用參數 url 來匹配。(這是和 H5 約定的 url；注意這裏的 url 它的格式，如果只是常量字符串是匹配不到的)