在 Android 上进行完整的 Web 开发：HTML、CSS 和 JavaScript

用手机创建专业网站。借助 PocketCode 实现实时预览、集成 DevTools 和直接部署。

在 Android 上进行完整的 Web 开发

PocketCode 将你的 Android 设备变成一个完整的 Web 开发环境。无需 PC，即可创建、预览和部署网站。

初始设置

本地开发服务器

PocketCode 内置了一个会自动启动的本地 HTTP 服务器：

# Starts when opening a web project
# Accessible at http://localhost:3000
pocket-server start --port 3000 --hot-reload

创建 Web 项目

点击 New Project
选择 Web App 模板
选择框架（Vanilla、React、Vue 等）
项目将以完整的结构生成

实时预览

分屏视图

在编辑器和预览之间分割屏幕：

垂直：编辑器在上，预览在下
水平：编辑器在左，预览在右（平板）
浮动：预览作为可调整大小的浮动窗口

热重载

更改会自动反映在预览中：

<!DOCTYPE html>
<html>
	<head>
		<title>My App</title>
		<style>
			.hero {
				display: flex;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				background: linear-gradient(135deg, #1a1a2e, #16213e);
				color: white;
			}

			.title {
				font-size: clamp(2rem, 5vw, 4rem);
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="hero">
			<h1 class="title">Hello World!</h1>
		</div>
	</body>
</html>

开发者工具

集成的 DevTools

PocketCode 包含类似 Chrome DevTools 的开发者工具：

Elements：检查并编辑 DOM
Console：执行 JavaScript 并查看日志
Network：监控 HTTP 请求
Responsive：在不同尺寸下测试

响应式测试

在不同设备上预览你的网站：

设备	宽度	高度
iPhone SE	375px	667px
iPhone 14	390px	844px
iPad	768px	1024px
Desktop	1920px	1080px

支持的框架

React

import { useState } from "react";

function Counter() {
	const [count, setCount] = useState(0);

	return (
		<div className="p-4">
			<p className="text-2xl">{count}</p>
			<button
				onClick={() => setCount(count + 1)}
				className="px-4 py-2 bg-blue-500 rounded"
			>
				Increment
			</button>
		</div>
	);
}

Vue

<template>
	<div class="p-4">
		<p class="text-2xl">{{ count }}</p>
		<button @click="count++" class="px-4 py-2 bg-green-500 rounded">
			Increment
		</button>
	</div>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

Vanilla + Tailwind

<div class="min-h-screen bg-gray-900 flex items-center justify-center">
	<div class="bg-gray-800 rounded-xl p-8 shadow-2xl max-w-md w-full">
		<h2 class="text-2xl font-bold text-white mb-4">Login</h2>
		<input
			type="email"
			placeholder="Email"
			class="w-full p-3 rounded-lg bg-gray-700 text-white mb-4"
		/>
		<input
			type="password"
			placeholder="Password"
			class="w-full p-3 rounded-lg bg-gray-700 text-white mb-6"
		/>
		<button class="w-full p-3 bg-blue-600 rounded-lg text-white font-semibold">
			Sign In
		</button>
	</div>
</div>

直接部署

Vercel

# Install CLI
npm install -g vercel

# Deploy
vercel --prod

Netlify

# Install CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

GitHub Pages

# Configure in package.json
{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}

# Deploy
npm run deploy

移动端 Web 开发技巧

使用相对单位：rem、em、%、vw/vh
移动优先：先为移动端设计
Tailwind CSS：非常适合在小屏幕上开发
小型组件：简短且模块化的文件
自动保存：启用自动保存以实现持续热重载

借助 PocketCode，你可以用 Android 创建完整的网站。从落地页到复杂的 Web 应用，一切尽在掌心即可实现。