UniApp 的核心优势在于“一次开发，多端运行”。但要真正实现高质量的跨平台交付，必须掌握多端适配技巧和各平台发布流程。

本文将系统讲解如何使用 条件编译 处理平台差异，并详细介绍 微信小程序、H5、App（Android/iOS） 的发布全流程。

---

一、多端适配：条件编译实战

1. 条件编译语法回顾

UniApp 使用特殊注释语法在编译阶段按平台包含/排除代码：

// #平台标识
  // 这段代码只在指定平台生效
// #endif

✅ 常用平台标识

平台	标识符
App（Vue/NVue）	APP-PLUS
App nvue 页面	APP-NVUE
H5	H5
微信小程序	MP-WEIXIN
支付宝小程序	MP-ALIPAY
百度小程序	MP-BAIDU
字节跳动小程序	MP-TOUTIAO
QQ 小程序	MP-QQ

💡 所有标识均为 大写

---

2. 条件编译实战场景

✅ 场景 1：组件级适配

<template>
  <view>
    <!-- 微信小程序使用 open-type -->
    <!-- #ifdef MP-WEIXIN -->
    <button open-type="contact">联系客服</button>
    <!-- #endif -->

    <!-- App 使用原生分享 -->
    <!-- #ifdef APP-PLUS -->
    <button @click="shareApp">分享应用</button>
    <!-- #endif -->

    <!-- H5 使用 a 标签跳转 -->
    <!-- #ifdef H5 -->
    <a href="https://example.com" target="_blank">访问官网</a>
    <!-- #endif -->
  </view>
</template>

✅ 场景 2：JavaScript 逻辑适配

methods: {
  login() {
    // 微信小程序登录
    // #ifdef MP-WEIXIN
    uni.login({
      provider: 'weixin',
      success: (res) => console.log('微信登录成功', res)
    })
    // #endif

    // App 苹果登录
    // #ifdef APP-PLUS
    uni.login({
      provider: 'apple',
      success: (res) => console.log('Apple 登录成功', res)
    })
    // #endif

    // H5 跳转 OAuth 页面
    // #ifdef H5
    location.href = '/auth/login'
    // #endif
  },

  shareApp() {
    // #ifdef APP-PLUS
    plus.share.sendWithSystem({
      content: '推荐一款好用的 App！',
      href: 'https://example.com'
    })
    // #endif

    // #ifdef MP-WEIXIN
    wx.updateShareMenu({
      withShareTicket: true,
      success: () => console.log('分享设置成功')
    })
    // #endif
  }
}

✅ 场景 3：样式适配

/* H5 端使用固定定位 */
/* #ifdef H5 */
.sticky-header {
  position: fixed;
  top: 0;
  z-index: 999;
}
/* #endif */

/* 小程序使用 sticky */
/* #ifdef MP-WEIXIN */
.sticky-header {
  position: sticky;
  top: 0;
}
/* #endif */

✅ 场景 4：分包配置差异

{
  "subPackages": [
    // 只在微信小程序启用分包
    /* #ifdef MP-WEIXIN */
    {
      "root": "packageA",
      "pages": ["pages/user/profile"]
    }
    /* #endif */
  ]
}

---

3. 高级技巧

✅ 组合条件判断

// 在非 H5 平台执行
// #ifndef H5
console.log('这不是 H5')
// #endif

// 在微信或支付宝小程序中
// #ifdef MP-WEIXIN || MP-ALIPAY
this.showMiniProgramTips()
// #endif

// 在 App 且非 nvue 页面
// #ifdef APP-PLUS && !APP-NVUE
this.useWebViewFeature()
// #endif

✅ 避免平台不支持的 API

// #ifdef APP-PLUS
plus.geolocation.getCurrentPosition((res) => {
  console.log('位置：', res.coords.latitude, res.coords.longitude)
}, (err) => {
  console.error('定位失败', err)
})
// #endif

// #ifdef H5
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition((pos) => {
    console.log('H5 位置：', pos.coords)
  })
}
// #endif

---

二、发布流程详解

1. 微信小程序发布步骤

✅ 步骤 1：构建小程序项目

在 HBuilder X 中：

• 右键项目 → “发行” → “小程序-微信”
• 或使用 CLI：cli publish weixin

✅ 步骤 2：微信开发者工具配置

1. 打开微信开发者工具
2. 选择 “小程序” → “导入项目”
3. 选择 UniApp 生成的 unpackage/dist/dev/mp-weixin 目录
4. 填写 AppID（在微信公众平台获取）

✅ 步骤 3：代码上传

1. 点击 “上传” 按钮
2. 填写版本号（如 1.0.0）和项目备注
3. 上传成功后，进入微信公众平台管理

✅ 步骤 4：微信公众平台操作

1. 登录 mp.weixin.qq.com
2. 进入 “开发管理” → “版本管理”
3. 选择刚上传的版本 → “提交审核”
4. 审核通过后 → “发布”

⚠️ 注意：首次发布需完成小程序认证、类目选择、隐私协议等配置。

---

2. H5 端部署

✅ 步骤 1：构建 H5 项目

# HBuilder X：发行 → 网站 H5
# 或 CLI
cli build h5

输出目录：unpackage/dist/build/h5

✅ 步骤 2：部署到服务器

将 h5 目录上传到任意 Web 服务器：

服务	部署方式
Nginx	cp -r h5/* /var/www/html/
Apache	放入 htdocs 目录
Vercel	vercel 命令一键部署
Netlify	拖拽上传或 Git 集成

✅ 步骤 3：配置路由（如使用 history 模式）

# Nginx 配置示例
location / {
  try_files $uri $uri/ /index.html;
}

✅ 步骤 4：配置域名与 HTTPS

• 绑定自定义域名
• 申请 SSL 证书（Let's Encrypt 免费）

---

3. App 打包（Android & iOS）

✅ Android 打包

方式一：HBuilder X 可视化打包（推荐新手）

1. 证书准备：
   • 使用 HBuilder X 自动生成测试证书
   • 或导入已有的 .keystore 文件
2. 打包步骤：
   • 项目右键 → “发行” → “原生 App-云打包”
   • 选择 Android 平台
   • 填写应用名称、包名（如 com.example.myapp）、版本号
   • 上传图标（建议提供 192x192 PNG）
   • 选择运行权限（如网络、存储、相机等）
3. 开始打包：
   • 点击“打包”
   • 等待云端构建完成（约 5-10 分钟）
   • 下载 .apk 文件

方式二：本地打包（需 Android Studio 环境）

cli build app --platform android

✅ iOS 打包

前提条件

• Mac 电脑
• Apple ID（开发者账号，$99/年）
• 已申请开发/发布证书和 Provisioning Profile

打包步骤（HBuilder X）

1. 项目右键 → “发行” → “原生 App-云打包”
2. 选择 iOS 平台
3. 上传：
   • .p12 证书文件（导出时设置密码）
   • .mobileprovision 描述文件
4. 填写 Bundle ID（必须与描述文件一致）
5. 选择打包类型：
   • Development：开发调试
   • Distribution：App Store 发布
6. 开始打包，下载 .ipa 文件

本地打包（推荐专业团队）

cli build app --platform ios

✅ App 发布到应用商店

平台	流程
华为应用市场	上传 .apk，填写应用信息，提交审核
小米应用商店	同上
腾讯应用宝	开发者注册 → 提交应用
Apple App Store	使用 Xcode 或 Application Loader 上传 .ipa，填写元数据，提交审核

⚠️ 注意：App Store 审核较严格，需确保无热更新、隐私合规、功能完整。

---

三、各平台发布对比表

平台	构建命令	输出格式	发布渠道	审核时间
微信小程序	cli publish weixin	目录	微信公众平台	1-7 天
H5	cli build h5	静态文件	任意 Web 服务器	即时
Android	cli build app --android	.apk	各大安卓市场	1-3 天
iOS	cli build app --ios	.ipa	App Store	1-7 天（可能被拒）

---

四、发布前检查清单（Checklist）

✅ 通用检查

•  应用图标、启动图已配置
•  manifest.json 中版本号、名称正确
•  移除调试日志（使用条件编译）
•  测试所有核心功能

✅ 小程序专项

•  app.json 分包配置正确
•  已申请必要接口权限（如支付、地理位置）
•  隐私合规声明已添加

✅ H5 专项

•  publicPath 配置正确（如部署在子目录）
•  已启用 Gzip 压缩
•  SEO 友好（如有需要）

✅ App 专项

•  证书有效，包名唯一
•  权限申请合理（避免过度索取）
•  已测试真机兼容性
•  隐私政策 URL 已配置

---

结语

通过掌握 条件编译 和 多平台发布流程，你已经具备了将 UniApp 应用推向各大平台的完整能力。

✅ 关键总结：

• 条件编译 是跨端适配的利器
• 微信小程序 注重审核规范
• H5 部署简单，适合快速验证
• App 打包 需证书和耐心等待审核