JS调用Android方法示例

最新推荐文章于 2024-04-16 20:33:30 发布

Jason_Flash

最新推荐文章于 2024-04-16 20:33:30 发布

阅读量1.3k

点赞数 1

分类专栏： # Android开发文章标签： android

本文链接：https://blog.csdn.net/Jason_Flash/article/details/108449870

版权

Android开发专栏收录该内容

13 篇文章 5 订阅

订阅专栏

JS调用Android方法示例

前言
示例代码
测试

前言

目前很多App里都内置了Web网页（Hybrid App），这就涉及到Android客户端与Web网页交互的实现，接下来通过示例说明JS如何调用Android方法。

示例代码

AndroidManifest.xml

AndroidManifest.xml需要加入INTERNET权限：

<uses-permission android:name="android.permission.INTERNET" />

AndroidtoJs.java

定义一个与JS对象映射关系的Android类：AndroidtoJs，AndroidtoJs中被JS调用的方法必须加入@JavascriptInterface注解：
在这里插入图片描述

package com.example.testjs2;

import android.webkit.JavascriptInterface;

public class AndroidtoJs {
    private String status = "off";

	//打印信息方法
    @JavascriptInterface
    public void print(String msg) {
        System.out.println(msg);
    }

	//获取状态值方法
    @JavascriptInterface
    public String getStatus() {
        return status;
    }

	//修改状态值方法
    @JavascriptInterface
    public void setStatus(String status) {
        this.status = status;
    }
}

activity_main.xml

在activity_main.xml添加一个WebView即可，这里将id设为webView1。

MainActivity.java

在MainActivity.java为webView设置与JS交互的权限，并通过将addJavascriptInterface()将Java对象映射到JS对象，最后加载javascript.html（在下一步创建）：

package com.example.testjs2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webView1);
        WebSettings webSettings = webView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);

        // 通过addJavascriptInterface()将Java对象映射到JS对象
        //参数1：Javascript对象名
        //参数2：Java对象名
        webView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象
        webView.loadUrl("file:///android_asset/javascript.html");
    }
}

javascript.html

创建assets目录，并在assets目录下添加JS文件，这里命名为javascript.html，在javascript.html里通过test对象调用Android方法：
在这里插入图片描述

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson</title>
      <script>
         function turnOn() {
            test.setStatus("On");
         }
         function turnOff() {
            test.setStatus("Off");
         }
         function getStatus(){
            let status = "";
            status = test.getStatus();
            test.print("Status:"+status);
         }
      </script>
   </head>
   <body>
      <br /><br /><br /><br /><br /><br />
      <button onClick="turnOn()">打开</button>
      <br /><br /><br /><br /><br /><br />
      <button onClick="turnOff()">关闭</button>
      <br /><br /><br /><br /><br /><br />
      <button onClick="getStatus()">点击查看状态</button>
   </body>
</html>

测试

在真机或模拟器上运行app，反复点击三个按钮，查看logcat的打印是否正确：
在这里插入图片描述

Jason_Flash

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS调用Android方法示例

JS调用Android方法示例前言示例代码AndroidManifest.xmlAndroidtoJs.javaactivity_main.xmlMainActivity.javajavascript.html测试前言目前很多App里都内置了Web网页（Hybrid App），这就涉及到Android客户端与Web网页交互的实现，接下来通过示例说明JS如何调用Android方法。示例代码AndroidManifest.xmlAndroidManifest.xml需要加入INTERNET权限：&l
复制链接

扫一扫