Android原生应用实现Markdown列表显示：构建类似AI聊天问答功能的WebView交互

leory
904 阅读2分钟

为了在Android应用中实现类似AI聊天问答功能，并显示Markdown数组作为列表，我们需要在Android原生代码中处理Markdown数组的获取，并通过WebView与JavaScript进行交互来显示这些内容。 以下是一个实现此功能的步骤和示例代码：

步骤：

  1. 准备Markdown数组：在Android原生代码中准备Markdown数据数组。
  2. 创建WebView组件：在布局文件中添加WebView组件。
  3. 加载HTML页面：WebView加载一个包含JavaScript的HTML页面，该页面能够解析Markdown并显示列表。
  4. 传递Markdown数组到JavaScript：使用Android原生代码将Markdown数组转换为JSON字符串，然后传递给WebView中的JavaScript。
  5. 在JavaScript中解析Markdown并显示列表：JavaScript接收JSON字符串，解析Markdown，并生成HTML列表显示在页面上。

示例代码：

1. 在Android布局文件中添加WebView组件：

<!-- res/layout/activity_main.xml -->
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2. 在Android原生代码中准备Markdown数组并加载HTML页面：

// MainActivity.java
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import org.json.JSONArray;
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.setWebViewClient(new WebViewClient());
        // 加载包含Markdown渲染逻辑的HTML页面
        webView.loadUrl("file:///android_asset/markdown_list.html");
        // 准备Markdown数组
        String[] markdownArray = {
            "# Question 1\n\nThis is the answer to question 1.",
            "# Question 2\n\nThis is the answer to question 2.",
            "# Question 3\n\nThis is the answer to question 3."
        };
        // 将Markdown数组转换为JSON字符串
        JSONArray jsonArray = new JSONArray();
        for (String markdown : markdownArray) {
            jsonArray.put(markdown);
        }
        String markdownJson = jsonArray.toString();
        // 稍后调用JavaScript函数以渲染Markdown列表
        webView.postDelayed(() -> {
            webView.loadUrl("javascript:renderMarkdownList(" + markdownJson + ")");
        }, 1000); // 延迟1秒确保页面加载完成
    }
}

3. 在assets目录下创建一个名为markdown_list.html的HTML文件：

<!-- assets/markdown_list.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Markdown List Display</title>
<script src="https://cdn.jsdelivr.net/npm/markdown-it@12.3.2/dist/markdown-it.min.js"></script>
<script>
function renderMarkdownList(markdownList) {
    var md = window.markdownit();
    var listHtml = '<ul>';
    markdownList.forEach(function(markdown) {
        var html = md.render(markdown);
        listHtml += '<li>' + html + '</li>';
    });
    listHtml += '</ul>';
    document.getElementById('content').innerHTML = listHtml;
}
</script>
</head>
<body>
<div id="content">
<!-- Markdown列表将被渲染在这里 -->
</div>
</body>
</html>

在这个HTML文件中，我们定义了一个renderMarkdownList函数，它接收一个Markdown数组，将其转换为HTML列表，并显示在页面上。 确保您的应用有权限读取assets目录中的文件，并在AndroidManifest.xml中声明INTERNET权限。 现在，当MainActivity被创建时，它将加载HTML页面，并在页面加载完成后将Markdown数组传递给JavaScript，JavaScript将解析Markdown并将其作为列表显示在页面上。

avatar
文章
阅读
粉丝