APP开发_Android 与 js 互相调用

1 js 调用 Android 方法

当使用 JavaScript 调用 Android 原生方法时,主要涉及到 Android 的 WebView 组件,它允许你在 Android 应用中嵌入网页内容,并提供了 JavaScript 与 Android 代码交互的能力。

(1)创建JavaScriptInterface类

首先,需要创建一个Java类,实现 WebView.JavascriptInterface 接口。这个类将作为 JavaScript 和 Android 原生代码之间的桥梁。

import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

注意,@JavascriptInterface 注解是必须的,该注解允许 Android 识别哪些方法可以被 JavaScript 调用。

(2)在WebView中启用JavaScript并添加接口

然后,在 Activity 或 Fragment 中,需要初始化 WebView,启用 JavaScript,并将创建的 JavaScriptInterface 实例添加到 WebView 中。

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        // 加载一个HTML页面,或者直接使用webView.loadDataWithBaseURL()加载包含JavaScript的字符串
        webView.loadUrl("file:///android_asset/my_page.html");
    }
}

这里,addJavascriptInterface 方法的第一个参数是 JavaScriptInterface 的实例,第二个参数是 JavaScript 中用来访问这个接口的对象名(这里使用了 “Android”)。

(3)在 HTML 中调用 Android 方法

在 HTML 页面中,即可以使用 JavaScript 来调用 Android 方法。

<!DOCTYPE html>
<html>
<head>
    <title>WebView JavaScript Interface Example</title>
    <script type="text/javascript">
        function callAndroidFunction() {
            // 调用Android方法
            Android.showToast("Hello from JavaScript!");
        }
    </script>
</head>
<body>
    <h1>WebView JavaScript Interface Example</h1>
    <button onclick="callAndroidFunction()">Call Android Function</button>
</body>
</html>

在这里插入图片描述

在这个例子中,当用户点击按钮时, callAndroidFunction 函数会被调用,它使用 Android 端定义的 showToast 方法。

(4)处理返回值(如果必要)

如果需要从 Android 方法获取返回值并在 JavaScript 中使用它,则需要稍微修改你的方法,使其返回一个可以被 JavaScript 识别的值。这通常涉及到使用基本数据类型(如字符串、数字、布尔值)或 JSON 对象(实际上也是一个字符串)。

@JavascriptInterface
public String getSomeData() {
    // 假设你有一个方法来获取一些数据
    String data = "Some data";
    return data;
}

在 JavaScript 中,可以这样调用它:

function fetchAndroidData() {
    var data = Android.getSomeData();
    console.log(data); // 输出 "Some data"
}

(5)注意事项

  • 不要暴露敏感功能:只暴露那些确实需要从 JavaScript 调用的功能。避免暴露可能导致应用崩溃、数据泄露或执行敏感操作的方法。
  • 考虑性能和用户体验:频繁地在 JavaScript 和 Android 之间传递大量数据可能会影响应用的性能。因此需要确保只传递必要的数据,并尽量减少调用次数。

2 Android 调用 js 方法

(1)启用 WebView 的 JavaScript 支持

首先,需要在 WebView 设置中启用 JavaScript 支持。这可以通过调用 WebSettings 对象的 setJavaScriptEnabled(true) 方法来实现。

WebView webView = findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

(2)加载HTML内容或网页

接下来,需要加载包含 JavaScript 代码的 HTML 内容或网页到 WebView 中。这可以通过调用 loadUrl 或 loadData 方法实现。

webView.loadUrl("https://example.com"); // 加载网页
// 或者
String htmlContent = "<html><body><h1>Hello World!</h1><script>function showAlert() { alert('Hello from JavaScript'); }</script></body></html>";
webView.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null); // 加载HTML内容

(3)调用JavaScript代码

一旦 WebView 加载了内容,就可以使用 evaluateJavascript 方法来执行 JavaScript 代码。这个方法接受一个 JavaScript 字符串作为参数,并可以接收一个回调来处理 JavaScript 执行后的结果。

webView.evaluateJavascript("javascript:(function() { return document.title; })()", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        // 在这里处理JavaScript返回的值
        Log.d("WebView", "Page title: " + value);
    }
});

在上面的例子中,我们执行了一个匿名函数,它返回当前文档的标题,并通过 ValueCallback 回调接收这个值。

(3)处理异步 JavaScript 执行

如果需要执行的 JavaScript 代码是异步的(例如,它依赖于某个事件或回调),那么一定要确保 Android 代码能够等待 JavaScript 代码执行完成。可以 JavaScript 代码中设置一个全局变量或使用某种形式的通信机制(如 postMessage 到 iframe)。

(4)注意要与 WebView 的生命周期同步

确保 JavaScript 调用与 WebView 的生命周期同步。当 WebView 被销毁或不可用时,就不可以再执行 JavaScript 代码。可以通过监听 WebView 的生命周期事件(如 onPause 和 onResume)来管理这一点。

  • 17
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue开发的App可以通过Cordova插件调用手机的原生功能。Cordova是一个开源的移动应用程序开发框架,它提供了一组API,允许我们使用JavaScript代码访问手机的原生功能,如相机、短信、电话、通讯录等。 下面以调用相机为例,介绍如何在Vue开发的App中使用Cordova插件调用手机的原生相机功能: 1. 安装Cordova插件 在终端中运行以下命令: ``` cordova plugin add cordova-plugin-camera ``` 2. 在Vue组件中调用Cordova插件 在Vue组件的方法中调用Cordova插件,代码如下: ```javascript navigator.camera.getPicture(function(imageData) { console.log("Image data: " + imageData); }, function(error) { console.log("Error: " + error); }, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); ``` 在上面的代码中,我们调用了Cordova插件的`getPicture`方法来打开手机的相机,并获取拍摄的照片。在方法的第一个回调函数中,我们可以获取到拍摄的照片数据,可以将其显示在页面上或上传到服务器。在方法的第二个回调函数中,我们可以处理相机打开失败的情况。在方法的第三个参数中,我们可以指定相机的选项,如照片质量、目标类型等。 3. 编译打包Vue App 在完成上述步骤后,我们需要使用Cordova命令行工具将Vue App编译打包成原生App,并在手机上安装运行。 在终端中运行以下命令: ``` cordova platform add android cordova build android cordova run android ``` 完成以上步骤后,我们就可以在手机上测试调用相机功能了。类似地,我们也可以使用其他Cordova插件调用手机的其他原生功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值