PhoneGap HTML5 开发——前端技能直接变 App

谁适合 PhoneGap

如果你是以下情况，直接选 PhoneGap：

• 前端开发者 — 已经会 HTML + CSS + JavaScript，不想从零学 Java
• 网页想变 App — 已有 H5 页面，想用 App 形式包装分发
• 跨平台需求 — 同一套代码要同时出 Android + iOS 版本
• 快速原型 — 用熟悉的前端技术栈快速验证想法

PhoneGap 与 AIDE 的关系

PhoneGap（现在叫 Apache Cordova）是一个开源框架：

• 它把你的 HTML 页面装进一个 WebView 容器里
• 提供 JavaScript API 来访问手机原生功能（相机、GPS、通讯录等）
• 最终编译产物仍然是 APK
• AIDE PhoneGap Edition（$9.99）内置了完整的 PhoneGap 构建环境

创建 PhoneGap 项目

在 AIDE PhoneGap Edition 中：

1. 新建项目 → 选 PhoneGap App / Plain Sample
2. 填写 App 名称和包名（与 Android App 相同）
3. AIDE 生成的核心文件：

• assets/www/index.html — 页面结构
• assets/www/index.css — 样式
• assets/www/index.js — 逻辑

即时设计预览（最大优势）

PhoneGap 项目的编辑体验比 Java 项目更流畅：

1. 写完 HTML 或 CSS
2. 切回 index.html 文件
3. 点 Action Bar 的 Design 按钮
4. 瞬间看到页面渲染效果（不需要编译）

CSS/JavaScript 编辑能力

AIDE 的代码编辑器对 PhoneGap 项目的支持：

PhoneGap API 访问原生功能

PhoneGap 的 JavaScript API 可以调用 Android 原生能力：

// 设备信息
console.log(device.platform); // "Android"

// 打开相机
navigator.camera.getPicture(onSuccess, onFail, options);

// 获取 GPS 位置
navigator.geolocation.getCurrentPosition(success, error);

PhoneGap 的局限

• 性能 — WebView 渲染比原生 UI 慢（复杂动画、大量列表滚动会卡顿）
• 原生体验 — 无法完全模拟原生 UI 控件的动画和交互细节
• 体积 — 包含完整 WebView 运行时，APK 比原生应用大
• 依赖更新 — Cordova 版本迭代，需要关注兼容性

对比原生开发