Android Studio中从WebView传递宠物店信息到Activity的实现方案

一、Web端修改（Leaflet+Esri JS页面） #

给弹窗中的「VIEW PROFILE」按钮绑定点击事件，触发时向Android端传递宠物店的唯一标识（比如Firestore文档ID）：

方式1：调用Android暴露的JS接口 #

// 假设当前宠物店的Firestore文档ID为petShopId
document.querySelector('.view-profile-btn').addEventListener('click', function() {
    // 确保Android端已暴露接口，避免非WebView环境报错
    if (typeof Android !== 'undefined') {
        Android.openPetShopProfile(petShopId);
    }
});

方式2：触发自定义URL跳转 #

document.querySelector('.view-profile-btn').addEventListener('click', function() {
    // 构造自定义协议URL，携带宠物店ID
    window.location.href = `petshop://profile?id=${petShopId}`;
});

二、Android端配置与逻辑实现 #

前置准备 #

确保项目已集成Firestore依赖，且已添加网络权限（INTERNET）。

方式1：使用JavascriptInterface #

1. 配置WebView启用JS并添加接口：

WebView webView = findViewById(R.id.map_webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
// 暴露名为"Android"的接口给Web端
webView.addJavascriptInterface(new PetShopBridge(this), "Android");

2. 定义接口类，处理Web端调用：

public class PetShopBridge {
    private final Context context;

    public PetShopBridge(Context context) {
        this.context = context;
    }

    // 必须添加@JavascriptInterface注解，Web端才能调用
    @JavascriptInterface
    public void openPetShopProfile(String petShopId) {
        FirebaseFirestore db = FirebaseFirestore.getInstance();
        // 根据ID从Firestore查询宠物店详情
        db.collection("petShops").document(petShopId)
                .get()
                .addOnSuccessListener(docSnapshot -> {
                    if (docSnapshot.exists()) {
                        // 将文档转为实体类（需提前定义PetShop类并实现Parcelable/Serializable）
                        PetShop petShop = docSnapshot.toObject(PetShop.class);
                        // 跳转至详情Activity并传递数据
                        Intent intent = new Intent(context, PetShopProfileActivity.class);
                        intent.putExtra("PET_SHOP_INFO", petShop);
                        context.startActivity(intent);
                    }
                })
                .addOnFailureListener(e -> {
                    Toast.makeText(context, "加载详情失败", Toast.LENGTH_SHORT).show();
                });
    }
}

方式2：拦截自定义URL #

1. 配置WebView并设置WebViewClient拦截URL：

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

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        String url = request.getUrl().toString();
        // 拦截自定义协议的URL
        if (url.startsWith("petshop://")) {
            Uri uri = Uri.parse(url);
            String petShopId = uri.getQueryParameter("id");
            if (petShopId != null) {
                // 调用查询逻辑（同方式1的Firestore查询与跳转代码）
                loadPetShopProfile(petShopId);
                return true; // 阻止WebView加载该URL
            }
        }
        return super.shouldOverrideUrlLoading(view, request);
    }
});

2. 实现查询与跳转方法：

private void loadPetShopProfile(String petShopId) {
    FirebaseFirestore db = FirebaseFirestore.getInstance();
    db.collection("petShops").document(petShopId)
            .get()
            .addOnSuccessListener(docSnapshot -> {
                if (docSnapshot.exists()) {
                    PetShop petShop = docSnapshot.toObject(PetShop.class);
                    Intent intent = new Intent(this, PetShopProfileActivity.class);
                    intent.putExtra("PET_SHOP_INFO", petShop);
                    startActivity(intent);
                }
            })
            .addOnFailureListener(e -> {
                Toast.makeText(this, "加载详情失败", Toast.LENGTH_SHORT).show();
            });
}

注意事项 #

• 实体类PetShop需实现Parcelable或Serializable接口，才能通过Intent传递。
• 使用JavascriptInterface时，避免暴露敏感方法，降低安全风险。
• 拦截URL时需验证参数合法性，防止恶意跳转。

内容的提问来源于stack exchange，提问作者Don Min Soo