01. 移动端开发概览与环境搭建

课时信息

📅 时间：8:00 - 8:45 🎯 目标：理解移动端开发流派，完成 Flutter 或微信小程序开发环境的搭建

1. 移动端：离用户最近的地方

Day 1 我们学习了 Web 开发，但用户每天 80% 的时间都在使用手机 App。 如果你想做一个 能装在口袋里 的 AI 产品，必须掌握移动端开发。

2. 技术选型：Flutter vs 小程序

我们提供两条路线，你可以根据自己的设备情况选择一条主修。

路线 A: Flutter (Google 跨平台框架)

• 优势：一套代码，同跑 Android/iOS/Web/PC。性能接近原生。
• 适合：有一定编程追求，或者有安卓手机的同学。
• 门槛：环境配置较复杂（尤其是国内网络下）。

路线 B: 微信小程序 (Mini Program)

• 优势：无需安装，即用即走，背靠微信 10 亿流量。开发体验像写网页 (HTML/CSS)。
• 适合：想快速做出成品，或者偏好前端技术栈的同学。
• 门槛：极低。

---

3. 环境搭建 (Workshop)

请根据你的选择，开始下载工具。这通常需要一些时间，所以我们先启动下载。

🍎 路线 A: Flutter 环境 (Mac/Win)

1. 下载 Flutter SDK:

   • 访问 flutter.cn (中文镜像站)。
   • 解压到合适目录 (如 C:\src\flutter 或 ~/development/flutter)。
   • 关键：配置国内镜像环境变量 (否则卡死)：

     # Mac/Linux (~/.zshrc)
     export PUB_HOSTED_URL=https://pub.flutter-io.cn
     export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
     
     # Windows (环境变量设置)
     # 新建 PUB_HOSTED_URL 值 https://pub.flutter-io.cn
     # 新建 FLUTTER_STORAGE_BASE_URL 值 https://storage.flutter-io.cn

2. 编辑器: 使用 VSCode 或 Android Studio。

   • VSCode 必装插件：Flutter, Dart。

3. 检查: 运行 flutter doctor，跟着红叉修 Bug。

🟢 路线 B: 微信开发者工具

1. 下载: 访问 微信开发者工具官网。
2. 安装: 一路下一步。
3. 注册: 去 微信公众平台 注册一个小程序账号（个人主体），获取 AppID。

---

4. AI 怎么帮我们？

移动端开发配置繁琐，代码冗长（特别是 Flutter 的嵌套地狱）。 Vibecoding 心法： 不要手写 UI 布局代码。把草图给 AI，让它生成 Flutter Widget 代码或 WXML 结构。我们只负责逻辑拼接。