uni-app多端打包全流程指南

uniapp多端打包全流程：H5、小程序与原生App实现指南

uniapp作为跨端开发框架，支持通过HBuilderX工具或命令行实现H5、小程序及原生App（iOS/Android）的多端打包。本文系统梳理各平台打包流程，结合配置要点与优化实践，帮助开发者高效完成应用发布。

H5平台打包

配置manifest.json

1. 打开项目根目录的 manifest.json，切换至 H5配置 选项卡
2. 设置运行基础路径（如部署在子目录需填写 /m/）
3. 可选开启history路由模式（需服务器支持）

执行打包命令

• HBuilderX：点击顶部菜单「发行」→「网站-H5手机版」，填写域名后打包
• 命令行（CLI）：

npm run build:h5 -- --dest h5-dist

部署到服务器

1. 打包后生成 unpackage/dist/build/h5（HBuilderX）或 h5-dist（CLI）文件夹
2. 上传至Web服务器（如Nginx）或静态托管服务（如Vercel）

微信小程序打包

配置manifest.json

1. 切换至 微信小程序配置 选项卡，填写AppID（从微信公众平台获取）
2. 按需配置权限（如地理位置、用户信息）

运行到微信开发者工具

1. 在HBuilderX中点击「运行」→「运行到小程序模拟器」→「微信开发者工具」
2. 首次运行需指定代码目录（ unpackage/dist/dev/mp-weixin），并开启服务端口

上传代码与发布

1. 点击「发行」→「小程序-微信」，生成生产环境代码至 unpackage/dist/build/mp-weixin
2. 在微信开发者工具中点击「上传」，填写版本号后提交至微信公众平台
3. 登录微信公众平台，进入「管理」→「版本管理」，提交审核后发布

原生App（iOS/Android）打包

准备工作

1. 注册开发者账号：DCloud账号（云打包）、Apple Developer Program账号（iOS，$99/年）

2. 生成证书：

   • Android：使用HBuilderX一键生成或通过 keytool 命令生成：

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore android.keystore

• iOS：在Apple Developer网站创建App ID、Distribution Certificate和Provisioning Profile

配置manifest.json

1. 切换至 App基础配置，填写应用标识（AppID）、名称、版本号（VersionCode需递增）
2. 上传图标，勾选所需原生模块（如地图、支付）和权限

云打包

1. Android打包：

   • 在HBuilderX中点击「发行」→「原生App-云打包」
   • 选择自有证书，上传 .keystore 文件并填写密码
   • 打包完成后下载 .apk 文件（路径： unpackage/release/apk）

2. iOS打包：

   • 选择「正式版」，上传 .p12 证书和 .mobileprovision 描述文件
   • 打包完成后下载 .ipa 文件，通过Transporter或Xcode上传至App Store Connect

应用商店上架

1. Android：注册应用商店账号（如华为、小米），上传 .apk 文件并提交审核
2. iOS：在App Store Connect填写应用元数据，提交审核后发布

关键注意事项

• 证书保管：Android证书和密码需妥善保存，更新应用时必须使用同一证书
• 权限声明：原生功能（如相机、定位）需在配置文件中声明权限
• 性能优化：混合开发时减少JS与原生通信频率，WebView需开启硬件加速

附：项目结构说明

├── common           # API文件
├── components       # 公用组件
├── static           # 静态资源（仅限此目录）
├── manifest.json    # 打包配置（应用名称、AppID等）
├── pages.json       # 页面路由配置
└── unpackage        # 打包输出目录
    ├── res          # 图标、启动页
    ├── cert         # 证书文件
    └── dist         # 打包文件