操作步骤
步骤1：创建项目所需页面
首先进行需求分析：
一个商城至少需要一个首页用来给用户展示商城有的商品。
一个商品详情页用来介绍单个商品的信息。
一个购物车用来给用户存放自己想要的商品。
所以我们需要在小程序项目配置文件
app.json 中编写 pages 中的内容，输入相应的路径后，开发者工具就会生成对应路径上的页面文件。"pages":["pages/index/index","pages/cart/cart","pages/detail/detail"],
步骤2：配置商城的导航栏
生成 步骤1 页面后，需要将页面添加到导航栏中，方便用户使用。 在
app.json 里，添加一个 tabBar 属性，因为商城的两大块分为首页和购物车。所以在 tarBar 里的 list 属性添加两个按钮，并将它们的页面地址、标题、图标配置好。"tabBar": {"selectedColor": "#f00","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "./汤圆酱/1.jpeg","selectedIconPath": "./汤圆酱/3.jpeg"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "./汤圆酱/2.jpeg","selectedIconPath": "./汤圆酱/4.jpeg"}]}
效果图如下：
步骤3：配置云开发环境
1. 进入微信开发者工具 > 云开发控制台页面，复制环境 ID。
2. 在
app.js 里面调用 API，wx.cloud.init 传入云开发控制台中的云环境 ID，方便项目调用控制台中的数据和资源。// app.jsApp({onLaunch: function () {wx.cloud.init({env:'xxxxx' //输入您的环境 ID})},globalData: {userInfo: null}})
步骤4：创建数据库
将商城的商品使用数据库来存储，方便后面页面使用数据库进行商品的展示。
1. 进入微信开发者工具 > 云开发控制台 > 数据库页面。创建 carts、goods 和 orders 三个集合。
2. 进入 goods 集合，单击添加记录添加一些初始信息，每个数据记录的属性如下：
count：商品数量。
imageSrc：商品图片，从云存储中获取。
price：商品价格。
tags：商品类别标签。
title：商品名称。
说明
商品图片要在云存储中先导入才能生成图片的位置，便于开发时图片数据的调用。
步骤5：云存储导入图片
1. 进入微信开发者工具 > 云开发控制台 > 存储页面。
2. 单击新建文件夹并命名为 goods。
3. 进入 goods 文件夹，单击上传文件并传入所需要的图片，这些文件可以使用 FileID 在项目中进行调用。
步骤6：创建云函数
1. 在目录中创建云函数的文件夹 cloudfunction，然后在 project.config.json 中设置云函数的 cloudfunctionRoot 属性值为
cloudfunction/。2. 当文件夹 cloudfunction 目录下的文件变成绿色，就代表云函数的初始化完成。可右击文件夹单击新建 Node.js 云函数，即可创建一个云函数。创建结果如下图：
