第4章 载体选择：网站、小程序还是App？
载体选择不是技术题，而是战略题。选对了，事半功倍；选错了，事倍功半。
4.1 故事开场：小李的困惑------"我的应用该长什么样？"
小李坐在咖啡馆里，面前摊开着密密麻麻的笔记。过去一周，他选定了CodeBuddy作为AI编程搭档，也搞懂了应用的前端、后端、数据库是怎么回事。
"我准备好了！"他对自己说。
但当他真正准备动手时，一个问题浮现脑海："我的应用，到底该长成什么样子？"
是做网站？用户打开浏览器就能用，但好像不够"正式"。
是做小程序？听说获客容易，但会不会功能太受限？
还是做App？看起来很专业，但开发成本会不会很高？
他想起平时用的各种应用：记账用App，点外卖用小程序或App，查资料打开浏览器就行。
"它们看起来都是应用，但给人的感觉完全不同。"小李喃喃自语，"我该怎么选？"
如果你也有类似的困惑，这一章就是为你准备的。
选择载体是每一个应用创造者必经的十字路口，会影响开发成本、用户获取、功能边界和商业模式。
好消息是，三种载体没有绝对优劣，只有适合与否。就像开餐厅，你可以选择路边摊、商场档口或独立门面------关键是找到最适合你的那一种。
4.2 三大载体的"性格画像"
🏪 网站：像一家"便利店"
特征：开门迎客、无需邀请、随时可进
想象一下你家楼下的24小时便利店：不需要预约，推门就进；不需要办卡，现金扫码都能买；东西不多但够用。
网站就是这个样子：
- 无需安装：打开浏览器，输入网址就能访问
- 跨平台：手机、平板、电脑，只要有浏览器就能用
- 即时更新：改了代码，用户刷新页面就能看到最新版
适合场景：内容展示（博客、官网）、工具类应用（计算器、转换器）、轻量级服务（预约、报名）
典型案例：百度、b站网页版、Google网页版
🏬 小程序：像"商场里的专柜"
特征：借势人流、轻量快捷、用完即走
想象购物中心里的品牌专柜：不用专门找，逛商场时顺路就看到了；不需要办会员卡，进店就能逛；看中了就买，不合适就走。
小程序就是这个样子：
- 依托超级App：住在微信、支付宝里，借势它们的流量
- 无需安装：扫码或搜索就能打开
- 即用即走：用完后留在最近使用列表，不占用手机桌面
适合场景：低频但刚需的服务（快递查询、停车缴费）、社交传播（拼团、分享）、线下场景延伸（餐厅点单、会员服务）
典型案例：美团外卖小程序、健康码、餐厅点单小程序
🏛️ App：像一家"专属会所"
特征：独立门面、功能完备、深度服务
想象一家高端私人会所：有自己的独立门面，品牌辨识度高；会员制管理，服务更贴心；设施齐全，能满足各种深度需求。
App就是这个样子：
- 独立存在：有自己的图标，躺在手机桌面上
- 功能强大：可以调用手机的各种硬件（相机、GPS、蓝牙、通讯录）
- 用户粘性高：推送通知能主动触达用户，留存率更高
适合场景：高频使用的工具（社交、办公、健身）、需要深度系统能力的应用（美颜相机、导航、运动记录）、品牌化运营的产品
典型案例：微信、Keep、美颜相机
一句话总结
| 载体 | 核心比喻 | 关键特征 | 用户心理 |
|---|---|---|---|
| 网站 | 便利店 | 无需安装、即开即用 | "顺手用一下" |
| 小程序 | 商场专柜 | 借势流量、轻量快捷 | "顺便用一下" |
| App | 专属会所 | 独立品牌、深度服务 | "专门来用" |
4.3 六维对比：一张表格看清差异
4.3.1 六维对比总表
| 维度 | 网站 | 小程序 | App |
|---|---|---|---|
| 开发成本 | ⭐⭐⭐ 低 | ⭐⭐ 中 | ⭐ 高 |
| 用户获取成本 | ⭐⭐⭐ 低 | ⭐⭐ 中 | ⭐ 高 |
| 功能能力边界 | ⭐⭐ 受限 | ⭐⭐ 受限 | ⭐⭐⭐ 几乎无限制 |
| 用户留存能力 | ⭐ 弱 | ⭐⭐ 中 | ⭐⭐⭐ 强 |
| 更新迭代速度 | ⭐⭐⭐ 即时 | ⭐⭐ 需审核 | ⭐ 需审核 |
| 商业化能力 | ⭐⭐ 中 | ⭐⭐ 受限 | ⭐⭐⭐ 强 |
4.3.2 各维度详细解析
维度一：开发成本
- 网站：一套代码多端运行，技术栈成熟，AI生成代码质量高
- 小程序：需学习平台特定规范，但平台提供部分能力封装
- App：iOS和Android需分别开发，需适配各种屏幕尺寸
维度二：用户获取成本
- 网站：SEO带来自然流量，链接可随处分享，访问门槛最低
- 小程序：依托微信生态，可社交裂变，但用户需是微信用户
- App：需去应用商店搜索下载，获客成本是网站的5-10倍
数据参考：网站转化率30-50%，小程序20-30%，App仅5-10%。
维度三：功能能力边界
| 功能需求 | 网站 | 小程序 | App |
|---|---|---|---|
| 推送通知 | ❌ 有限制 | ⚠️ 有限制 | ✅ 完全支持 |
| 相机/相册 | ⚠️ 有限制 | ✅ 支持 | ✅ 完全支持 |
| GPS定位 | ⚠️ 需授权 | ✅ 支持 | ✅ 完全支持 |
| 蓝牙连接 | ❌ 不支持 | ⚠️ 有限制 | ✅ 完全支持 |
| 后台运行 | ❌ 不支持 | ❌ 不支持 | ✅ 完全支持 |
| 离线使用 | ⚠️ PWA支持 | ⚠️ 有限制 | ✅ 完全支持 |
维度四：用户留存能力
- 网站：用户关闭浏览器后就"消失"，没有推送能力，次日留存率通常低于10%
- 小程序：可发送服务通知，留在"最近使用"列表，次日留存率约15-25%
- App：推送通知可主动提醒，图标在手机桌面是最强品牌曝光，次日留存率30-50%
💡 补充：手机端网站的替代方案
如果你的目标用户主要在手机上使用，但不想做App或小程序，可以考虑微信公众号。
手机端网站依赖浏览器打开，用户容易遗忘；而微信公众号可以通过文章推送、菜单入口等方式持续触达用户，留存率介于网站和小程序之间。
适用场景：内容型产品、需要持续运营用户的场景
维度五：更新迭代速度
- 网站：代码部署后立即生效，每天可部署多次
- 小程序：需平台审核（通常1-3天），每周1-2次更新较合理
- App：应用商店审核周期长，用户需手动更新，每月1-2次版本更新是常态
维度六：商业化能力
- 网站：广告变现、会员订阅，但用户付费意愿相对较低
- 小程序：微信支付集成方便，适合交易类场景，但平台收取手续费
- App：内购（IAP）高效，订阅制变现能力强，用户生命周期价值（LTV）是网站的3-5倍
4.4 决策框架：如何选择最适合的载体
4.4.1 第一步：明确目标用户画像
用户使用场景是什么？
- 办公室电脑前？→ 优先考虑网站
- 通勤路上、碎片化时间？→ 优先考虑小程序或App
用户使用频率如何？
- 日活（每天使用）→ App值得投入
- 周活（每周使用）→ 小程序或App
- 月活或一次性使用 → 网站或小程序
用户获取渠道在哪里？
- 主要靠搜索流量 → 网站
- 主要靠社交分享 → 小程序
- 主要靠应用商店 → App
4.4.2 第二步：评估功能需求边界
**是否需要系统级能力？**参考上文的六维对比表格。
是否需要离线使用？
- 需要 → App几乎是唯一选择
- 不需要 → 三种载体都可以考虑
计算复杂度如何？
- 简单展示、轻交互 → 网站
- 复杂算法、大量本地计算 → App
4.4.3 第三步：考虑资源约束
预算范围
- 预算 < 5000元 → 优先网站或小程序
- 预算 > 20000元 → 可以考虑App
时间要求
- 1周内上线 → 网站
- 2周内上线 → 网站或小程序
- 1-2个月 → 三种都可以
技术团队能力
- 纯新手，完全依赖AI → 网站最容易上手
- 有专业团队 → 根据业务需求决定
💡 给新手的建议
如果你是纯新手，强烈建议从网站开始。
网站开发是最快、门槛最低的方式：
- 无需学习平台特定规范（如小程序的WXML、App的原生开发）
- 技术栈最简单（HTML/CSS/JavaScript），AI生成代码质量高
- 部署最方便，有很多免费托管方案
本书后续章节都将以开发网站为例，手把手带你完成第一个应用。等你掌握了基础，再扩展到小程序或App会容易得多。
4.4.4 第四步：验证商业模式
| 商业模式 | 网站 | 小程序 | App |
|---|---|---|---|
| 广告变现 | ✅ | ✅ | ✅ |
| 付费下载 | ❌ | ❌ | ✅ |
| 内购/订阅 | ⚠️ | ⚠️ | ✅ |
| 交易抽成 | ✅ | ✅ | ✅ |
客单价预期
- 低客单价（< 50元）→ 三种都可以
- 高客单价（> 500元）→ App信任度更高
4.4.5 场景案例：四个典型决策演示
案例一：餐厅点单系统
背景：一家中餐厅希望顾客能自助点单
决策分析：到店顾客、使用频率低、功能简单、预算有限
决策结果 ：✅ 小程序
理由：顾客到店扫码即用，微信支付集成方便，开发成本低，一周可上线。
案例二：个人博客网站
背景：设计师希望展示作品集
决策分析：潜在雇主通过搜索引擎访问、功能简单、个人项目、预算有限
决策结果 ：✅ 网站
理由：SEO友好，链接可随处分享，部署成本最低。
案例三：运动健身记录
背景：帮助用户记录跑步、健身数据的应用
决策分析：健身爱好者日活使用、需要GPS和后台运行、订阅制会员
决策结果 ：✅ App
理由：需要GPS和后台运行能力，日活应用需要推送提醒，订阅制在App上体验更好。
案例四：在线工具箱
背景：实用小工具（JSON格式化、Base64编解码等）
决策分析：程序员工作时使用、纯文本处理、业余时间维护
决策结果 ：✅ 网站
理由：纯前端工具就能实现，SEO带来自然流量，部署和维护成本最低。
4.5 渐进式策略：从小程序到App的进化路径
聪明的创造者不会一上来就做App，而是采用渐进式策略：从低成本方案起步，用数据验证需求，再逐步升级。
4.5.1 三阶段进化路径
第一阶段：MVP验证（网站/小程序）
目标：用最低成本验证用户需求
选择：功能简单选网站，需要社交传播选小程序
投入：时间1-2周，成本几百到几千元
关键指标：有多少人来用？用得频繁吗？愿意付费吗？
第二阶段：产品升级（根据数据决策）
如果数据好（用户增长快、留存高、有付费意愿）：投入开发App或升级到小程序。
如果数据一般：分析原因调整方向，或及时止损换新想法。
第三阶段：多载体并存（差异化运营）
| 载体 | 定位 | 功能侧重 |
|---|---|---|
| 网站 | 获客入口 | 基础功能展示、SEO内容 |
| 小程序 | 转化工具 | 即用即走的服务、社交裂变 |
| App | 核心产品 | 完整功能、会员服务、深度体验 |
案例：美团
- 网站：提供基础信息展示
- 小程序：快速点外卖、查订单
- App：完整功能（外卖、酒店、电影票、打车）
4.5.2 案例：小红书的载体演进
阶段一：PDF文档（2013年）
- 创始人整理海外购物攻略，在朋友圈分享
- 验证了什么：用户对海外购物信息有强烈需求
阶段二：网站（2013年底）
- 把内容做成网站，方便更多人访问
- 验证了什么：内容模式可行，用户愿意主动访问
阶段三：App（2014年）
- 推出iOS App，增加UGC功能
- 爆发点：移动端内容消费的习惯养成
阶段四：多平台矩阵（现在）
- App：核心产品，完整功能
- 小程序：便于分享传播
- 网站：品牌展示和SEO
启示：不要一上来就做App，用低成本方案先验证需求，数据好了再加大投入。
4.6 跨平台开发的现实与迷思
4.6.1 跨平台的诱惑与代价
主流跨平台方案：
| 方案 | 代表框架 | 适用场景 |
|---|---|---|
| 跨端渲染 | React Native、Flutter | App开发 |
| Web封装 | Cordova、Ionic | 简单App |
| 小程序跨端 | uni-app、Taro | 小程序开发 |
| AI生成多版本 | AI工具 | 所有场景 |
跨平台的优势：开发效率高、成本降低、迭代快速
跨平台的代价：
- 性能损失：通常比原生慢10-30%
- 体验妥协：难以完全遵循各平台设计规范
- 调试复杂：出问题更难定位
典型案例：Facebook早期用HTML5开发移动应用，体验糟糕，后来转向原生；Airbnb曾大规模使用React Native，后来也回归原生。
4.6.2 适合与不适合的场景
适合跨平台的场景：
- ✅ 内容展示类应用（新闻、博客）
- ✅ 工具类应用（计算器、查询工具）
- ✅ MVP阶段快速验证
不适合跨平台的场景：
- ❌ 游戏（对性能要求极高）
- ❌ 需要深度系统集成的应用（视频编辑、AR）
- ❌ 高频使用的核心产品
4.6.3 AI时代的跨平台策略
传统思维：学React Native，一套代码生成双端App，妥协性能换取效率。
AI时代的新思维：让AI分别生成iOS和Android的原生代码，获得原生性能，保持开发效率。
| 阶段 | 策略 | 理由 |
|---|---|---|
| MVP验证 | 用AI生成网站或小程序 | 最快验证需求 |
| 初期迭代 | 如需App，优先单平台 | 降低复杂度，专注体验 |
| 成熟期 | 用AI分别生成另一平台原生代码 | 双端原生体验最佳 |
关键认知：AI降低了"写多套代码"的成本，原生体验的差距可能比跨平台的"性能损失"更难弥补。
4.7 动手实践：快速体验三种载体
实践一：体验PWA（类App的网站）
- 用手机浏览器打开 https://mobile.twitter.com
- 在浏览器菜单中选择"添加到主屏幕"
- 回到手机桌面，点击刚添加的图标
- 观察：它像App一样全屏打开，没有浏览器地址栏
思考：这种形态适合什么场景？
实践二：体验微信小程序
- 打开微信，点击右上角搜索图标
- 搜索"美团外卖"或"滴滴出行"
- 点击进入小程序，体验功能
- 用完后点击右上角关闭
思考：和App版有什么差别？什么情况下用小程序，什么情况下用App？
实践三：对比同一产品的不同载体
选择你常用的产品（如美团、京东、知乎），分别在三种载体上体验：
| 对比项 | 网站版 | 小程序版 | App版 |
|---|---|---|---|
| 打开方式 | 输入网址 | 扫码/搜索 | 点击图标 |
| 加载速度 | |||
| 功能完整性 | |||
| 我的使用频率 |
思考：为什么这个产品要同时做三种载体？
实践四：分析你的应用需求
关于用户：目标用户是谁？在什么场景使用？使用频率如何？
关于功能：列出3个核心功能，需要什么系统能力？需要离线使用吗？
关于资源：预算范围？希望多久上线？有没有技术基础？
初步决策：基于以上分析，你会选择哪种载体起步？
4.8 本章小结
三大载体的性格画像
| 载体 | 比喻 | 核心特征 | 适合场景 |
|---|---|---|---|
| 网站 | 便利店 | 无需安装、即开即用 | 内容展示、工具类 |
| 小程序 | 商场专柜 | 借势流量、轻量快捷 | 低频刚需、社交传播 |
| App | 专属会所 | 独立品牌、深度服务 | 高频使用、深度集成 |
六维对比的关键洞察
- 开发成本：网站 < 小程序 < App
- 获客成本：网站 < 小程序 < App
- 功能边界：App > 小程序 > 网站
- 留存能力：App > 小程序 > 网站
- 迭代速度：网站 > 小程序 > App
- 商业化能力：App > 小程序 ≈ 网站
四步决策框架
- 明确目标用户：使用场景、频率、获取渠道
- 评估功能需求：系统能力、离线使用、计算复杂度
- 考虑资源约束：预算、时间、技术能力
- 验证商业模式：盈利方式、客单价、用户LTV
渐进式策略
不要一上来就做App：
- 第一阶段：网站或小程序快速验证MVP
- 第二阶段：根据数据决定是否升级
- 第三阶段：多载体并存，差异化运营
跨平台的现实
- 跨平台能提升效率，但有性能和体验的代价
- AI时代，可以分别生成各端原生代码
- 优先保证核心平台的原生体验
核心认知
三种载体没有绝对优劣，只有适合与否。 从低成本方案起步，用数据驱动决策，逐步迭代升级------这是AI时代创造者的智慧。
4.9 思考题
思考题1：载体选择分析
基于你的应用想法：
- 目标用户是谁？在什么场景使用？使用频率如何？
- 列出3个核心功能，对系统能力有什么要求？
- 如果只能先选择一个载体，你会选哪个？为什么？
思考题2：渐进式规划
假设你选择从网站起步：
- 什么数据指标达到后，考虑开发小程序或App？
- 不同载体的版本，功能上会有什么差异？
- 用户如何从网站"迁移"到App？
思考题3：跨平台决策
如果你决定做App：
- 选择跨平台方案还是分别用AI生成原生代码？
- 主要基于什么考虑（性能、开发效率、维护成本）？
下一步预告
第5章《VibeCoding：意图驱动的自然语言开发》将带你进入AI编程的核心方法论------如何用自然语言与AI协作，把你的想法变成可运行的应用。
记住：载体选择是战略决策，但不管选择哪种载体，AI都能帮你实现。关键是先选一种，开始行动。
立即行动：
- 完成本章的三个动手实践
- 用四步决策框架分析你的应用
- 确定第一阶段的载体选择
选好了载体，下一章我们就开始用VibeCoding把它做出来！