如何用一套代码同时实现企业网站和微信小程序？

用「一套代码」同时实现企业网站（Web）和微信小程序，不能真正实现 100% 完全共用同一份源码直接运行（因平台限制：小程序运行在封闭的 WebView + JS 引擎中，无 DOM/BOM，不支持 window/document，且有 API、样式、生命周期等根本差异），但可以通过现代跨端框架实现 「高度共享业务逻辑与 UI 结构」的「一套代码多端编译」，显著提升开发效率与一致性。

以下是经过生产验证的主流方案及最佳实践：

✅ 推荐方案：Taro（首选）或 Uni-app（次选）

❌ 不推荐：原生小程序 + 原生 Web（两套代码）｜WePY（已停止维护）｜MPVue（已归档）

🛠️ 实现「一套代码」的关键技术要点（以 Taro 为例）

1. 项目结构（共享核心）

my-corp-website/
├── src/
│   ├── components/      // 跨端通用组件（无平台 API）
│   │   ├── Header.jsx   // 使用 Taro API（如 View, Text）而非 div/span
│   │   └── ProductList.jsx
│   ├── pages/           // 页面（可复用逻辑）
│   │   ├── index/       // 首页 → 编译后生成小程序 pages/index/ + H5 /index/
│   │   │   ├── index.jsx
│   │   │   └── index.scss
│   ├── utils/           // 工具函数（纯 JS，无平台依赖）
│   │   ├── api.js       // 封装 axios/fetch，自动适配 Taro.request 或 fetch
│   │   └── helpers.js
│   ├── app.jsx          // 入口（Taro 自动注入 App 生命周期）
│   └── index.html       // H5 入口模板（仅 H5 需要）
├── config/
│   ├── index.js         // 多端配置（如 API 域名、CDN 地址）
├── project.config.json  // 微信开发者工具配置
└── package.json

2. 平台差异化处理（最小侵入）

// src/pages/index/index.jsx
import Taro, { useEffect } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

export default function Index() {
  useEffect(() => {
    // ✅ 统一生命周期：useEffect 在 H5 是 componentDidMount，小程序是 onShow
    console.log('页面加载')

    // ❌ 错误：if (process.env.TARO_ENV === 'h5') { document.title = '...' }
    // ✅ 正确：用 Taro API 抽象
    Taro.setNavigationBarTitle({ title: '企业首页' }) // 小程序生效，H5 会降级为 document.title
  }, [])

  return (
    <View className="container">
      <Text>欢迎访问{process.env.TARO_ENV === 'h5' ? '官网' : '小程序'}</Text>
      {/* ✅ 条件编译（编译时移除，非运行时判断） */}
      {process.env.TARO_ENV === 'h5' && <Text>© 2024 企业官网</Text>}
      {process.env.TARO_ENV === 'mp-weixin' && <Text>微信小程序版</Text>}
    </View>
  )
}

3. 网络请求统一封装（关键！）

// src/utils/api.js
import Taro from '@tarojs/taro'

// 自动适配：小程序用 Taro.request，H5 用 fetch 或 axios
const request = (options) => {
  if (process.env.TARO_ENV === 'mp-weixin') {
    return Taro.request({
      url: options.url,
      method: options.method || 'GET',
      data: options.data,
      header: { ...options.header, 'X-Source': 'mp' }
    })
  } else {
    // H5 使用 fetch（或 axios）
    return fetch(options.url, {
      method: options.method || 'GET',
      headers: { ...options.header, 'X-Source': 'h5' },
      body: options.data ? JSON.stringify(options.data) : undefined
    }).then(res => res.json())
  }
}

export default request

4. 样式兼容（CSS-in-JS 或 RSC）

• ✅ 使用 @tarojs/components 的 View/Text 等标签（非 div/span）
• ✅ 样式用 .scss 或 .less，避免 position: fixed 在小程序中的兼容问题
• ✅ 响应式：H5 用媒体查询，小程序用 rpx（Taro 默认单位），通过 pxtransform 插件自动转换

5. 路由与导航

// 跳转统一用 Taro API（自动适配）
Taro.navigateTo({ url: '/pages/about/index' }) // 小程序
Taro.navigateTo({ url: '/about' })             // H5（Taro 自动映射）

📦 构建与部署（CI/CD 友好）

# 开发
npm run dev:h5     # 启动 H5 本地服务（http://localhost:10086）
npm run dev:weapp  # 启动小程序开发（自动打开微信开发者工具）

# 构建
npm run build:h5     # 输出到 dist/h5/ → 部署 Nginx/Aliyun OSS
npm run build:weapp  # 输出到 dist/weapp/ → 导入微信开发者工具上传

✅ 企业建议：将 dist/h5/ 部署为静态网站（HTTPS + CDN），dist/weapp/ 提交微信审核。两者共享同一套 API 后端（无需区分域名）。

⚠️ 必须人工适配的场景（无法完全自动化）

✅ 企业落地建议（避坑指南）

1. 团队技术栈匹配：React 团队选 Taro，Vue 团队选 Uni-app；
2. UI 组件库：使用 taro-ui（Taro）或 uView（Uni-app），避免自行封装高耦合组件；
3. 状态管理：Taro 推荐 Zustand（轻量）或 Redux Toolkit（复杂场景）；
4. TypeScript：必须启用！大幅降低跨端类型错误（Taro 对 TS 支持极佳）；
5. 测试策略：单元测试（Jest + RTL）覆盖业务逻辑；E2E 用 Cypress（H5） + 小程序自动化测试工具（如 miniprogram-automator）；
6. 灰度发布：H5 可 A/B 测试；小程序需提审新版本，建议用「功能开关」+ 后端配置控制新模块可见性。

💡 总结：你获得的不是“一份代码跑两端”，而是

✅ 一套业务逻辑（JS/TS）
✅ 一套 UI 结构（JSX/Vue SFC）
✅ 一套构建流程（Taro CLI）
✅ 90%+ 代码复用率（组件、工具、状态、路由、API 层）
❌ 仅需 10% 平台适配代码（生命周期、平台 API、样式微调）

如需，我可以为你：

• ✨ 生成一个完整的 Taro 企业官网（含首页/产品/关于我们/H5+小程序双端）脚手架模板
• 📄 提供微信登录/H5 分享/支付的跨端封装示例代码
• 📊 输出详细的技术选型对比表（Taro vs Uni-app vs Remax）

欢迎告诉我你的技术栈（React/Vue？是否已有后端？是否有小程序备案？），我可定制化输出方案 👇