云开发电商模板-点击安装模板

一键创建零售商城

说明

云开发电商模板提供了一键创建零售商城小程序的能力。

能力总览

云开发电商模板提供了一系列定义好的适配电商场景的数据库集合，并且我们还提供了配套的微信小程序模板，可以在https://gitee.com/TencentCloudBase/Cloudbase-Examples/tree/master/miniprogram/tcb-shop进行下载使用。总体来说，我们提供了以下的数据库集合与小程序页面：

社区

欢迎添加企微群沟通交流：

快速上手

在本章，我们将演示如何初始化本模板，并且启动配套的微信小程序。

1. 安装本模版
2. 下载云开发电商模板小程序源代码，并导入至微信开发者工具。请注意本小程序对应的项目路径为Cloudbase-Examples/miniprogram/tcb-shop

1. 编译启动小程序，开始体验。注意：此时小程序将会默认使用体验数据纯本地运行，不会调用后端能力。配置详情请参考下一小节：「小程序上线前的准备」

小程序上线前的准备

安装了云开发电商模板对应的小程序后，默认会使用体验数据运行小程序。 体验数据使用纯本地 Mock 数据的方式实现，所有数据的使用与交互都不会与真实后端联动。 本模板提供的后端能力需要手动配置切换后即可使用，运行完整的拥有后端能力的小程序。本小节将会介绍小程序上线前需要做的一系列准备：

1. 填入开通了云开发环境的小程序的 appId

1. 在 app.js 中，填入云开发环境 id

1. 前往小程序微信支付模版，填入该模版所需参数。若未填入，将无法使用支付功能，其他功能可正常体验

1. 设置数据模型关联关系4.1 关联「电商SPU」与「电商SKU」：在「电商SPU」数据模型中，将各项 SPU 的 SKU 关联起来，如将「马甲」的 SKU 设为「薄马甲」和「厚马甲」，其他 SPU 同理
2. 4.2 关联「电商SPU属性名」与「电商SPU属性值」：在「电商SPU属性名」数据模型中，将各项属性名与属性值关联起来，如将「数量」的属性值设为「1 个」和「2 个」，其他属性名同理
3. 4.3 关联「电商SKU」与「电商SPU属性值」：在「电商SKU」数据模型中，将各项 SKU 与属性值关联起来，如将「薄马甲」的属性值设为「薄」，其他 SKU 同理。描述中带有「普通」二字的 SKU 不设属性值，如「普通面粉」
4. 4.4 关联「电商SPU分类」：在「电商SPU分类」中，设置父分类与子分类的关联关系，将「衣物」的子分类设为「上衣」；将「美食」的子分类设为「水果」与「面点」
5. 4.5 关联「电商SPU分类」与「电商SPU」：在上一步我们设置了分类之间的父子关系，现在我们为其中的子分类添加 SPU，将「水果」的 SPU 设为「桔子」和「荔枝」；「面点」与「上衣」分类同理
6. 将小程序切换至真实数据，把 config/index.js 中的 cloudbaseTemplateConfig.useMock 设置为 false。 注：切换为使用真实数据需要完成前 4 步。切换后若小程序出现异常行为，请检查前 4 步的配置工作是否正确完成

1. 移除云开发引导6.1 删除 components/cloud-template-guide/ 文件夹
2. 
3. 6.2 删除 pages/home/home.wxml 中对云开发引导的引用
4. 
5. 6.3 删除 pages/goods/category/index.wxml 中对云开发引导的引用
6. 
7. 6.4 删除 pages/cart/index.wxml 中对云开发引导的引用
8. 
9. 6.5 删除 pages/goods/category/index.wxml 中对云开发引导的引用
10. 
11. 6.6 删除 pages/usercenter/index.wxml 中对云开发引导的引用
12. 
13. 6.7 删除 app.json 中对云开发引导的引用
14. 

数据模型

云开发电商模板附带了一系列的数据模型。对于数据模型的能力说明，请查看云开发数据模型。

本模版附带的数据模型有：

名称标识描述电商SPUshop_spu一件商品，对应电商概念中的 SPU，即 Standard Product Unit。电商SPU分类shop_spu_cate商品分类，每个商品分类都可以有自己的子分类、父分类和对应的商品。电商SPU属性名shop_attr_name商品的属性名，如数量。电商SPU属性值shop_attr_value商品的属性值，如数量对应的值可能为「1 件」、「10 件」。电商SPU评价shop_comment用户对商品做出的评价。电商SKUshop_sku一件有具体属性的商品销售单位。每个 SPU 都可以对应多个 SKU。举例来说，A 品牌的平板电脑为 SPU，其对应的 SKU 为 A 品牌的 16GB 内存、白色的平板电脑。电商购物车项shop_cart_item电商订单shop_order电商订单项shop_order_item电商收货信息shop_delivery_info电商首页轮播图shop_home_swiper_image

应用配置说明

配置商品

配置SPU

在「电商SPU」数据模型中，填入 SPU 数据。这里我们添加一行「荔枝」的 SPU 数据：

配置SKU

添加完 SPU 后，我们还需要为其添加 SKU 数据。SKU 可以理解为具有具体规格/属性的 SPU，比如荔枝的属性可以有数量、大小等等。不同数量、不同大小的荔枝会有不同的价格、不同的库存。

首先，我们为荔枝配置属性选项。

在「电商SPU属性名」数据模型中，我们添加一行「大小」属性：

添加完属性名后，我们还需要为此属性名配置属性值。

我们在「电商SPU属性值」配置两个属性值，分别是大、小：

至此，我们配置好了「大小」这个属性名，这个属性名下有两个可选的属性值，分别为「大」和「小」。

现在，我们可以为「荔枝」SPU 添加 SKU 了，分别是「大荔枝」和「小荔枝」，他们的价格互不相同：

配置商品分类

每个 SPU 可以有多个分类，分类下也可以有子分类。现在我们来为荔枝添加二级分类，分别是「美食」->「水果」。

我们在「电商SPU分类」数据模型中添加「美食」分类：

然后再添加「水果」分类，添加时把父分类选为「美食」，并在 SPU 中添加「荔枝」：

配置首页轮播图

首页轮播图会展示「电商首页轮播图」数据模型的第一行数据中的图片：