vue3 JS 调用 Android 原生方法

在Vue 3中调用Android原生方法通常涉及到WebView与原生代码的交互。你可以使用WebView的JavaScript接口来实现这一点。以下是一个简化的步骤和示例代码：

1. 在Android端，创建一个类继承自WebView并实现JavaScriptInterface。
2. 在这个类中，定义一个可以被JavaScript调用的方法。
3. 在WebView中添加这个类作为JavaScript接口。
4. 在Vue 3的JavaScript代码中，通过window.webViewBridge调用Android原生方法。

Android端示例代码：

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

webView.addJavascriptInterface(new WebAppInterface(this), "webViewBridge");

Vue 3前端JavaScript代码：

// 假设你已经在Vue组件中获取了WebView的引用

mounted() {
  // 调用Android原生方法
  window.webViewBridge.showToast('Hello from WebView!');
}

确保你的WebView设置允许JavaScript交互，并且在WebView中正确地加载了你的Vue应用。这样当Vue代码尝试调用window.webViewBridge.showToast时，Android会相应地显示一个Toast消息。

原文地址：https://blog.csdn.net/weixin_42504805/article/details/140336803

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！