规则之树 · 社区平台开源解决方案 RuleApp · RuleApi · Sulo · RuleApiVisible
更新：2026-09-05 16:11

前端打包部署（uniapp 三端：H5 / APP / 小程序）

详细说明 RuleApp（uniapp 项目，应用名「规则之树」，AppID __UNI__8D6C809）三端打包与上线流程。 适用：RuleAppRro（Vue2）与 RuleAppX（Vue3）同构，流程一致；差异仅在 Vue 版本与分包配置。

1. 部署前必读（本项目关键配置）

API 地址（RuleAppRro/utils/api.js 顶部）：

var API_URL   = 'https://api.ruletree.club/';   // 业务接口
var WS_URL    = 'wss://api.ruletree.club/';     // WebSocket（聊天/私信）

上线前务必确认：API_URL/WS_URL 指向你的正式后端域名（必须 HTTPS，且与后端 nginx 反代一致）。开发态会改本机地址，发布前改回。

manifest.json 关键项：

配置 值 说明
appid __UNI__8D6C809 DCloud AppID（云打包标识）
name 规则之树 应用名
微信小程序 mp-weixin.appid wxbb9ba7d860f4dfc0 微信开放平台小程序的 AppID
h5.router.base /h5/ H5 发布子路径（部署在 /h5/ 目录）
h5.router.mode hash hash 路由（无需服务端 rewrite，最省事）
Android schemes ruleapp 唤起协议（如 ruleapp://）
Android abiFilters armeabi-v7a, arm64-v8a CPU 架构（覆盖面广）

2. 三端构建与产物位置

端 HBuilderX 菜单 产物目录 说明
H5 运行→运行到浏览器 / 发行→网站-PC Web unpackage/dist/build/h5/ 静态站点，nginx 托管
APP 发行→原生App-云打包 unpackage/dist/build/app-plus/（中间产物） 生成 apk/ipa（云打包下载）
小程序 发行→小程序-微信（或运行到微信模拟器） unpackage/dist/build/mp-weixin/ 开发者工具上传

3. H5 部署（nginx）

3.1 构建

# 方式 A：HBuilderX 可视化
#   菜单：发行 → 网站-PC Web 或手机 H5 → 输入网站标题 → 确定
#   产物：unpackage/dist/build/h5/

# 方式 B（若配置 CLI 工程，RuleAppRro 为 HBuilderX 工程，一般用方式 A）
# 也可在 HBuilderX 中右键项目 → 使用命令行编译（如需要）

3.2 nginx 托管

产物上传到服务器（示例部署在 /var/www/ruleapp-h5/）：

rm -rf /var/www/ruleapp-h5
cp -r unpackage/dist/build/h5 /var/www/ruleapp-h5

nginx server 块（示意，含 /h5/ 子路径）：

server {
    listen 443 ssl http2;
    server_name app.ruletree.club;

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

    # H5 产物（hash 路由，无需 rewrite；若 base=/h5/ 则应把产物放 root/h5 下）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 后端 API 反代（前端 API_URL 指向的域名也可以是同一个；端口按后端实际 8080/8081 调整）
    location /api/ {
        proxy_pass http://127.0.0.1:8081/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        client_max_body_size 100m;
    }
}

注意：本项目 h5.router.base=/h5/，即打开地址是 https://app.ruletree.club/h5/。请把 h5/ 目录放到 root 下；若希望根路径直接打开，改 manifest 的 base 为 / 再重新发行。 补充（HBuilderX 默认情况）：部分场景默认打包成 /xxx/xxx 绝对路径导致 H5 打不开——需在 manifest 或 vue.config 设置相对路径 publicPath: './'；本项目由 h5.router.base 显式控制，产物引用为相对资源，一般无需此步；如部署后资源 404，先检查此点。

3.3 H5 常见问题

  • 白屏：检查 index.html 引用的 static/、assets/ 路径是否为 ./ 相对（uniapp 默认相对，若配置 publicPath 需对应）。
  • 接口 404：API_URL 未指向后端；或后端未通过 nginx 暴露（跨域需在后端/反代加 CORS）。
  • 微信内置浏览器打不开：确认域名备案 + HTTPS 证书有效；weixin 相关登录需开放平台配置回调域名。
  • 更新部署：重新 build 后整体替换 unpackage/dist/build/h5/*（建议先备份旧目录）。

4. APP 打包发布（云打包）

4.1 前置准备

keytool -genkey -alias ruleapp -keyalg RSA -keysize 2048 -validity 36500 \
  -keystore ruleapp-release.keystore -storepass 你的密码
# 提示输入口令/姓名/组织等；务必备份 keystore，丢失无法更新包
  • iOS：需要开发者证书 + mobileprovision（Apple 开发者账号），云打包上传 p12 与描述文件。

4.2 云打包步骤

  1. HBuilderX 打开项目 → 菜单 发行 → 原生App-云打包。
  2. 勾选平台（Android / iOS）。
  3. Android：填 keystore（或使用公共测试证书先自测）；选择渠道（如"应用市场"）。
  4. 点击「打包」，等待 DCloud 云端完成，下载 apk/ipa。
  5. 用生成的 apk 做内测（Android 7+ 需手动允许未知来源安装）。

4.3 上架渠道（Android）

渠道 要点
应用宝 需软件著作权/备案；包名与签名固定
华为/小米/OPPO/vivo 各需开发者账号 + 应用审核；注意 targetSdk 版本要求
官网直发 直接提供 apk 下载（注意 HTTPS 与包信息页）

包名：manifest 中 app-plus.distribute.android.packagename（若未配置需补充，如 com.ruletree.app）——发布后不可更改。校验规则：至少两段、以点分隔、每段首字母为小写字母（如 com.example.app 合法；com.123.app 不合法）。自测时可选「公共测试证书」，正式上架请用自备 keystore。

4.4 iOS

  • 云打包 iOS 需上传 p12 证书 + mobileprovision；ios.appid（Bundle ID）一致。
  • 上架 App Store 走 App Store Connect 审核（隐私政策、截图、审核备注）。

4.5 APP 内置更新提示

  • 服务器 system/app 接口返回最新版本（versionName/versionCode/apkUrl），App 启动时比对自动提示（pages/home/index.vue 已实现版本更新逻辑）。
  • 升级包替换：上传新 apk 到后端文件服务，更新 system/app 配置即可触发用户端升级提示。

5. 微信小程序发布

5.1 构建与导入

  1. HBuilderX 菜单 发行 → 小程序-微信（或"运行到小程序模拟器"先生成开发版）。
  2. 产物：unpackage/dist/build/mp-weixin/。
  3. 打开 微信开发者工具 → 导入项目 → 选择该产物目录 → AppID 填 wxbb9ba7d860f4dfc0（首次需在 mp.weixin.qq.com 注册小程序并获取 AppID）。

5.2 上传与提审

  1. 微信开发者工具 → 右上角「上传」→ 填版本号与备注（如 2.2.4）。
  2. 登录 mp.weixin.qq.com → 版本管理 → 选「开发版本」→ 提交审核。
  3. 填写类目（如「工具/社交」）、隐私说明（用户隐私保护指引，涉及手机号/定位/相册需勾选）。
  4. 审核通过后「发布」。

5.3 小程序关键配置

项 值/动作
request 合法域名 登录 mp 后台 → 开发管理 → 开发设置 → 服务器域名，添加 https://api.ruletree.club（wx.request 域名白名单）。注意：仅支持 HTTPS，且域名必须完成 ICP 备案；不支持 IP 与端口
业务域名（web-view 用） 若用到 web-view 跳转，需添加业务域名
用户隐私保护指引 配置使用手机号/位置等字段，否则审核被拒
manifest.json 的 mp-weixin.appid 必须与实际小程序一致

5.4 小程序注意事项

  • urlCheck:false（manifest mp-weixin.setting.urlCheck）仅限开发者工具跳过校验；发布以 mp 后台域名白名单为准。
  • 内容层面：涉及 UGC（动态/帖子）需有举报与审核机制（平台已内置 report + 管理端审核），提审时按需说明。
  • 分包：若单包超 2MB，可将 pages/soft、pages/chat 等设为分包（pages.json subPackages；本项目已按分包组织部分页面）。

6. 三端联调 checklist

  • [ ] api.js 的 API_URL/WS_URL 为正式域名（HTTPS）
  • [ ] manifest name/appid/版本号（versionName/versionCode）正确
  • [ ] 微信小程序：AppID、request 域名、隐私指引、类目
  • [ ] Android：签名 keystore 备份、包名固定、渠道要求（targetSdk）
  • [ ] iOS：Bundle ID、证书、隐私政策、App Store 审核备注
  • [ ] H5：nginx 托管目录、base 路径、HTTPS、后端反代/CORS
  • [ ] 支付回调地址与后端配置一致（支付宝/微信）
  • [ ] 更新机制（system/app 版本接口）指向新包

7. 常见问题 FAQ（前端部署）

Q: H5 页面能打开但接口白屏？

  • 检查浏览器 Network：api.ruletree.club 是否可达、是否 404/跨域。跨域时后端 nginx 加：
add_header Access-Control-Allow-Origin $http_origin always;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers Content-Type,Authorization;
if ($request_method = OPTIONS) { return 204; }

Q: 小程序请求报"不在以下 request 合法域名列表中"？

  • mp 后台添加 https://api.ruletree.club；工具中勾选「不校验合法域名」仅调试用。

Q: 云打包失败提示签名不对？

  • 检查 keystore 密码/别名与上传一致；首包建议用正式签名直接打（避免后续换签名无法覆盖安装）。

Q: 应用更新不提示？

  • 确认 system/app 返回的 versionCode 大于当前安装版本；apkUrl 可下载且为 https。
上一篇常见问题 FAQ