HTML/JS 调用android方法，开发 Android。

来源：互联网发布：中国网瘾少年数据编辑：程序博客网时间：2024/06/01 07:12

初次尝试用HTML/JS开发Android。

由于业务需求和大趋势导致，目前纵观很多APP。很多都是用H5+native的方式去开发。关于wepApp和nativeApp它们之前的是是非非就不说了。

下面是利用H5应该是JS去调用本地Android的代码。

不是什么特别高深的东西。

第一布局：

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" 3     android:layout_height="match_parent" tools:context=".MainActivity"> 4  5    <WebView 6        android:id="@+id/wv_web" 7        android:layout_width="match_parent" 8        android:layout_height="match_parent"></WebView> 9 10 </RelativeLayout>

第二native代码。

 setContentView(R.layout.activity_main);        webView = (WebView) findViewById(R.id.wv_web);        webView.loadUrl("file:///android_res/raw/test.html");        webView.setVerticalScrollBarEnabled(false);        webView.setHorizontalScrollBarEnabled(false);        webView.getSettings().setJavaScriptEnabled(true); //加上这句话才能使用javascript方法;        webView.addJavascriptInterface(new PayJavaScriptInterface(), "demo");

 1  final class PayJavaScriptInterface { 2         PayJavaScriptInterface() { 3         } 4         @JavascriptInterface 5         public String getUserinfo()  { 6             return "getUserinfo"; 7         } 8  9 10         @JavascriptInterface11         public boolean needLogin()  {12             return true;13         }14         @JavascriptInterface15         public void haha()  {16             Toast.makeText(MainActivity.this,"hahaa",Toast.LENGTH_SHORT).show();17             Log.e("sssssssssssssssssssssss","sdfddddddddd");18         }19     }

第三HTML里面的代码：

test.html

<!DOCTYPE HTML><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='test1.html';}}</script></body></html>

test1.html代码：

 1 <!DOCTYPE HTML> 2 <html> 3 <body> 4 <input value="立即报名" type="button" onClick="haha();"/> 5  6 </body> 7  8 <script> 9 10 function haha(){11 12 window.demo.haha();13 14 }15 16 </script>17 18 </html>

这样就可以实现了。

需要注意的点：

1.这里我加载的是本地app里面的html，所以使用的方式是

   webView.loadUrl("file:///android_res/raw/test.html");

关于加载网页的可以直接，写上url，而我的html是的放在raw目录里面。使用的AndroidStudio。

2.设置了下webView的相关配置信息。具体代码有备注，或者可以查阅其他相关资料。

3.在本地写：

webView.addJavascriptInterface(new PayJavaScriptInterface(), "demo");

其中第一个参数就是我下面写的一个类，第二个参数是在HTML里面的JS需要使用的。注意，在HTML里面我window后面跟的demo和这里是一样的，也必须保持一致才能成功调用。


然后就是你在JS里面调用了。这样应该就ok了。今天还继续研究下这玩意。


突然感觉不是特别清晰，这样说吧，这个demo这个就代码我们第一个参数new出的对象，然后我们在JS里面写window.demo，代表我PayJavaScriptInterface这个对象的实例，也就是我在第一个参数这边new出来的。然后再window.demo.haha();其实就是调用了PayJavaScriptInterface里面的haha的方法。然后就执行haha里面的代码。

这样表达应该还算清晰！

0 0