HTML-VUE页面调用android 客户端网络请求并返回数据

沅霖2024-07-16 11:31

在Html-- Vue页面调用Android客户端网络请求并返回数据，通常需要通过WebView与Android客户端的JavaScript接口进行交互。以下是一个简化的示例：

在Android端，创建一个JavaScript接口：

html 复制代码

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void fetchDataFromServer(String url, final ValueCallback<String> callback) {
        // 在这里执行网络请求，然后将结果传递给callback
        // 示例代码：
        // 异步网络请求，这里使用AsyncTask进行简化
        new AsyncTask<String, Void, String>() {
            @Override
            protected String doInBackground(String... params) {
                // 执行网络请求，获取数据
                // 假设这里使用HttpURLConnection或者其他库进行请求
                String response = "从服务器获取的数据";
                return response;
            }

            @Override
            protected void onPostExecute(String result) {
                callback.onReceiveValue(result);
            }
        }.execute(url);
    }
}

2.在WebView中设置该接口

html 复制代码

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

3.在Vue页面中，调用这个接口：

html 复制代码

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">
      {{ data }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    fetchData() {
      // 调用Android提供的接口
      window.Android.fetchDataFromServer('https://your-server.com/api/data', response => {
        this.data = response;
      });
    }
  }
};
</script>

确保WebView的设置允许JavaScript接口，并且WebView加载的页面有权限调用这些接口。这样，当用户在Vue页面中点击按钮时，会通过WebView调用Android客户端的网络请求方法，然后将结果回调到Vue页面中显示。