Android和H5交互-基础篇

要须心地收汗马，孔孟行世目杲杲。这篇文章主要讲述Android和H5交互-基础篇相关的知识，希望能为你提供帮助。
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);

【Android和H5交互-基础篇】若调用的js方法没有返回值，则直接可以调用mWebView.loadUrl("javascript:do()"); 其中do是js中的方法；若有返回值时我们可以调用mWebView.evaluateJavascript()方法：

mWebView.evaluateJavascript("sum(1,2)", new ValueCallback< String> () { @Override public void onReceiveValue(String value) { Log.e(TAG, "onReceiveValue value="https://www.songbingjia.com/android/+ value); } });

js代码如下：

< script type="text/javascript"> function sum(a,b){ return a+b; } function do(){ document.getElementById("p").innerHTML="hello world"; } < /script>

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中怎么来调用呢？

< script type="text/javascript"> function s(){ //调用Java的back()方法 var result =window.android.back(); document.getElementById("p").innerHTML=result; }< /script>

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< String> () { @Override public void onReceiveValue(String value) { Log.e(TAG, "onReceiveValue value="https://www.songbingjia.com/android/+ value); } }); } public class JsInteration {@JavascriptInterface public String back() { return"hello world"; } } }

test.html

< !DOCTYPE html> < html> < head> < title> < /title> < script type="text/javascript"> function sum(a,b){ return a+b; } function s(){ var result =window.android.back(); document.getElementById("p").innerHTML=result; }< /script> < /head> < body> < button onclick="s()"> 调用本地方法< /button> < a href="file:///android_asset/test2.html"> 点击< /a> < p id="p"> < /p> < /body> < /html>

作者：YouJZ
链接：http://www.jianshu.com/p/a25907862523
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。