开发者社区> lhyxcxy> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 初次尝试用HTML/JS开发Android。 由于业务需求和大趋势导致,目前纵观很多APP。很多都是用H5+native的方式去开发。关于wepApp和nativeApp它们之前的是是非非就不说了。 下面是利用H5应该是JS去调用本地Android的代码。 不是什么特别高深的东西。 第一布局: 1 <RelativeLayou
+关注继续查看

初次尝试用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里面的代码。

这样表达应该还算清晰!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
实现Chrome Devtools调试JavaScript V8引擎
最近开发小程序JavaScript的运行时,通过在客户端嵌入JavaScript V8引擎来实现。前端同学需要调试JavaScript代码,正好Chrome浏览器的Devtools是与V8的Inspector调试协议是一脉相承的,理论上是可以使用Chrome Devtools调试JavaScript V8引擎。 [V8的文档](https://github.com/v8/v8/wiki/De
3281 0
【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123863 ...
832 0
【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123854 ...
862 0
【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123835 ...
835 0
【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123820 ...
867 0
【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123810 ...
712 0
html静态页面传递参数-利用JavaScript方法实现静态
利用JavaScript方法实现静态html页面参数传递 原理是应用获得地址栏字串,进行分析。   aa.htm是参数输渗入渗出界面   bb.htm是参数接收处理界面   aa.htm                  function submit()   {   var input1 = document.
1005 0
+关注
lhyxcxy
专注于前后端服务器交互,人工智能,NLP领域
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Android插件化:从入门到放弃
立即下载
Android组件化实现
立即下载
Android开发之多进程架构
立即下载