一、源码获取

通过网盘分享的文件：小程序项目.zip
链接: https://pan.baidu.com/s/1xsuwmhIpiuX0VHUsPmAdQA?pwd=aaaa 提取码: aaaa

二、部署详细步骤

2.1.项目目录

2.2 实施步骤

2.2.1 导入项目

桌面 ——> 微信开发者工具快捷图标 “左键双击”  打开微信开发者工具（第一次打开可以选择使用管理员方式运行）。

进入项目页面就是如图所示的这样

2.2.2 安装sass

进入项目之后 ——> ctrl+`（`是位于Tab键上方的键）——>点击新建终端 ———> 输入命令 “npm i sass”回车 ，安装完毕即可。

注：在安装sass的时候可能会报错，这是因为你并未安装npm包管理器，你可以在csdn中搜索 npm 的安装教程，安装完npm之后，再去尝试执行这条命令即可。

2.2.3 更换云环境(如果之前没有用过云开发，可以免费体验一个月)

点击云开发 ——>进入云控制台——>复制 环境ID ——>找到项目目录中的app.js,将env的值更换成自己的云环境。

2.2.4 创建数据集

进入云控制台——>点击上方功能栏中的“数据库”

点击加号建立数据集

创建以下五个集合:

存储用户的信息数据集 users

轮播图片资源的数据集 lunbotus

存储九宫格图片资源的数据集 jiugongges

存储商品信息的数据集 goods

存储下架商品信息的数据集 downs

最终效果，每一数据集权限一定要是第一个。

2.2.5 创建云存储文件夹并导入图片资源（云存储上传方式支持代码上传和拖动上传两种方式 ）。

新建以下四个文件夹：

存储用户头像的文件夹 avatar

存储商品上传的图片资源文件夹 images

存储九宫格资源的文件夹 jiugognge

存储轮播图的文件夹 lunbotu

创建完成的效果：

上传素材：

轮播图和九宫格图片资源,我放到了项目资料里，可以进行手动拖动上传到云存储（拖住上传之前需要先点击上传文件夹按钮）

这里演示九宫格资源上传过程：

（1）点击进入jiugongge文件夹下

（2）找到项目文件里的图片资源文件夹，点击图片资源文件夹

（3）再点击jiugongge文件夹

最后选中文件夹中所有图片，拖拽上传至云存储里的jiugongge文件夹里

轮播图亦是如此，这里就省略了。

上传后效果：

2.2.6 将上传到云储存的资源路径，存入到对应的数据集里。

轮播图资源File ID存储到数据集步骤

（1）先复制上传的轮播图资源的FileID，后续几个都是如此

（2）复制成功之后，切换到数据库，找到lunbotus数据集，点击添加记录，并确定

（3）点击添加字段，创建 fileID字段 ，并将 复制的 图片资源的 File ID 粘贴在里面

（4）后续轮播图的其他两张图片资源File ID存储到数据集也都是这个步骤。

最终效果：

九宫格资源File ID存储到数据集步骤（切记只存储前6个图片资源，并且要多创建两个字段，一个id字段，类型为number,取值从1-6，还一个name字段，值依次为 书籍资料、电子设备、学习用品、体育用品、生活用品、服饰配饰）

步骤和轮播图图片资源File ID存储到数据集的步骤一样这里略过了，但是一定注意这里多了一个id字段和name字段 ，别漏了。

最终效果：(切记只需要弄1-6，即可)

接着、到index.wxml中找到  男生专区、女生专区

并将云存储里的九宫格的第七张图片资源的 下载地址  替换成   男生专区 image标签src属性中的值。

复制第七张图片资源的下载地址

替换掉男生专区 image标签属性src的值

女生专区，用第八张图片资源下载地址替换即可。

最终效果：

到此就结束了，恭喜你。