前言
效果图如下:
1.首页(宫格式展示)
2.首页(列表式展示)
3.发布动态
4.查看动态
5.评论
6.发布物品
7.浏览物品
8.我的
9.我的发布
10.我的动态
11.联系客服
12.修改资料
13.后台管理系统
一、需求规定
念起琴心划分为用户子系统和管理员子系统(CMS),念起琴心的用户平台和管理员平台的具体功能如下。
用户:
1)、用户可以进行注册、登陆
2)、用户能够在小程序上发布自己的商品信息
3)、用户能够在小程序上浏览其他用户发布的商品信息
4)、用户可以在小程序上搜索自己所需的商品
5)、用户能够在小程序上管理自己的个人信息
7)、用户可以在小程序上管理订单
8)、用户可以收藏其他用户发布的商品
9)、用户可以发表表白、组队、寻物相关的动态
10)、用户可以给其他用户发表的动态进行评论
11)、用户可以给其他用户发表的动态进行点赞
12)、用户可以在小程序上管理自己发布的商品
13)、用户可以在小程序上管理自己发表的动态
管理员:
1)、管理员可以进行登陆
2)、管理员能够在小程序上发布公告
3)、管理员能够在小程序上管理订单信息
4)、管理员可以在小程序上管理用户信息
5)、管理员能够在小程序上管理商品信息
6)、管理员能够在小程序上管理动态信息
二、运行环境
操作系统:Android、iPhone、Harmony OS
Web 服务器:微信CMS平台
数 据 库:微信小程序云开发数据库
三、基本设计概念和处理流程
3.1系统模块划分
3.2系统模块图
3.3系统模块流程图
登录模块流程图如下:
四、接口设计
4.1用户接口
在用户界面部分,根据需求分析的结果,用户需要一个用户友善界面。在界面设计上,应做到简单明了,易于操作,并且要注意到界面的布局,应突出的显示重要信息。可以使用网页设计工具直接拖曳出美观、简单、友善的用户接口。其中针对图书信息浏览的界面要做到操作简单,易于管理。同时,运行出错时应以标准形式给出出错提示。总的来说,系统的用户界面应作到可靠性、简单性、易学习和使用。
4.2内部接口
小程序基于微信提供的接口进行开发,后端采用云开发,包括云存储、云函数、云数据库,管理员利用微信提供的CMS进行内容管理
五、开发文档(部分)
注:若展示全部开发文档则篇幅过长,故该部分仅展示部分开发文档
5.1开发工具
微信官方提供的微信开发者工具来开发该微信小程序《念起琴心》
5.2 tabBar页面
在 pages 目录中,创建好物(index)、动态(share)、发布(publish)、我的(my) 这 4 个 tabBar 页面,然后配置tabBar效果
"color": "#ccc",
"selectedColor": "#ccc"
修改导航条的样式效果
//规定
"window": {
"backgroundColor": "#6feccc",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#6feccc",
"navigationBarTitleText": "念起琴心",
"navigationBarTextStyle": "white"
}
5.3 好物
5.3.1 轮播图
1.实现步骤:
(1)在data中定义轮播图的数组
(2)定义获取轮播图数据的方法(操纵云数据库)
(3)在onLoad生命周期中调用获取轮播图数据的方法
(4)渲染UI结构
(5)美化UI结构
2.封装wx,$showMsg()方法
(1)在 main.js 中,为 uni 对象挂载自定义的 s h o w M s g ( ) 方 法 : ( 2 ) 今 后 , 在 需 要 提 示 消 息 的 时 候 , 直 接 调 用 u n i . showMsg() 方法: (2)今后,在需要提示消息的时候,直接调用 uni. showMsg()方法:(2)今后,在需要提示消息的时候,直接调用uni.showMsg() 方法即可
5.3.2 公告栏
- 通过npm安装vant组件库
- 在app.js文件中配置vant
- 在app.json中引用van-notice-bar组件
- 在index.js文件的data中先定义indexTip
- 定义获取公告的方法,然后挂载到onShow这个方法中以减少代码冗余
- 渲染UI结构
- 美化UI结构
5.3.3 顶部搜索
- 顶部搜索的结构
(1)渲染顶部搜索的UI结构
(2)美化顶部搜索的UI结构
(3)为顶部搜索区域添加点击事件 - 开始实现搜索建议的功能
(1)渲染搜索建议的基本结构
(2)实现搜索框自动获得焦点的
(3)实现搜索框的防抖处理
(4)根据关键字查询搜索建议列表
3.搜索历史
(1)渲染搜索历史的基本结构
(2)实现搜索建议和搜索历史的按需展示
(3)将搜索关键字存入historyList中
(4)解决关键字前后顺序的问题
(5)解决关键子重复的问题
(6)将搜索历史持久化保存到本地
(7)清空搜索历史
(8)点击搜索历史跳转到物品列表页面
5.3.4 分类导航
- 获取分类导航的数据
(1)定义data
(2)定义获取分类导航的数据的方法 - 渲染分类导航的UI结构
(1)定义分类导航的UI结构
(2)美化分类导航的UI结构 - 定义类别选择的方法
5.3.5 宫格显示
- 获取宫格显示的列表数据
(1)定义data
(2)定义获取商品列表的方法
(3)将获取商品列表的方法挂载到onShow中
2.渲染宫格显示UI结构
(1)定义UI结构
(2)美化UI结构
- 标题
- 照片
- 价格
5.3.6 列表显示
- 获取列表显示的列表数据
(1)定义data
(2)定义获取商品列表的方法
(3)将获取商品列表的方法挂载到onShow中
2.渲染列表显示UI结构
(1)定义UI结构
(2)美化UI结构
- 图片
- 标题
- 价格
5.3.7 切换物品列表
- 定义changeCard方法
(1)将this定义成全局变量that
(2)定义flag
(3)条件语句通过flag判断选择的状态按需展示
5.3.8 下拉刷新
- 定义onPullDownRefresh方法
- 监听页面的onPullDownRefresh事件处理函数
- 接收回调函数并按需调用
5.4 动态
5.4.1 分类导航
- 渲染分类导航的UI结构
(1)定义分类导航的UI结构
(2)美化分类导航的UI结构
5.4.2 列表
1.渲染动态列表的UI结构
(1)定义动态列表的UI结构
(2)美化动态列表的UI结构
- 头像
- 昵称
- 时间
- 内容
- 点赞
- icon
- 数量num
- 评论
- icon
- 数量num
2.获取动态列表的数据
(1)定义data
(2)定义获取动态列表数据的方法从数据库获取动态列表的数据
(3)将数据通过插值表达式渲染到UI结构中
3.上拉加载更多
(1)初步实现上拉加载更多
(2)定义获取数据的方法,将新获取的数据拼接到旧数据的后边
(3)通过节流阀防止发起额外的请求
(4)判断数据是否加载完毕
5.4.3 发布动态
- 渲染发布悬浮球得UI结构
(1)定义悬浮球得UI结构
(2)美化悬浮球得UI结构
(3)为悬浮球添加点击事件 - 通过点击事件跳转到动态发布页面
- 渲染动态发布页面的UI结构
(1)定义动态发布页面的UI结构
(2)渲染动态发布页面的UI结构
(3)定义获取动态发布页面数据的方法
(4)将获取到的数据添加到云数据库
(5)将云数据库的数据渲染到页面中
5.4.4 发布物品 - 渲染动态发布页面的UI结构
(1)定义动态发布页面的UI结构
(2)渲染动态发布页面的UI结构 - 定义获取动态发布页面数据的方法
(1)将获取到的数据添加到云数据库
(2)将云数据库的数据渲染到页面中
5.4.5 我的发布、好物收藏、我的动态
注:这三个页面的实现方法一致
1.渲染页面结构
(1)定义UI结构
(2)美化UI结构
2.定义方法从数据库获取数据
3.将获取到的数据渲染到页面上
5.5 内容管理(CMS)
5.5.1 内容模型