说到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里面,我们获取到这个数据进行操作就行了。是不是很简单!