wechat-app-mall 是一套功能完整、长期维护的微信小程序电商解决方案,内置直播带货、会员体系、优惠券、积分等营销能力,配合「api工厂」后端可快速上线一个可用的商城。项目由 EastWorld 维护,基于 vant-weapp、mp-html、ECharts 等主流小程序组件构建,开箱即用。
一、项目官方信息
| 项目 | 信息 |
|---|---|
| GitHub 仓库 | https://github.com/EastWorld/wechat-app-mall |
| 后端服务(api工厂) | https://admin.s2m.cc |
| 开源协议 | Apache-2.0 |
| 主要语言 | JavaScript(约 98.4%) |
| Star 数 | 约 22.0k |
| 平台 | 微信小程序 |
项目特性:完整商城功能(商品展示、购物车、订单管理、支付闭环)、直播带货模块、VIP 会员/优惠券/积分营销工具,以及持续迭代的长期维护。
二、官方图片
官方示例小程序码(微信扫一扫即可体验完整商城功能):

三、环境要求
- 微信开发者工具(Stable 版)。
- 一个已注册的微信小程序 AppID。
- 后端:api工厂(https://admin.s2m.cc)提供的数据服务;正式上线需要把接口域名配置到小程序后台 request 合法域名。
- 真机:微信客户端最新版用于预览。
- 不依赖 Node 构建链(原生小程序工程,依赖通过开发者工具 npm 构建)。
四、完整部署步骤
1. 下载源码
git clone https://github.com/EastWorld/wechat-app-mall.git
或在 GitHub 页面下载 ZIP 解压。
2. 用微信开发者工具导入
打开微信开发者工具,选择「导入项目」,目录指向解压后的 wechat-app-mall 文件夹,填入你自己的小程序 AppID。
3. 配置后端接口域名
项目默认对接 api工厂 后端。按官方教程 https://www.it120.cc/help/ikfe2k.html 注册并创建自己的数据空间,然后在项目配置里把默认的演示域名 mall 替换为你自己的后端域名(AppID 对应的接口域名)。
4. 配置合法域名
登录微信小程序管理后台,在「开发 → 开发管理 → 开发设置 → 服务器域名」中,把 api工厂 提供的接口域名加入 request 合法域名列表,否则真机上无法请求数据。
5. 构建 npm 与编译
如项目使用了 npm 依赖,在开发者工具菜单点击「工具 → 构建 npm」,然后点击「编译」,模拟器即可运行商城首页。
6. 上传与提审
功能调试完成后,在开发者工具点击「上传」,填写版本号与备注;然后在小程序管理后台把刚上传的版本提交审核,审核通过后发布新版本。
7. 升级到最新版
- 备份开发工具中的现有版本;
- 下载最新版程序覆盖本地文件;
- 把接口域名
mall改成自己的域名; - 在开发工具里上传代码并提交微信审核;
- 审核通过后在小程序后台发布。
小程序代码与后台数据相互独立,升级不会丢数据;用户无需重新扫码,重启小程序即可更新。
五、使用方法
商城功能
项目自带完整电商闭环:商品分类与列表、商品详情、购物车、下单、订单管理、支付。会员体系包含 VIP、优惠券、积分。
直播带货
内置直播带货模块,可在小程序内嵌入微信直播组件进行带货销售。
基于的开源组件
| 组件 | 说明 |
|---|---|
| apifm-wxapi | 后端接口请求 SDK 封装 |
| api工厂 | 后端数据服务 |
| vant-weapp | 有赞小程序 UI 组件库 |
| mp-html | 小程序富文本/HTML 渲染插件 |
| wxa-plugin-canvas | 海报生成/朋友圈分享图组件 |
| ECharts for WeChat | 小程序数据可视化图表 |
其他平台版本
抖音/今日头条小程序版本见同作者的 tt-app-mall;另有多个 uni-app、H5 商城模板(见 README 列表)。
六、常见问题 FAQ
1. 导入后首页空白、不显示商品? 后端接口域名还是默认演示地址,或小程序后台没有把接口域名加入 request 合法域名。按教程配置自己的 api工厂 数据空间并加白名单即可。
2. 真机上请求被拒绝? 小程序只允许请求已配置的 HTTPS 合法域名。把 api工厂 提供的域名加入小程序后台服务器域名白名单,并关闭开发者工具里的「不校验合法域名」后再真机测试。
3. 支付功能怎么打通? 商城需要微信支付能力,需在小程序后台开通微信支付并与 api工厂 后端绑定,配置好商户号参数后才能下单付款。
4. 升级会丢数据吗? 不会。代码与后台数据独立,覆盖代码后重新上传提审即可,后台商品、订单、会员数据都保留。
5. 没有后端能直接跑吗? 项目依赖 api工厂 提供后端数据。可先用官方演示域名体验界面,正式使用需在 api工厂 注册自己的数据空间。
6. 遇到问题去哪里查? 官方帮助中心 https://www.it120.cc/help/index.html 支持关键词检索,也可在 GitHub 仓库提 issue。
七、跳转链接
- GitHub 仓库:https://github.com/EastWorld/wechat-app-mall
- 完整配置教程:https://www.it120.cc/help/ikfe2k.html
- 帮助中心:https://www.it120.cc/help/index.html
- 后端 api工厂:https://admin.s2m.cc