android webview和h5交互,WebView与H5交互

有时候，我们需要在应用内集成显示网页，然而加载和显示网页的任务通常都是浏览器的任务，针对这个需求Android提供了WebView控件，借助它可以在应用内展示引入的网页并与之交互。

WebView的基本用法

1. 添加网络访问权限，设置WebView控件

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".ui.MainActivity">

android:id="@+id/web_view"

android:layout_width="match_parent"

android:layout_height="match_parent" />

2. 加载显示的Url

public class MainActivity extends AppCompatActivity {

private static final String TAG = "MainActivity";

private String url = "https://www.baidu.com";

private WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initView();

loadWeb();

}

private void loadWeb() {

//允许网页加载JavaScript脚本

mWebView.getSettings().setJavaScriptEnabled(true);

//当网页跳转时，仍旧在本页面内

mWebView.setWebViewClient(new WebViewClient());

mWebView.loadUrl(url);

}

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

//响应Back键，回退网页时仍在本页面

if (keyCode == KeyEvent.KEYCODE_BACK) {

if (mWebView.canGoBack()) {

mWebView.goBack();

return true;

}

}

return super.onKeyDown(keyCode, event);

}

private void initView() {

mWebView = findViewById(R.id.web_view);

}

}

补充，打开不同存储区域的Html

1.打开assets

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

2.SD卡中的Html

mWebView.loadUrl(“content://com.android.htmlfileprovider/sdcard/index.html”);

3.服务端指定Url的Html。

mWebView.loadUrl(“http://www.baidu.com”);

我也不知道某度为什么总喜欢推送妹子的图片

WebView提供的API

1.WebViewClient

用来监控webview网页的加载状态

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view,

WebResourceRequest request) {

//发生重定向，自己处理

return true;

}

@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);

}

@Override

public void onReceivedError(WebView view, WebResourceRequest request,

WebResourceError error) {

//页面出现错误回调

super.onReceivedError(view, request, error);

}

});

2.WebChromeClient

处理网页内容与Js交互

mWebView.setWebChromeClient(new WebChromeClient(){

@Override

public boolean onJsAlert(WebView view, String url,

String message, JsResult result) {

//接收Alert

Toast.makeText(mContext,message,Toast.LENGTH_SHORT).show();

result.confirm();

return true;

}

@Override

public boolean onJsPrompt(WebView view, String url,

String message, String defaultValue,

JsPromptResult result) {

result.confirm("Pay Success");

return true;

}

@Override

public void onReceivedIcon(WebView view, Bitmap icon) {

super.onReceivedIcon(view, icon);

//接收网页图标

}

@Override

public void onReceivedTitle(WebView view, String title) {

super.onReceivedTitle(view, title);

//接收网页标题

}

});

3.WebSettings

设置webview的各种详细参数

WebSettings settings = mWebView.getSettings();

设置网页文字大小

settings.setDefaultFontSize(30);

允许网页加载JavaScript脚本

settings.setJavaScriptEnabled(true);

settings.setAppCacheEnabled(true);

settings.setBuiltInZoomControls(true);

WebView与H5交互

目前三类主流应用程序

三者对比

Android与Html的交互，实际就是Android原生API与Js的交互。

分两种情况

原生调用Js

Js调用原生

1. 准备assets下的目录

演示网站

function getAndroidMethod(){

androidApp.androidMethod();

}

function showName(name){

document.getElementById("userName").value = name;

}

调用Android原生的方法

2. 设置Android界面

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".ui.activity.MainActivity">

android:id="@+id/webView"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" />

android:id="@+id/btn_get_user_name"

android:layout_width="match_parent"

android:layout_height="56dp"

android:text="Get UserName"

android:textAllCaps="false" />

3. 定义相互通信

public class MainActivity extends AppCompatActivity {

private WebView mWebView;

private Context mContext;

private Button mBtnGetUserName;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mContext = this;

initView();

loadWeb();

}

private void loadWeb() {

mWebView.getSettings().setJavaScriptEnabled(true);

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

mWebView.setWebViewClient(new WebViewClient());

final WebAppInterface webAppInterface = new WebAppInterface();

//相互通信的方法，和Js调用原生时需要的接口

mWebView.addJavascriptInterface(webAppInterface, "androidApp");

mBtnGetUserName.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

webAppInterface.showName("原生调用Js传递数据");

}

});

}

//最好定义个接口，再准备实现类，这里为了演示方便就不写了

class WebAppInterface {

//Js通过定义的原生接口调用此方法

//一定加注解否则可能会报错

@JavascriptInterface

public void androidMethod() {

Toast.makeText(mContext, "Android原生方法", Toast.LENGTH_SHORT).show();

}

public void showName(String name) {

//原生调用Js

mWebView.loadUrl("javascript:showName('" + name + "')");

}

}

private void initView() {

mWebView = findViewById(R.id.webView);

mBtnGetUserName = findViewById(R.id.btn_get_user_name);

}

}