企业官网建设流程全解析

1. React 项目转安卓 APP 时，AI 能力接入到底卡在哪

你手上已经有一个能跑的 React 项目，用npm run build出静态资源，再用 Capacitor 套一层安卓壳，Android Studio 里点 Run 就能装到真机上。这条链路本身不复杂，真正让人卡住的是后面一步：怎么让这个安卓 APP 里的 AI 能力稳定可用。

常见做法是前端直接写死某个模型的 API Key，或者每个功能模块各配一套 Key。项目小的时候看不出问题，一旦要加对话、要加代码补全、要加 Agent 调用，Key 就散落在src各个角落。安卓包一旦发出去，Key 就等于公开了；换模型要重新打包；额度用超了不知道是哪个模块烧的。这些坑我在把 React 项目转安卓 APP 的过程中都踩过。

这篇聚焦的场景很具体：你已经有 React 前端，准备用 Capacitor 打包成安卓 APP，想用 TaoToken 的统一 Key 和 API 通道把 AI 能力接进去。TaoToken 在这里扮演的角色是「一个 Key 走通多个模型」的入口，前端只需要认一个 base URL 和一个 Key，模型切换、额度查看都在控制台完成，不用改安卓工程。

适合谁看：会 React、会用 npm、能打开 Android Studio 出包，但对「安卓壳里怎么安全接 AI」还没理清的开发者。下面给的是可以直接复制的capacitor.config、settings.json骨架和 npm 脚本，最后附 Android Studio 的验证动作和报错排查清单。

2. 接入前把 TaoToken 的 Key 和通道准备好

在动 Capacitor 工程之前，先把「通道」这件事定下来。TaoToken 的官网入口是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api （这个不加 UTM，直接作为请求 base URL 用）。

你需要做两件事：

第一，在控制台创建一个 API Key。入口在 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，Key 管理页在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。创建后先复制出来，后面写进环境变量，不要直接硬编码进 React 源码。

第二，确认你要调用的模型名。如果你只是先验证通道通不通，用模型对话页面最快： https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=models&utm_campaign=rewrite 。如果你是要长期做编码类、Agent 类功能，建议看 Coding Plan： https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ，它更适合持续调用的场景。

接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，请求格式和 OpenAI 兼容风格一致，所以 React 侧用fetch或axios都能直接发。

注意：Key 属于敏感信息。安卓包反编译成本很低，任何写进前端 bundle 的 Key 都视为已泄露。正确做法是前端只调你自己的后端，或者用 Capacitor 的原生层做一次转发。本文为了讲清 Capacitor 配置链路，会先演示前端直连的写法用于本地验证，生产环境请务必加一层服务端。

3. Capacitor 工程配置与可复制骨架

3.1 安装依赖与初始化

进入你的 React 项目根目录，执行：

npm install @capacitor/core @capacitor/cli npm install @capacitor/android npx cap init cursorDemoApp com.example.cursordemoapp

cursorDemoApp是 APP 名称，com.example.cursordemoapp是包名，用反向域名格式。初始化后会生成capacitor.config.ts（或.json），这是 Capacitor 的核心配置文件。

3.2 capacitor.config 骨架

把capacitor.config.ts改成下面这样。重点看server和android两段：

import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { appId: 'com.example.cursordemoapp', appName: 'cursorDemoApp', webDir: 'build', bundledWebRuntime: false, server: { androidScheme: 'https', cleartext: true }, android: { allowMixedContent: true, captureInput: true, webContentsDebuggingEnabled: true } }; export default config;

几个参数说明：

webDir必须指向 React 的构建产物目录。CRA 默认是build，Vite 默认是dist，写错会导致npx cap sync同步不到资源。

androidScheme: 'https'让 WebView 内部以 https 加载本地资源，避免部分浏览器 API 被限制。

cleartext: true和allowMixedContent: true在本地联调阶段有用，因为你的 AI 请求可能走 http 调试。上线前建议关掉 cleartext。

webContentsDebuggingEnabled: true让你能在 Chrome 的chrome://inspect里调试安卓 WebView，排查 AI 请求失败时非常关键。

3.3 settings.json 与 Key 注入骨架

Capacitor 安卓工程里有一个android/app/src/main/assets/capacitor.config.json，但更推荐把运行时配置放在环境变量里，构建时注入。在项目根目录建.env：

VITE_TAOTOKEN_BASE_URL=https://taotoken.net/api VITE_TAOTOKEN_API_KEY=sk-你的Key VITE_TAOTOKEN_MODEL=你的模型名

如果你用的是 CRA，把VITE_换成REACT_APP_。然后在 React 里这样读：

const BASE_URL = import.meta.env.VITE_TAOTOKEN_BASE_URL; const API_KEY = import.meta.env.VITE_TAOTOKEN_API_KEY; const MODEL = import.meta.env.VITE_TAOTOKEN_MODEL; export async function chatOnce(prompt) { const res = await fetch(`${BASE_URL}/v1/chat/completions`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_KEY}` }, body: JSON.stringify({ model: MODEL, messages: [{ role: 'user', content: prompt }] }) }); if (!res.ok) { throw new Error(`请求失败: ${res.status} ${await res.text()}`); } const data = await res.json(); return data.choices?.[0]?.message?.content ?? ''; }

这段就是最小可用的 AI 调用。注意BASE_URL后面拼的是/v1/chat/completions，和 OpenAI 兼容格式一致。

3.4 npm 脚本

在package.json的scripts里加几条，把「构建 → 同步 → 打开安卓工程」串起来：

{ "scripts": { "build:web": "npm run build", "sync:android": "npx cap sync android", "open:android": "npx cap open android", "android:release": "npm run build:web && npm run sync:android && npm run open:android" } }

以后每次改完 React 代码，跑npm run android:release一条命令就能把前端资源同步进安卓工程并打开 Android Studio。

4. 验证请求与 Android Studio 实操

4.1 先同步再打开

npm run build:web npm run sync:android npm run open:android

npx cap sync android会把build/里的静态资源复制到android/app/src/main/assets/public/。如果这一步报「webDir not found」，说明capacitor.config.ts里的webDir和实际构建目录对不上。

4.2 Android Studio 里的验证动作

打开 Android Studio 后，先等 Gradle 同步完成。然后：

第一步，连真机。手机开启开发者模式、USB 调试、USB 安装，用数据线连电脑，手机上选「允许传输文件」。

第二步，装 USB 驱动。在 Android Studio 的 SDK Manager 里勾选 Google USB driver 并应用，记住安装路径，比如E:\Android\SDK\extras\google\usb_driver。设备管理器里找到手机，右键更新驱动，手动指向这个路径。

第三步，在 Android Studio 顶部设备下拉框里选中你的手机，点 Run。首次编译会久一点，装好后 APP 自动启动。

第四步，验证 AI 请求。在 APP 里触发一次对话，同时打开 Chrome，访问chrome://inspect，找到你的 WebView，点 inspect。在 Network 面板里看那条发往https://taotoken.net/api/v1/chat/completions的请求：

• 状态码 200，Response 里有choices字段，说明通道通了。
• 状态码 401，Key 错了或没带上。
• 状态码 404，base URL 或路径拼错了。
• 请求一直 pending，多半是网络或 cleartext 配置问题。

4.3 成功结果长什么样

一次成功的返回大致是这样：

{ "id": "chatcmpl-xxx", "object": "chat.completion", "choices": [ { "index": 0, "message": { "role": "assistant", "content": "你好，我是接入成功的 AI 回复。" }, "finish_reason": "stop" } ] }

APP 界面上能看到这段 content 渲染出来，就说明 React → Capacitor → 安卓 WebView → TaoToken 通道整条链路打通了。

5. 本篇常见报错排查清单

报错一：Unable to find webDir: build

原因：React 构建产物目录名不对。CRA 是build，Vite 是dist。改capacitor.config.ts里的webDir，或者确认npm run build真的生成了目录。

报错二：npx cap sync后 APP 里还是旧页面

原因：忘了先npm run build。cap sync只复制已有产物，不会帮你构建。用第 3.4 节的android:release脚本可以避免。

报错三：请求 401 Unauthorized

原因：Key 没注入或注入为空。检查.env是否被正确读取，CRA 需要REACT_APP_前缀，Vite 需要VITE_前缀。改完.env要重新npm run build，环境变量是构建时注入的。

报错四：请求被 CORS 拦截

原因：安卓 WebView 的 origin 是https://localhost或capacitor://localhost。如果你在浏览器里调试正常、装到手机上失败，多半是这个。解决方式是在 Capacitor 配置里确认androidScheme，或者走自己的后端转发。

报错五：cleartext HTTP traffic not permitted

原因：Android 9 以上默认禁止明文 http。如果你调试时用了 http 地址，需要在AndroidManifest.xml里加android:usesCleartextTraffic="true"，或者干脆全程用 https。

报错六：真机连不上，Android Studio 设备列表为空

原因：USB 驱动没装好，或者手机没授权。重新走一遍第 4.2 节的驱动安装，手机上确认「允许 USB 调试」。

报错七：Gradle 同步卡住

原因：首次同步要下载依赖，网络慢会卡。耐心等，或者检查 Android Studio 的代理设置是否影响了 Gradle。

6. 后续怎么把这套配置用顺

把 AI 能力接进 Capacitor 安卓 APP，核心就三件事：Key 走环境变量、base URL 统一指向 TaoToken、构建同步用脚本串起来。跑通一次之后，后面加功能就是改 React 代码的事，安卓工程基本不用再动。

如果你接下来要长期做编码类或 Agent 类功能，建议把 Key 和额度管理放到 Coding Plan 里统一看： https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 。如果只是想先验证某个模型在安卓 WebView 里的表现，用模型对话页面直接试最快： https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=models&utm_campaign=rewrite 。接入细节和参数说明都在文档里： https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite 。

最后提醒一句：本文演示的前端直连只适合本地验证。真要发版，务必在中间加一层你自己的服务端，让 Key 留在服务端，安卓包里只放一个指向你后端的地址。这一步做了，后面换模型、限额度、加日志都会轻松很多。