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里面的代码。

这样表达应该还算清晰!
目录
相关文章
|
23天前
|
JavaScript 前端开发 开发者
像素鸟html与js源码(4节课勉强做完)
像素鸟html与js源码(4节课勉强做完)
21 0
|
3天前
|
小程序
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
|
4天前
|
前端开发 关系型数据库 MySQL
基于python+django+vue.js开发的社区养老管理系统
基于python+django+vue.js开发的社区养老管理系统
27 1
|
3天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
3天前
|
JavaScript
Vue中嵌入原生HTML页面的方法
Vue中嵌入原生HTML页面的方法
10 0
|
4天前
|
前端开发 关系型数据库 MySQL
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统
26 0
|
7天前
|
前端开发 关系型数据库 MySQL
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统
34 2
|
8天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
23 1
|
22天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
14 0
|
22天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0

相关产品

  • 云迁移中心