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 它的格式，如果只是常量字符串是匹配不到的)