hybrid App開發也不是什麼新鮮事了，其中native和h5之間的互動則是必不可少的。Android中是如何和H5互動的？
1、webView加載頁面
我們都知道在Android中是通過webView來加載html頁面的，根據HTML檔案所在的位置不同寫法也不同：
//例如：加載assets檔案夾下的test.html頁面
mWebView.loadUrl("file:///android_asset/test.html")
//例如：加載網頁
mWebView.loadUrl("http://www.baidu.com")
如果隻是這樣調用mWebView.loadUrl()加載的話,那麼當你點選頁面中的連結時，頁面将會在你手機預設的浏覽器上打開。那如果想要頁面在App内中打開的話，那麼就得設定setWebViewClient：
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
}
});
2、Android本地通過Java調用HTML頁面中的JavaScript方法
想要調用js方法那麼就必須讓webView支援
WebSettings webSettings = mWebView.getSettings();
//設定為可調用js方法
webSettings.setJavaScriptEnabled(true);
若調用的js方法沒有傳回值，則直接可以調用mWebView.loadUrl("javascript:do()");其中do是js中的方法；若有傳回值時我們可以調用mWebView.evaluateJavascript()方法：
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
js代碼如下：
function sum(a,b){
return a+b;
}
function do(){
document.getElementById("p").innerHTML="hello world";
}
2、js調用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface注解來聲明，下面是在一個本地Java方法
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
定義完這個方法後再調用mWebView.addJavascriptInterface()方法：
mWebView.addJavascriptInterface(new JsInteration(), "android");
那麼在js中怎麼來調用呢？
function s(){
//調用Java的back()方法
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
4、攔截HTML頁面中的點選事件
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//判斷url攔截事件
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
以上就是Java調用js方法以及js調用Java方法的實作互動方式中的一種。下面給出完整代碼：
mainActivity
public class MainActivity extends AppCompatActivity {
public static final String TAG = "MainActivity";
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
mWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsInteration(), "android");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
}
//Android調用有傳回值js方法
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View v) {
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
}
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
}
test.html
function sum(a,b){
return a+b;
}
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
調用本地方法
點選