返回博客
Tutorial
在 Android 上进行完整的 Web 开发：HTML、CSS 和 JavaScript
用手机创建专业网站。借助 Pocket Code 实现实时预览、集成 DevTools 和直接部署。
3 min
作者 Pocket Code Team在 Android 上进行完整的 Web 开发
Pocket Code 将你的 Android 设备变成一个完整的 Web 开发环境。无需 PC，即可创建、预览和部署网站。
初始设置
本地开发服务器
Pocket Code 内置了一个会自动启动的本地 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
Pocket Code 包含类似 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：非常适合在小屏幕上开发
- 小型组件：简短且模块化的文件
- 自动保存：启用自动保存以实现持续热重载
借助 Pocket Code，你可以用 Android 创建完整的网站。从落地页到复杂的 Web 应用，一切尽在掌心即可实现。