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

最新推荐文章于 2024-07-24 11:23:56 发布

life1024

最新推荐文章于 2024-07-24 11:23:56 发布

阅读量2k

点赞数

分类专栏： android 跨平台开发

本文链接：https://blog.csdn.net/u013378306/article/details/54965292

版权

跨平台开发同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

android

2 篇文章 0 订阅

订阅专栏

初次尝试用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         @JavascriptInterface
11         public boolean needLogin()  {
12             return true;
13         }
14         @JavascriptInterface
15         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里面的代码。

这样表达应该还算清晰！