一、项目定义
1.1 项目名称
产品名称:高校二手商品交易平台
产品版本:2.20.1
1.2 项目技术栈
前端:wxml、sass、javascript
后端:腾讯云服务
1.3 项目描述
本小程序旨在为高校师生提供一个安全、便捷、高效的二手商品交易平台,用户可以在平台上发布闲置商品信息、浏览其他用户的商品、问题反馈等。目标用户为高校师生,应用场景为校园内二手商品的交易。
1.4 项目定位
(1)定位于校园二手商品交易平台
(2)面向于高校师生
1.5 参考资料
微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/
二、功能需求
2.1 用户模块
- 用户注册/登录:用户在注册登录时通过输入手机号和密码进行身份验证。
- 个人中心:展示用户的基本信息,允许用户通过编辑操作对个人信息进行修改,同时允许用户退出登录。
2.2 商品模块
- 首页商品展示区:推荐区块展示了一部分商家发布的二手商品的信息,同时添加了上划触底加载商品的功能,用户通过上划操作获得更多商品信息。
- 分类模块:用户通过点击商品分类侧边栏的类名进行商品类别的筛选。
- 发布商品: 用户发布商品信息,包含商品标题、描述、图片、价格、库存、商品状态、类别等。
- 搜索商品: 支持关键词搜索、分类筛选等功能。
- 商品详情: 查看商品详细信息、图片、商家联系方式等。
2.3 帮助模块
智能客服:用户通过点击首页的客服图标进入客服页面进行相应问题的咨询与交流。
三、原型设计
3.1 首页
3.2 商品分类页面
3.3 略
3.4 略
3.5 略
四、项目部署
4.1 项目目录
4.2 实施步骤
4.2.1 导入项目
桌面 ——> 微信开发者工具快捷图标 “左键双击” 打开微信开发者工具(第一次打开可以选择使用管理员方式运行)。
4.2.2 安装sass
进入项目之后 ——> ctrl+`(`是位于Tab键上方的键)——>点击新建终端 ———> 输入命令 “npm i sass”回车 ,安装完毕即可。
4.2.3 更换云环境(如果之前没有用过云开发,可以免费体验一个月)
点击云开发 ——>进入云控制台——>复制 环境ID ——>找到项目目录中的app.js,将env的值更换成自己的云环境
4.2.4 创建数据集
进入云控制台——>点击上方功能栏中的“数据库”
点击加号建立数据集
创建以下五个集合:
存储用户的信息数据集 users
播图片资源的数据集 lunbotus
存储九宫格图片资源的数据集 jiugongges
存储商品信息的数据集 goods
存储下架商品信息的数据集 downs
4.2.5 创建云存储文件夹并导入图片资源(云存储上传方式支持代码上传和拖动上传两种方式 )。
存储用户头像的文件夹 avatar
存储商品上传的图片资源文件夹 images
存储九宫格资源的文件夹 jiugognge
存储轮播图的文件夹 lunbotu
轮播图和九宫格图片资源,我放到了项目资料里,可以进行手动拖动上传到云存储(拖住上传之前需要先点击上传文件夹按钮)
如果我们要上传轮播图资源图片,先进入在云存储中创建好lunbotus的文件夹并点击 “上传文件夹” 然后再将项目目录中的轮播图图片拖入到该文件夹中
在云存储中找到第一张轮播图复制他的file ID(第二张、第三张都是这个操作)
在数据库的lunbotus集合中添加记录,一条记录包括两个字段_id和fileID(fileID字段的值就是在云存储中复制的轮播图的file ID)
九宫格以此类推(jiugongges数据集中包括三个字段_id、fileID、name)
现将九宫格图片资源拖入到云存储中,然后将图片的file ID都存到jiugongges数据集中。
上述操作完毕后,编译运行即可。