多端前端App 端
小程序端
小程序和 H5、App 共用同一套 uni-app 页面。每个平台一个构建目标,产物导入对应开发者工具后上传。
支持平台
package.json 里已经预置了这些构建脚本:
| 平台 | 开发 | 构建 |
|---|---|---|
| 微信 | npm run dev:mp-weixin | npm run build:mp-weixin |
| 支付宝 | npm run dev:mp-alipay | npm run build:mp-alipay |
| 抖音 | npm run dev:mp-toutiao | npm run build:mp-toutiao |
| 百度 | npm run dev:mp-baidu | npm run build:mp-baidu |
| 快手 | npm run dev:mp-kuaishou | npm run build:mp-kuaishou |
npm run dev:mp-qq | npm run build:mp-qq | |
| 京东 | npm run dev:mp-jd | npm run build:mp-jd |
小红书(
mp-xhs)的依赖已装,但package.json还没预置脚本;需要时自行加"dev:mp-xhs": "uni -p mp-xhs"/"build:mp-xhs": "uni build -p mp-xhs",或直接用uni -p mp-xhs。
微信小程序:从构建到上传
1. 构建
npm run build:mp-weixin产物在 dist/build/mp-weixin/。
2. 导入开发者工具
微信开发者工具 → 导入项目 → 选择 dist/build/mp-weixin/。
3. 配置 AppID
src/manifest.json的mp-weixin.appid;- 或开发者工具里临时填写测试号。
4. 配置服务器域名
微信公众平台 → 开发管理 → 服务器域名:
request合法域名:你的 API 域名;uploadFile/downloadFile:上传下载域名;socket:WebSocket 域名(如果用了)。
必须是 HTTPS + 已备案域名,不能用 IP、不能带端口。
5. 上传与审核
开发者工具「上传」→ 微信公众平台提交审核 → 发布。

微信小程序首页(截图占位)
/images/docs/mp-home.png建议 390 × 844,截小程序首页与 tabBar。
小程序与 H5 的差异
| 能力 | H5 | 小程序 |
|---|---|---|
| 登录 | 账号 / 短信 / 微信 | 微信授权登录(uni.login + 后端换 token) |
| 支付 | H5 支付 | 小程序支付(需要 openid) |
| 分享 | 链接 | onShareAppMessage / 分享卡片 |
| 域名 | 无限制 | 必须配置合法域名 |
| 包体积 | 无硬限制 | 主包 2MB、总包 20MB(微信) |
常见问题
| 现象 | 原因 |
|---|---|
| 开发者工具能跑,真机不行 | 合法域名没配、证书不受信任 |
请求失败 url not in domain list | 服务器域名未配置或用了 IP |
| 登录失败 | AppID / AppSecret 不匹配,或后端没配对应小程序 |
| 包体积超限 | 主包放了太多页面,改分包 / 图片走 CDN |
| 支付调不起 | openid、商户号、回调地址、签名不一致 |