如今H5的廣泛應用，使得Android與H5交互也變得十分廣泛，這篇文章就交互問題淺談一下。
Android通過內置的控件Webview來加載H5頁面。webview的應用十分簡單，只有設置一下其屬性即可。代碼如下：
webView.setVerticalScrollBarEnabled(false);
webView.setHorizontalScrollBarEnabled(false);
webView.getSettings().setJavaScriptEnabled(true); //加上這句話才能使用javascript方法
webView.getSettings().setDomStorageEnabled(true);
webView.requestFocus();
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSavePassword(false);
webView.getSettings().setSaveFormData(false);
webView.getSettings().setSupportZoom(false);
而在H5頁面里面代碼如下
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>交互Demo</title> | |
| <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"> | |
| </head> | |
| <body> | |
| getUserinfo: | |
| <div id="userinfo"></div> | |
| <input value="立即報名" type="button" onClick="baoming();" /><br> | |
| <script> | |
| /*var rs=window.om.getUserinfo(); | |
| document.getElementById('userinfo').innerHTML=rs;*/ | |
| var rs=window.demo.getUserinfo(); | |
| var obj = eval ("(" + rs + ")"); | |
| if(obj.status){ | |
| document.getElementById('userinfo').innerHTML=obj.data.nickname; | |
| } | |
| function baoming(){ | |
| if(window.demo.needLogin()){ | |
| location.href='my_demo1.html'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |
然后接下來就是在Android里面實現交互的東西了：
webView.addJavascriptInterface(new PayJavaScriptInterface(), "demo");這句話就是給android添加javascript代碼，讓H5頁面能夠調用，第二個參數對應的是H5里面的"
“window”后面的值。
在activity里面實現H5里面的方法，注意方法之前要加上注解“@JavascriptInterface”，當android:targetSdkVersion的數值小於17無所謂，當大於等於17時就必須添加，否則不會調用方法里面的java代碼。
final class PayJavaScriptInterface {
PayJavaScriptInterface() {
}
@JavascriptInterface
public String getUserinfo() {
}
@JavascriptInterface
public boolean needLogin() {
}
}
到此，就可以實現交互功能，如果Android需要提交數據給H5的話，就可以把所需的內容轉為Json串即可。
如何提交？