打包发布

10.1 发布前的准备工作

在正式打包发布前，需要完成一系列检查和准备，避免因遗漏导致审核失败或用户体验问题：

通用检查清单

• 所有调试用的 console.log 已清理（或配置 production 环境自动删除）
• manifest.json 中的版本号（versionCode 和 versionName）已正确更新
• 应用图标（icon）已准备各尺寸规格
• 启动图（splash screen）已配置
• 隐私政策 URL 已有效（App Store / 小程序审核必要）
• 所有功能已在目标平台真机上测试
• 网络请求域名已在各平台配置合法域名

环境变量配置

# .env.production — 生产环境配置
VITE_API_BASE_URL=https://api.example.com
VITE_APP_NAME=我的应用

# .env.development — 开发环境配置
VITE_API_BASE_URL=http://localhost:3000
VITE_APP_NAME=我的应用（开发版）

// vite.config.ts — 生产环境自动删除 console
export default defineConfig(({ mode }) => ({
  plugins: [uni()],
  esbuild: {
    drop: mode === 'production' ? ['console', 'debugger'] : []
  }
}))

10.2 H5 打包与部署

构建 H5

# HBuilderX：发行 → 网站 PC Web 或手机 H5
# 命令行方式：
npm run build:h5

# 产物位置：dist/build/h5/

路由模式配置

// manifest.json
{
  "h5": {
    "router": {
      "mode": "history"  // 推荐 history 模式，URL 更美观
      // hash 模式：URL 带 #，不需要服务端配置，但不利于 SEO
    }
  }
}

Nginx 部署配置

# /etc/nginx/sites-available/myapp.conf
server {
  listen 80;
  server_name example.com;

  root /var/www/h5;
  index index.html;

  # H5 history 模式：所有路由指向 index.html
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 静态资源长缓存
  location ~* \.(js|css|png|jpg|gif|svg|woff2?)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # gzip 压缩
  gzip on;
  gzip_types text/html text/css application/javascript;
  gzip_min_length 1024;
}

10.3 微信小程序打包与发布

构建小程序

# 命令行
npm run build:mp-weixin

# 产物位置：dist/build/mp-weixin/
# 用微信开发者工具打开此目录进行预览和上传

发布流程

1. 在微信开发者工具中打开 dist/build/mp-weixin/ 目录
2. 点击"上传"，填写版本号和版本描述
3. 在微信公众平台（mp.weixin.qq.com）的"版本管理"中提交审核
4. 审核通过后，在版本管理页面点击"发布"
5. 发布后约 30 分钟用户可以看到新版本

小程序体积优化

10.4 App 打包

App 打包有两种方式：HBuilderX 云打包（推荐，无需配置本地环境）和本地离线打包（高级定制需求）。

云打包流程

1. 在 HBuilderX 中：发行 → 原生 App 云打包
2. 选择 Android、iOS 或两者同时打包
3. 配置打包证书（Android 的 keystore，iOS 的 p12 + mobileprovision）
4. 点击打包，等待云端构建（通常 5-15 分钟）
5. 下载 APK（Android）或 IPA（iOS）文件

Android 证书生成

# 生成 Android 签名证书（keystore）
keytool -genkey -alias myapp \
  -keyalg RSA \
  -keystore myapp.keystore \
  -validity 36500 \
  -keysize 2048

# 查看证书信息（获取 SHA1，用于微信登录等第三方 SDK 配置）
keytool -list -v -keystore myapp.keystore

iOS 证书配置

iOS 打包需要苹果开发者账号（99 美元/年），并在 Apple Developer Portal 创建：

• App ID（Bundle Identifier，如 com.example.myapp）
• 开发证书（Development Certificate）或发布证书（Distribution Certificate）
• Provisioning Profile（描述文件，绑定 App ID + 证书 + 设备）

10.5 各平台上架指南

Google Play 上架

1. 注册 Google Play 开发者账号（一次性费用 25 美元）
2. 在 Google Play Console 创建应用，填写应用信息、截图、隐私政策
3. 上传 AAB 文件（推荐）或 APK 文件
4. 配置分级和国家/地区
5. 提交审核（通常 1-3 个工作日）

苹果 App Store 上架

1. 在 App Store Connect 创建 App 记录，填写元数据
2. 通过 Xcode 或 Transporter 上传 IPA
3. 配置定价、国家/地区
4. 提交审核（通常 1-3 个工作日，但可能更长）
5. 注意 Apple 审核指南，常见拒绝原因：缺少功能演示、隐私政策不完整、崩溃

各大安卓应用市场（国内）

市场	开发者注册	审核周期	备注
华为应用市场	免费	1-3 天	国内 Android 最大份额
小米应用商店	免费	1-5 天	小米/Redmi 设备预装
OPPO 应用商店	免费	2-5 天	OPPO/OnePlus/Realme
vivo 应用商店	免费	2-5 天	需提供软著（软件著作权）
应用宝（腾讯）	免费	2-7 天	覆盖微信用户

10.6 性能优化清单

启动性能优化

渲染性能优化

<!-- 长列表：使用虚拟滚动代替全量渲染 -->

<!-- 方案一：小程序使用 recycle-view（微信官方）-->
<recycle-view
  batch="{{batchSize}}"
  id="recycleId"
>
  <recycle-item wx:for="{{items}}" >
    <view>{{ item.name }}</view>
  </recycle-item>
</recycle-view>

<!-- 方案二：App 端（uni-app x）使用 list-view -->
<list-view
  :data-source="items"
  estimated-item-size="100"
>
  <template #item="{ item }">
    <list-item-view :data="item" />
  </template>
</list-view>

网络性能优化

// 1. 接口合并：减少请求次数
// 将首页的多个独立接口合并为一个接口，一次返回所有数据
const homeData = await http.get('/api/home')
// homeData 包含 banners、categories、hotProducts、flashSale 等

// 2. 图片懒加载
<image :src="item.cover" lazy-load />

// 3. 图片 CDN 格式转换（WebP 比 JPG 小 30%）
function toWebP(url: string, width: number): string {
  // 假设使用阿里云 OSS 的图片处理
  return `${url}?x-oss-process=image/format,webp/resize,w_${width}`
}

// 4. 预请求（在前一页提前发起下一页的请求）
// 用户在列表页点击商品时，提前请求详情页数据
function onHoverCard(productId: number) {
  // 预加载详情数据
  http.get(`/api/products/${productId}`).then(data => {
    // 存入缓存，详情页打开时直接取用
    storage.set(`product_${productId}`, data, 30000)
  })
}

10.7 条件编译最佳实践总结

经过 10 章的学习，以下是条件编译的最终最佳实践：

// ✅ 推荐：将平台差异封装在独立的 composable 或工具函数中
// composables/useShare.ts
export function useShare() {
  function shareProduct(product: Product) {
    // #ifdef APP
    uni.share({
      provider: 'weixin',
      type: 0,
      href: `https://example.com/p/${product.id}`,
      title: product.name
    })
    // #endif

    // #ifdef H5
    navigator.clipboard.writeText(`https://example.com/p/${product.id}`)
    uni.showToast({ title: '链接已复制' })
    // #endif

    // #ifdef MP-WEIXIN
    // 小程序靠 onShareAppMessage 处理，这里可以触发页面内的分享面板
    uni.showToast({ title: '点击右上角分享', icon: 'none' })
    // #endif
  }

  return { shareProduct }
}

// ❌ 不推荐：在每个页面组件中重复写条件编译逻辑

10.8 持续集成（CI/CD）集成

# .github/workflows/uniapp-build.yml
name: UniApp Build

on:
  push:
    branches: [ main ]

jobs:
  build-h5:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm install
      - run: npm run build:h5
      - name: Deploy to OSS
        uses: fangbinwei/aliyun-oss-website-action@v1
        with:
          accessKeyId: ${{ secrets.OSS_KEY_ID }}
          accessKeySecret: ${{ secrets.OSS_KEY_SECRET }}
          bucket: my-app-h5
          endpoint: oss-cn-hangzhou.aliyuncs.com
          folder: dist/build/h5

10.9 发布后监控

10.10 全教程总结

恭喜你完成了 uni-app 跨端开发的全部 10 章学习！回顾一下我们覆盖的核心知识：