Android进阶之路 - Android中通过WebView与H5的简单交互

此篇讲解的是Android通过WebView与H5的简单交互，分直接调用无参方法与传入方法参数。

这是我们要在App端展示的H5界面



H5地址对应的代码



以下代码便是H5中的一个方法（PS：setVersion 为方法名）

<script type="text/javascript">
function setVersion(version) {
document.getElementById("version").innerHTML = version
}
</script>

Android中代码片段：

1.首先我们在onCreat生命周期内调用

//加载H5地址
mWebView.loadUrl("这里输入我们要调用的H5地址");

2.监听WebView的加载状态

/**
* 监听WebView的加载状态    分别为 ： 加载的 前 中 后期
* */
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 versionName = DeviceUtils.getVersionName(AboutUsActivity.this);
//在加载完成之后，我们通过android的方法，去调用js的方法，设置对应的版本号
mWebView.loadUrl("javascript:setVersion('" + versionName + " ');");
}

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//本应该加载的H5静态界面
mWebView.loadUrl(url);
return true;
}
});

3.注意，调用了H5的方法传入对应的参数

mWebView.loadUrl("javascript:setVersion('" + versionName + " ');");

Android完整代码 ：

package com.bakheet.garage.mine.activity;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

import com.bakheet.garage.R;
import com.bakheet.garage.base.BaseActivity;
import com.bakheet.garage.http.HttpUrl;
import com.bakheet.garage.utils.DeviceUtils;

/**
* @author Created by YongLiu on 2017/11/14.
*/

public class AboutUsActivity extends BaseActivity {

private WebView mWebView;

@Override
protected int getLayoutId() {
return R.layout.activity_about;
}

@Override
protected void init(Bundle savedInstanceState) {
setToolBarTitle(getString(R.string.title_about_us));
mWebView = (WebView) findViewById(R.id.web_agreement);
final ProgressBar mBar = (ProgressBar) findViewById(R.id.progress_Bar);
//允许Js的语言执行
mWebView.getSettings().setJavaScriptEnabled(true);
//加载本地H5
//        mWebView.loadUrl("file:///android_asset/about.html");

//加载H5地址
mWebView.loadUrl(HttpUrl.ABOUT_H5 + "?timestamp=" + System.currentTimeMillis());

/**
* 监听WebView的加载状态    分别为 ： 加载的 前 中 后期
* */
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 versionName = DeviceUtils.getVersionName(AboutUsActivity.this);
//在加载完成之后，我们通过android的方法，去调用js的方法，设置对应的版本号
mWebView.loadUrl("javascript:setVersion('" + versionName + " ');");
}

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//本应该加载的H5静态界面
mWebView.loadUrl(url);
return true;
}
});

mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress == 100) {
mBar.setVisibility(View.GONE);
} else {
mBar.setVisibility(View.VISIBLE);
mBar.setProgress(newProgress);
}
}
});
}
}

除去俩者交互，部分WebView进度条加载也可以通过这里学习。