Wujies 无界平台
多端前端App 端

小程序端

小程序和 H5、App 共用同一套 uni-app 页面。每个平台一个构建目标,产物导入对应开发者工具后上传。

支持平台

package.json 里已经预置了这些构建脚本:

平台开发构建
微信npm run dev:mp-weixinnpm run build:mp-weixin
支付宝npm run dev:mp-alipaynpm run build:mp-alipay
抖音npm run dev:mp-toutiaonpm run build:mp-toutiao
百度npm run dev:mp-baidunpm run build:mp-baidu
快手npm run dev:mp-kuaishounpm run build:mp-kuaishou
QQnpm run dev:mp-qqnpm run build:mp-qq
京东npm run dev:mp-jdnpm 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、商户号、回调地址、签名不一致

目录