小程序与 App

网站、小程序还是 App？

很多人做了第一个 Web 产品之后，就开始琢磨：要不要做个 App？要不要上微信小程序？

先别急，想清楚一个核心问题：你的用户在哪里？

如果你做的是海外市场，用户主要用浏览器访问，那 Web 就够了。把网站做好、做好 SEO、做好 PWA（渐进式 Web 应用），体验已经很接近原生 App 了。90% 的情况下，Web 是性价比最高的选择。

如果你面向国内市场，那微信小程序确实值得考虑。因为国内用户的使用习惯和海外很不一样——大家更习惯在微信生态里完成各种操作，扫码打开小程序比输入网址方便得多。

什么时候选哪种？快速决策表

你的情况	推荐方案	理由
海外用户、工具类产品	Web（PWA）	零安装门槛、SEO 友好、迭代最快
国内用户、轻量服务	微信小程序	用户习惯、微信支付、分享裂变
需要复杂交互/高频使用	App	推送通知、离线体验、硬件调用
快速验证想法	Web	开发成本最低、发布最快
预算有限、想多端覆盖	跨平台框架	一套代码多个平台
国内 + 海外都要	先 Web，再按需扩展	别贪多，专注做好一个

核心原则： 先把 Web 做好、做透。等你有了稳定的用户群和收入，再根据用户需求决定要不要做小程序或 App。别一开始就想"全平台覆盖"，那只会让你什么都做不好。

Web 的优势：为什么大多数时候它就够了

在讨论小程序和 App 之前，先认真想想 Web 能做到什么：

能力	Web 支持？	说明
跨平台	✅	一个 URL，所有设备都能访问
推送通知	✅（PWA）	Service Worker 支持 Push API
离线使用	✅（PWA）	Service Worker 缓存策略
添加到主屏幕	✅（PWA）	和原生 App 图标一样
访问摄像头	✅	WebRTC API
地理位置	✅	Geolocation API
本地存储	✅	IndexedDB，最大几百 MB
文件读写	✅	File System Access API
蓃牙	✅（有限）	Web Bluetooth API
推送 + 后台同步	✅（PWA）	Background Sync API

Web 做不到的：

复杂的后台任务（App 可以后台运行很久）
深度硬件集成（NFC、指纹识别等原生 API）
应用商店的分发渠道
一些国家/地区用户对"下载 App"的习惯

所以，除非你的产品明确需要上面列的这些能力，否则 Web 是最好的起点。

微信小程序开发详解

第一步：注册小程序账号

打开 mp.weixin.qq.com，点击"立即注册"
选择"小程序"类型
填写邮箱（未注册过微信公众平台的邮箱）、密码
邮箱收到验证链接，点击激活
选择主体类型：
- 个人：只需身份证，但功能受限（不能用微信支付、不能做虚拟支付）
- 个体工商户：需要营业执照，可以用微信支付
- 企业：需要企业营业执照，功能最全
完成主体认证（个人类型免认证，企业需要打款验证或微信认证，认证费 300 元/年）
进入小程序后台，拿到 AppID（后面开发要用）

第二步：安装开发工具

下载微信开发者工具，登录你的微信账号，创建一个新项目，填入 AppID。

项目目录结构：

my-miniapp/
├── pages/
│   ├── index/
│   │   ├── index.wxml    ← 页面模板（类似 HTML）
│   │   ├── index.wxss    ← 页面样式（类似 CSS）
│   │   ├── index.js      ← 页面逻辑
│   │   └── index.json    ← 页面配置
│   └── about/
│       ├── about.wxml
│       ├── about.wxss
│       ├── about.js
│       └── about.json
├── app.js                ← 小程序入口
├── app.json              ← 全局配置
├── app.wxss              ← 全局样式
└── project.config.json   ← 项目配置

第三步：用 AI 写小程序代码

好消息是，AI 对小程序开发也很熟悉。你可以在 Cursor 里直接让它写：

帮我写一个微信小程序页面：
- 顶部显示用户头像和昵称
- 中间是一个列表，显示最近的订单（假数据就行）
- 底部有 tabbar，首页和我的两个 tab

AI 会帮你生成完整的 WXML、WXSS、JS 和 JSON 配置文件。小程序的 WXML 语法和 HTML 很像（<view> 对应 <div>，<text> 对应 <span>），WXSS 语法和 CSS 基本一样，所以上手很快。

小程序的限制

包体大小：单包 2MB，分包最大 20MB。代码太多就得做分包加载
审核周期：提交审核一般 1-7 天，节假日更慢
平台规则：不能做很多东西，比如虚拟支付要走微信支付（苹果税类似）
AI 生成内容审核：如果你的小程序涉及 AI 对话/生成内容，需要额外的资质和审核
域名要求：小程序要求后端接口必须是 HTTPS + 已备案域名

跨平台方案：Taro vs uni-app

如果你既想要小程序，又想要 H5，还想要 App，可以考虑跨平台框架。

Taro

Taro 是京东出的，用 React 语法写，一套代码可以编译成：

微信/支付宝/百度/字节/QQ 小程序
H5（移动端网页）
React Native App

适合谁： 已经会 React 的开发者。学习成本几乎为零。

// Taro 代码示例 —— 和 React 一模一样
import { View, Text, Button } from '@tarojs/components'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <View>
      <Text>点击了 {count} 次</Text>
      <Button onClick={() => setCount(count + 1)}>+1</Button>
    </View>
  )
}

uni-app

uni-app 是 DCloud 出的，用 Vue 语法写，支持的平台更多：

微信/支付宝/百度/字节/QQ/京东/快手/飞书小程序
H5
iOS App（通过 uni-app 原生渲染或 WebView）
Android App

适合谁： 熟悉 Vue 的开发者，或者需要覆盖尽可能多平台的项目。

<!-- uni-app 代码示例 -->
<template>
  <view>
    <text>点击了 {{ count }} 次</text>
    <button @click="count++">+1</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Taro vs uni-app 对比

维度	Taro	uni-app
语法	React	Vue
出品方	京东	DCloud
支持平台	主流小程序 + H5 + RN	更多小程序 + H5 + 原生 App
App 体验	React Native，体验好	WebView 或 Weex，体验一般
社区生态	活跃，React 生态加持	非常活跃，国内用户最多
学习资料	丰富	非常丰富，插件市场大
适合场景	React 团队、注重 App 体验	Vue 团队、需要广泛平台覆盖
AI 熟悉度	高（React 生态）	中等

我的建议： 如果你本来就是 React 技术栈，选 Taro。如果你是 Vue 技术栈或者需要覆盖特别多的小程序平台，选 uni-app。两者都足够成熟，不会踩大坑。

React Native 做 App

如果你确实需要一个原生 App，但又不会 Swift 或 Kotlin，React Native 是最好的选择。

为什么选 React Native

用 JavaScript/TypeScript 写，AI 对它非常熟悉
社区庞大，遇到问题很容易找到答案
Expo 工具链让开发体验非常好
编译出来的 App 体验接近原生（比 WebView 套壳好很多）

快速开始（用 Expo）

# 创建项目
npx create-expo-app my-app --template blank-typescript

# 进入目录
cd my-app

# 启动开发服务器
npx expo start

用 Expo Go App 扫码就能在手机上预览。写代码的时候改一下、保存，手机上立刻看到效果。

一个简单的 RN 页面

import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native'
import { useState } from 'react'

interface Todo {
  id: string
  text: string
  done: boolean
}

export default function App() {
  const [todos, setTodos] = useState<Todo[]>([
    { id: '1', text: '学习 React Native', done: false },
    { id: '2', text: '做一个 App', done: false },
  ])

  const toggleTodo = (id: string) => {
    setTodos(todos.map(t => t.id === id ? { ...t, done: !t.done } : t))
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>待办事项</Text>
      <FlatList
        data={todos}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => toggleTodo(item.id)}>
            <Text style={item.done ? styles.done : styles.todo}>
              {item.done ? '✅' : '⬜'} {item.text}
            </Text>
          </TouchableOpacity>
        )}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, paddingTop: 60 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  todo: { fontSize: 18, paddingVertical: 10 },
  done: { fontSize: 18, paddingVertical: 10, textDecorationLine: 'line-through', color: '#999' },
})

用 AI 帮你写 React Native 代码非常高效。你告诉它要什么功能，它生成的代码通常直接能跑。Expo 把原生开发的很多复杂操作封装好了，你基本不需要碰 Xcode 或 Android Studio。

Flutter 对比

Flutter（Dart 语言）也是选项之一。它的 UI 表现力很强，做出的 App 很好看。但 AI 对 Flutter/Dart 的熟悉度不如 React Native/TypeScript，遇到问题时 AI 帮你解决的能力会稍弱一些。如果你没有特别偏好，优先选 React Native。

Web 套壳方案

还有一条更省事的路：直接用 Web 技术套一个 App 壳。

用 Capacitor（Ionic 团队出的）或者 Cordova，把你的 Web 项目包装成一个 App。本质上还是网页，但能发布到 App Store 和 Google Play。

# 把现有的 Next.js 项目变成 App
npm install @capacitor/core @capacitor/cli
npx cap init my-app com.example.myapp

# 添加平台
npx cap add ios
npx cap add android

# 构建 Web 然后同步到原生项目
npm run build
npx cap sync

# 打开 Xcode 或 Android Studio
npx cap open ios
npx cap open android

这种方案适合工具类、内容类应用。不适合需要复杂原生交互（比如地图、视频编辑、AR）的场景。

上架应用商店

做完了 App，要上架到应用商店，有一些事情你需要知道。

Apple App Store

开发者账号：每年 99 美元
审核时间：一般 1-3 天，首次提交可能更久
审核严格程度：很高。会检查隐私政策、功能完整性、界面规范、支付是否走 IAP 等
被拒是常态：不要怕，按反馈修改再提交就行。常见的被拒原因：
- 缺少隐私政策链接
- App 功能太简单（"苹果不接受 Demo 级别的 App"）
- 使用了非 IAP 的支付方式
- 界面不符合 Human Interface Guidelines

Google Play

开发者账号：一次性 25 美元
审核时间：一般 1-3 天
审核严格程度：比苹果宽松，但也在收紧。注意 Google Play 对 AI 生成内容也有政策要求
新账号限制：新注册的开发者账号，前几个 App 可能会进入"封闭测试"，需要一定数量的测试用户才能发布正式版

国内安卓应用市场

国内没有统一的 Google Play，需要分别提交到各个市场：

市场	准备材料	特殊要求
华为应用市场	软著 + 企业资质	审核较严格
小米应用商店	软著 + 企业资质	审核速度还行
OPPO 软件商店	软著 + 企业资质	—
vivo 应用商店	软著 + 企业资质	—
应用宝（腾讯）	软著 + 企业资质	流量大，建议优先上

软著（软件著作权）是国内安卓上架的必需品。申请周期一般 1-2 个月，可以找代办加快（费用几百到一两千）。建议提前准备。

App Store 提交清单

上架前对照检查：

成本对比

从零开始，不同方案需要花多少？

方案	开发成本	年维护成本	上线时间	适合阶段
Web（Next.js + Vercel）	$0（AI 帮你写）	$0-20（域名）	1-2 天	任何阶段
微信小程序（个人）	$0	$0	1 周（含审核）	验证想法
微信小程序（企业）	$0 + 300 认证费	300 认证费	2 周（含认证）	正式运营
Taro / uni-app 跨平台	$0	$0-300	1-2 周	多端覆盖
React Native（Expo）	$0	$99（苹果）+ $25（谷歌）	2-4 周	有 App 需求
Capacitor 套壳	$0	$99 + $25	1-2 周	快速上架
原生 iOS + Android	$5000+	$99 + $25	1-3 月	融资后/高要求

独立开发者的最佳路径：

Week 1-2：用 Next.js + Vercel 做 Web 版本，快速上线
Week 3-4：根据用户反馈迭代，验证产品方向
Month 2：如果需要国内市场，用 Taro/uni-app 做小程序版本
Month 3+：如果用户量够大、有 App 需求，用 React Native 做 App

别跳步。很多独立开发者犯的最大错误就是一开始就想做 App，花了两个月还没上线，Web 版本也没做，最后什么都没验证。

本章小结

90% 的情况，Web 就是最好的选择。 零成本、零门槛、迭代最快
面向国内市场，微信小程序值得做。 但要先注册账号、拿到资质
跨平台方案（Taro/uni-app）适合快速多端覆盖， 但"都能做但都不精"
React Native 是做 App 的最佳选择， Expo 让开发体验非常好
Web 套壳（Capacitor）是最快的 App 上架方式， 适合内容/工具类应用
上架应用商店有门槛， 提前准备好隐私政策、截图、资质等材料

专注一个平台，做到极致，再考虑扩展。这个原则适用于几乎所有独立开发者。

网站、小程序还是 App？​

什么时候选哪种？快速决策表​

Web 的优势：为什么大多数时候它就够了​

微信小程序开发详解​

第一步：注册小程序账号​

第二步：安装开发工具​

第三步：用 AI 写小程序代码​

小程序的限制​

跨平台方案：Taro vs uni-app​

Taro​

uni-app​

Taro vs uni-app 对比​

React Native 做 App​

为什么选 React Native​

快速开始（用 Expo）​

一个简单的 RN 页面​

Flutter 对比​

Web 套壳方案​

上架应用商店​

Apple App Store​

Google Play​

国内安卓应用市场​

App Store 提交清单​

成本对比​

本章小结​