“Android网站客户端开发”通常指将一个网站（特别是Web应用）包装成一个原生的Android应用，这主要有两种实现方式：
（图片来源网络，侵删）
- 混合开发：使用WebView控件在原生App中嵌入一个网页，这是最常见、最快速的方式，也是我们今天讨论的重点。
- Progressive Web App (PWA)：将网站升级为PWA，然后通过Chrome等浏览器将其“安装”到Android桌面上，体验接近原生App，这种方式不需要开发一个完整的APK。
下面,我将详细讲解第一种方式，也就是使用 WebView 进行开发，这是最符合“网站客户端”定义的方法。
核心概念：WebView
WebView 是 Android SDK 提供的一个组件，它允许你在 App 内部显示一个网页，你可以把它想象成一个“嵌入式浏览器”，它可以加载网页、执行JavaScript，并与你的原生Android代码进行交互。
开发步骤详解
第1步：添加网络权限
你的App需要访问网络来加载网页,所以必须在 AndroidManifest.xml 中添加 INTERNET 权限。
<!-- AndroidManifest.xml -->
<manifest ...>
<!-- 必须添加的权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<application ...>
...
</application>
</manifest>
第2步：在布局文件中添加 WebView
在 activity_main.xml 或其他布局文件中，添加一个 WebView 控件。
（图片来源网络，侵删）
<!-- activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
第3步：在Activity/Fragment中初始化并加载网页
在你的 Java 或 Kotlin 代码中，获取 WebView 的引用，并加载你的网站URL。
Kotlin 示例 (推荐):
// MainActivity.kt
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val webView = findViewById<WebView>(R.id.webview)
// 1. 启用JavaScript (如果你的网站需要)
webView.settings.javaScriptEnabled = true
// 2. 设置WebViewClient，这样点击链接时不会跳转到外部浏览器
webView.webViewClient = WebViewClient()
// 3. 加载你的网站URL
webView.loadUrl("https://www.your-website.com")
}
}
Java 示例:
// MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webView = findViewById(R.id.webview);
// 1. 启用JavaScript
webView.getSettings().setJavaScriptEnabled(true);
// 2. 设置WebViewClient
webView.setWebViewClient(new WebViewClient());
// 3. 加载URL
webView.loadUrl("https://www.your-website.com");
}
}
关键点解释:
webView.settings.javaScriptEnabled = true: 大多数现代网站都依赖JavaScript，必须开启。webView.webViewClient = WebViewClient(): 这是至关重要的一步，如果不设置，当你在网页中点击一个链接时，系统会尝试调用手机默认的浏览器打开它，而不是在你的App内继续浏览。WebViewClient会将所有导航操作都限制在当前的 WebView 内。
进阶配置与功能
一个完整的App通常需要更多的配置。
处理加载进度
你可以添加一个进度条,在网页加载时显示，提升用户体验。
修改 activity_main.xml:
<RelativeLayout ...>
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:indeterminate="false"
android:max="100"
android:progress="0" />
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/progressBar" />
</RelativeLayout>
修改 MainActivity.kt:
// 在 onCreate 中添加
val progressBar = findViewById<ProgressBar>(R.id.progressBar)
webView.webViewClient = object : WebViewClient() {
override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
super.onPageStarted(view, url, favicon)
progressBar.visibility = View.VISIBLE
progressBar.progress = 0
}
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
progressBar.visibility = View.GONE
}
}
webView.webChromeClient = object : WebChromeClient() {
override fun onProgressChanged(view: WebView?, newProgress: Int) {
super.onProgressChanged(view, newProgress)
progressBar.progress = newProgress
}
}
启用安全浏览
为了安全,可以启用Android的安全浏览功能，防止用户访问恶意网站。
// 在 onCreate 中设置 webView.settings.safeBrowsingEnabled = true
处理返回键
默认情况下,按返回键会退出Activity，我们希望它能像浏览器一样返回上一个页面。
// 重写 onBackPressed 方法
override fun onBackPressed() {
if (webView.canGoBack()) {
webView.goBack()
} else {
super.onBackPressed()
}
}
JavaScript 与 Android 代码的双向通信
这是混合开发的核心优势,让网页可以调用原生功能，如获取用户位置、调用摄像头、显示原生对话框等。
从 Android 调用 JavaScript:
// 在 Activity 中定义一个方法，并用 @JavascriptInterface 注解
@JavascriptInterface
fun showToast(message: String) {
Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
}
// 在 WebView 中注入这个接口
webView.addJavascriptInterface(this, "AndroidInterface")
// 在 JavaScript 中调用
// 在网页的 JS 代码中: AndroidInterface.showToast("Hello from Android!")
从 JavaScript 调用 Android (更推荐的方式):
使用 WebView.evaluateJavascript() 方法。
// 在 Android 中
fun callFromJs() {
Toast.makeText(this, "JS called Android!", Toast.LENGTH_SHORT).show()
}
// 在网页的 JS 代码中
window.AndroidInterface = {
// 发送一个自定义事件给 WebView
const event = new CustomEvent('callFromJS', { detail: { data: 'some data' } });
document.dispatchEvent(event);
};
// 在 WebView 中监听这个事件
webView.webChromeClient = object : WebChromeClient() {
override fun onConsoleMessage(consoleMessage: ConsoleMessage?): Boolean {
// 可以在这里打印JS的console.log
Log.d("WebView", "JS Console: ${consoleMessage?.message()}")
return true
}
// 处理JS发送的自定义事件
override fun onReceivedTitle(view: WebView?, title: String?) {
super.onReceivedTitle(view, title)
// 这个方法不够用，我们需要用 JavaScriptInterface 来接收事件
}
}
// 更好的方式是创建一个专门的接口来接收JS调用
class WebAppInterface(private val context: Context) {
@JavascriptInterface
fun processMessage(json: String) {
// 解析JS发来的JSON数据
Log.d("WebView", "Received from JS: $json")
// 执行相应操作
}
}
// 在JS中调用
// AndroidInterface.processMessage(JSON.stringify({action: 'getData'}));
优缺点分析
优点
- 开发成本低、速度快：复用现有的Web代码，无需为Android平台重新开发UI和逻辑。
- 跨平台：同一套Web代码可以同时用于iOS App、小程序、PWA等。
- 热更新：更新App内容时，只需更新服务器上的网页，用户下次打开即可看到新内容，无需等待应用商店审核。
- 资源占用小：App本身很小，大部分资源（图片、JS、CSS）都在服务器上。
缺点
- 性能和体验：无法达到纯原生应用的流畅度，复杂动画、列表滚动等场景可能存在卡顿。
- 依赖网络：弱网或无网环境下，App功能会受限或无法使用（除非做了离线缓存）。
- 功能受限：无法直接调用所有Android的原生高级API（如蓝牙、NFC、部分传感器等），需要通过复杂的桥接。
- 用户体验不统一：
