夜雨聆风零基础用 AI 做一个日语学习 App（实操篇）
一、Win11 开发测试
Windows 上没有 iOS 模拟器（那是 Mac 专属的），所以我们的测试方式是：
手机装一个 Expo GoApp
电脑上跑 npx expo start
扫终端弹出的二维码，之后改代码、手机上实时刷新。
想看网页版预览，`npx expo start --web` 也行（第一次用网页预览，它可能提示你装 react-dom、react-native-web，按提示装上即可）
但一切以手机上的真实效果为准。
跑通了，能用了，就算过。
0. 前置准备
动手前先装好两样东西，否则后面命令会全部报错：
1. Node.js：去
nodejs.org
下 LTS 版，一路下一步装好。`npx`、`npm` 都跟着它来。装完在终端输 `node -v`，能打印出版本号就 OK。
2. 注册一个 Expo 账号
官网
expo.dev
后面 eas login要用它。
### 1. 建项目文件夹
打开 PowerShell 终端，依次输入：
-
cd D:\
mkdir code
cd code
-
这是在 D 盘建一个 `code` 文件夹，以后专门放你的代码项目，相当于你自己的「编程项目仓库」；`cd code` 就是进到这个文件夹里。
### 2. 建项目
```powershell
npx create-expo-app@latest my-app
```
`my-app` 可以换成你想要的英文名（这里演示就不换了）。它会下载模板、装依赖，跑个一两分钟，等它跑完。
### 3. 进项目、启动
```powershell
cd my-app
npx expo start
```
跑起来后，终端里会出现一个二维码。
### 4. 手机连上
**关键前提：手机和电脑连同一个 WiFi。**
- **iPhone**：直接用系统**相机** App 扫那个二维码（iOS 上不是在 Expo Go 里扫，而是用相机扫，扫完它会自动跳转打开 Expo Go）。
- **安卓**：打开 Expo Go，用里面的「Scan QR code」扫。
几秒后手机上就会出现一个默认的 Expo 欢迎页面。**看到这个页面 = 全链路通了，今天最关键的一关就过了。**
### 5. 如果扫完打不开 / 报「需要更新版本」
最常见的原因：**手机上 Expo Go 的版本，和你项目用的 SDK 对不上。**
先确认手机上的 Expo Go 已经更新到最新版本。如果已经是最新了还不行，那基本就是另一头的问题：`create-expo-app@latest` 刚建的项目用的 SDK（比如 55）比商店版 Expo Go 能带动的还新，Expo Go 跑不起来，才报「需要更新版本」。
**解决办法：把项目的 SDK 降一档（比如从 55 降到 54），迁就手机上的 Expo Go。** 在项目文件夹（`D:\code\my-app`）里依次跑：
**① 加一个配置，让 npm 容忍版本冲突：**
```powershell
Set-Content -Path .npmrc -Value "legacy-peer-deps=true"
```
**② 把装乱了的旧包和锁文件删掉（注意是两条命令，要分两行）：**
```powershell
Remove-Item -Recurse -Force node_modules
Remove-Item -Force package-lock.json
```
**③ 把 expo 本体降到 54（⚠️ 这一步是关键，少了它后面白做）：**
```powershell
npm install expo@^54.0.0
```
**④ 让 expo 把其它包都对齐到 54：**
```powershell
npx expo install --fix
```
**⑤ 清缓存重新启动：**
```powershell
npx expo start -c
```
跑完，用手机相机重新扫码就行。
> 小贴士：SDK 版本号会随时间变化，原理就一句话——**让项目的 SDK ≤ 你手机上 Expo Go 支持的最高版本**。哪个能跑就用哪个，别死记 54/55。
### 6. 开发服务器别关掉
截图里这个跑着 Metro 的窗口，就是**开发服务器**：
- 作用：你电脑上代码一改，它就实时打包推给手机。
- **开发全程都要让它开着，千万别 Ctrl+C 关掉**，关了手机 App 就连不上了。
- 几个常用快捷键（光标在这个窗口里按）：
- 按 `r` = 重新加载 App
- 按 `m` = 调出手机上的开发菜单
- 按 `w` = 在电脑浏览器里打开（改 UI 时用浏览器看更快）
## 二、让 AI 帮你写功能
环境通了，就可以让 AI（这里用 Claude / cc）帮我们写第一个效果了——**卡片左右滑动切换**。
> 📷 此处放截图：第一个卡片效果
这样我们就有了一个非常简单的日语背诵小 App。接着就像搭积木一样，再添下一个功能。
它帮我继续部署了其它功能，做完还会主动问我要不要继续加功能，相当智能。
> 📷 此处放截图：功能演示结果
### 遇到报错怎么办？把报错原样丢给 AI
开发途中报错很正常。比如我遇到过这个：
> Element type is invalid... got undefined, check render method of TabLayout
我就直接把它甩给 Claude：
> 我的 expo-router 项目报 "Element type is invalid... got undefined, check render method of TabLayout"，帮我检查 `app/(tabs)/_layout.tsx` 里所有 import 是否正确，特别是图标库和 Tabs 的引入方式。
它定位、改完，问题就解决了。**记住这个套路：报错别慌，整段原文复制给 AI，让它修。**
## 三、EAS 云端打包（Windows 也能出 iOS 包）
打包要给 App 签名，得用你的 Apple 开发者账号凭证，所以这一步的前提是：**你的 Apple 开发者账号（99 美元 / 年）已经批下来。**
打包前还要先设好 **bundleIdentifier**（App 的唯一身份证，形如 `com.yourname.myapp`）。打开项目里的 `app.json`，在 `ios` 下面填上它：
```json
{
"expo": {
"ios": {
"bundleIdentifier": "com.yourname.myapp"
}
}
}
```
然后：
1. 装 CLI：`npm install -g eas-cli`，再 `eas login`（用你的 **Expo 账号**登录）。
2. 运行 `eas build:configure` —— 它会生成 `eas.json` 配置文件。
3. 打 iOS 生产包：`eas build --platform ios --profile production`
- 中途会问你 Apple 账号、要不要让 EAS 帮你管签名证书——**全部选 Yes，让它自动管**，这是 Windows 用户最省心的方式，别自己手搓证书。
- 然后云端开始编译，你等着就行，最后会出一个 `.ipa` 包。
## 四、提交并上架
1. 去 **App Store Connect**（appstoreconnect.apple.com）建一个 App 记录，填上跟你 `bundleIdentifier` 对应的信息。
2. 提交构建：`eas submit --platform ios`，它会一步步引导你把包传上去。包上传后会进 App Store Connect 处理，通常 10–15 分钟后出现在 **TestFlight**（自己人内测）。
3. **关键：传上去 ≠ 上架。** 要正式上架 App Store，你必须在 App Store Connect 里**手动**把这个构建提交到 **App Review（审核）**。
4. 提审前还得在 App Store Connect 里补齐：App 描述、各尺寸截图（用模拟器或手机截都行）、隐私政策链接、分级信息——**这些少一个都提不了审。**
提审后就是等苹果审核，过了才真正出现在商店里。
---
以上就是我们今天从零做一个 App 的全流程了。如果喜欢，不妨关注本公众号【你想见的一面镜子】，未来持续输出有价值的文章。感谢观看，下次见～