说明
零售电商前后台通用模版包含:前端电商小程序,和电商管理后台,可以快速实现商品录入,上下架,订单发货等功能;
小程序端是基于云开发电商小程序二次开发,并通过微搭实现后台管理;

点击"安装模板",快速下载
视频教程
方便大家使用,录制了视频教程,后期会不定期更新

在线案例

业务背景
用于搭建零售电商小程序前端和管理后台,可以快速实现商品录入,上下架,订单发货,微信支付等功能。
功能列表
小程序端

小程序端
后台

快速上手
【重要】检查云存储是否为公有读写,非公有读写会导致模版页面预览看不到云存储的图片/文件内容。如您的环境是免费环境,此处需要切换为付费才能将云存储设置为公有读。

后台安装
1.模版安装
进入模版中心,选择对应模版;如果可视化开发出现应用,说明安装成功;

安装成功
2.配置管理员
进入云后台管理-头像,可以修改登录密码;

pAWd4Rf.png

配置管理员

修改登录信息
3.后台发布
进入应用编辑,选择右上角的应用。发布成功后 即可通过账号密码登录后台管理订单商品;

发布应用

后台登录
小程序安装
1.下载小程序代码
打开网站 ,有开发能力的可以选择git(推荐),不擅长git可以直接下载压缩包并且解压;

下载小程序代码
2.导入项目
打开微信开发工具,选择刚才解压目录里面的tcb-shop-enhance-master文件夹(例如:D:\tcb-shop-enhance-master\tcb-shop-enhance-master),注意目录里面一定是有app.js的文件,填入小程序ID,选择云开发-云开发电商模版,注意小程序必须认证过,否则无法创建环境;

导入微信开发者工具

选择模板
如果第一次使用会引导创建云开发环境,按照一步步操作即可;
注意:创建云开发环境的同时,会生成一个腾讯云账号,这个账号只能通过小程序登录。和之前通过手机或者微信注册的账号是不同的;
3.配置环境参数
3.1 配置环境
在 app.js 中,填入云开发环境 id,保存文件

配置环境
3.2 构建项目
选择npm-构建项目

构建完成选择编译,如果正常小程序可以预览;

编译
3.3 配置支付
前往小程序微信支付模版 ,填入该模版所需参数。若未填入,将无法使用支付功能,其他功能可正常体验

配置支付功能

获取云环境id
4.云函数安装
云函数需要手动安装,项目所需的云函数都在func文件夹里面,必须安装的云函数有3个:get_wxuser_id,update_user,shop_pay;

安装云函数
安装方法:
4.1命令行安装(推荐)
1.安装node,cli工具,具体参见: 。
2.命令行到func目录下,tcb登录后,执行如下代码:
bash
tcb fn deploy 函数名称 -e 环境id
如果不是新建,运行的时候提示是否覆盖,选择y,如果出现以下报错直接忽略,这时已经发布成功;

4.2打包压缩上传安装
- 将对应函数名字的文件夹zip压缩;

- 上传到云函数这里

注意:打包上传的方法,经常失败,还是推荐cli;
5.小程序客服
项目集成了小程序客服功能,需要管理者在后台添加客服微信才能使用;
6.小程序发布
小程序发布时需要删除这两个文件夹,否则会导致体积太大;

后台使用
注意:一定要注意环境,体验环境的数据在小程序端是出不来的;
创建属性名和属性值;
这两个概念参考图片示意,是必须创建的和配置的,否则商品出不来;
通过后台属性名管理和属性值管理可以方便的创建维护;一个属性名对应多个属性值;注意不要轻易删除,否则导致商品无法显示;


2.设置商品分类
不设置商品分类无法在分类页显示;一二级分类关系如图;可以通过商品分类页面设置;


3.商品管理
通过商品管理可以创建商品,以及上下架等操作;

商品编辑新建
新建商品的时候,注意整体传图片不要太大,特别是富文本;
优先级数字你越大,首页显示位置越靠前;

注意商品没有删除操作,是因为避免历史订单出错,不想显示下架即可
sku编辑新建
按图中点击可以添加商品SKU


sku图片会自动带入商品图片,如需调整自行修改;属性值可以选多个,但是同一类别只能选一个,比如一个sku不能同时选薄和厚,可以选薄和1个;

4.订单管理
对于待发货或待收货订单可以选择快递公司和单号;
注意: 1.本系统不能自动下单,需要将收货方人,电话,地址复制到第三方系统如菜鸟,生成运单号,再回填点发货; 2.退货退款等操作可以通过线下完成,如需系统实现请联系作者; 3.如需要实现微信结算对接,有需求请单独联系作者;

点击云模版链接,快速安装
github: Tencent CloudBase
相关推荐: 手把手教你用CloudBase完成电商小程序全栈开发开发者Luke用AI工具链(Claude Code+CloudBas)