如何将XAMPP运行的localhost站点接入Android Studio WebView

1. 先配置XAMPP允许外部设备访问 #

默认XAMPP的Apache只允许本机访问，先改权限配置：

• 打开XAMPP控制面板，点击Apache行右侧的Config按钮，选择httpd.conf配置文件，搜索找到Require local配置项，替换为Require all granted，保存文件后重启Apache服务。
• 查你运行XAMPP的电脑的局域网IP：Windows系统开命令提示符执行ipconfig，macOS/Linux开终端执行ip a，找到当前联网网卡对应的IPv4地址，一般是192.168.x.x格式。
• 本机验证：不要用localhost，用刚才查到的局域网IP拼上你PHP站点的路径，在浏览器访问（比如IP是192.168.3.10，站点在XAMPP的blog目录下，就访问http://192.168.3.10/blog），确认能正常打开站点再往下走。
  注意：如果电脑开了系统防火墙，记得给Apache的监听端口（默认是80，如果你自己改了端口就填对应端口）添加入站允许规则，不然外部设备会被拦截。

2. 按调试场景选对访问地址 #

Android端不能直接填localhost，因为这个地址指向的是Android设备自身，不是你跑XAMPP的电脑，分两种场景填地址：

• 用Android官方原生模拟器调试：直接用模拟器预留的宿主机映射地址http://10.0.2.2，带端口就加端口（比如Apache用8080端口就是http://10.0.2.2:8080），后面拼你自己的站点路径即可。
• 用真机调试：确保手机和运行XAMPP的电脑连接同一个WiFi/同一局域网，直接用前面查到的电脑局域网IP拼站点路径即可，比如http://192.168.3.10/blog。

3. Android端WebView配置 #

• 先加权限：打开项目的AndroidManifest.xml，在<manifest>标签下添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

注意：Android 9及以上版本默认禁止明文HTTP请求，如果你没给XAMPP配置HTTPS证书，需要在<application>标签上加属性android:usesCleartextTraffic="true"放开限制。

• 在对应页面的代码里初始化WebView，基础配置参考：

// Java版本示例
WebView webView = findViewById(R.id.web_view);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); // 站点用到JS必须开启
webSettings.setDomStorageEnabled(true); // 站点用到本地存储时开启
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
// 拦截页面跳转，不让跳转系统浏览器
webView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        view.loadUrl(request.getUrl().toString());
        return true;
    }
});
// 替换成你前面验证过的可访问地址
webView.loadUrl("http://对应地址/你的站点路径");

// Kotlin版本示例
val webView = findViewById<WebView>(R.id.web_view)
webView.settings.apply {
    javaScriptEnabled = true
    domStorageEnabled = true
    useWideViewPort = true
    loadWithOverviewMode = true
}
webView.webViewClient = object : WebViewClient() {
    override fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean {
        view.loadUrl(request.url.toString())
        return true
    }
}
webView.loadUrl("http://对应地址/你的站点路径")

常见问题排查 #

• 报net::ERR_CONNECTION_REFUSED：检查Apache是否正常启动、防火墙是否放通对应端口、地址和端口是否填写正确，真机场景下确认两个设备在同一局域网。
• 报403 Forbidden：检查Apache配置里的访问权限是否已经改为Require all granted，修改后是否重启了Apache服务。
• 页面加载后样式错乱、交互失效：检查WebView是否开启了JS支持，是否配置了WebViewClient让页面跳转留在WebView内部。

内容的提问来源于stack exchange，提问作者Mahmud Mehedi Hasan