Android 与 H5 交互,初始页面请求网络,数据经过处理后更新在页面上,代码示例
时间: 2024-10-16 20:19:49 浏览: 6
在Android应用中与H5页面进行交互,通常会使用WebView组件来加载HTML页面,并通过JavaScript接口(也叫WebViewClient或WebChromeClient)实现实时通信。当你需要从服务器获取数据并更新到H5页面时,可以按照以下步骤操作:
1. **创建WebView实例**:
```java
WebView webView = (WebView) findViewById(R.id.web_view);
webView.setWebViewClient(new WebViewClient());
```
2. **初始化网络请求**:
在H5页面中,你可以编写一个JavaScript函数(如`getData()`)来发起异步请求。当这个请求完成时,它可能会触发一个回调到Android端。
3. **定义JavaScript接口**:
```java
private final WebChromeClient mChromeClient = new WebChromeClient() {
@JavascriptInterface
public void onDataReceived(String data) {
// 更新网页内容
webView.loadData(data, "text/html", null);
}
};
// 注册客户端
webView.setWebChromeClient(mChromeClient);
```
4. **H5页面内的网络请求** (假设使用的是Fetch API 或 Axios):
```javascript
function fetchData() {
fetch('your_api_url')
.then(response => response.text())
.then(data => {
// 调用Android端方法更新数据
window.androidUpdateData(data);
});
}
fetchData();
```
5. **Android端接收并处理数据**:
```java
public void androidUpdateData(String data) {
// 在这里对data进行处理
String processedData = processData(data);
runOnUiThread(() -> {
// 使用loadData方法更新WebView内容
getDataReceived(processedData);
});
}
```
阅读全文