前言

该作品曾获中国大学生计算机设计大赛二等奖、山东省大学生软件设计大赛二等奖

效果图如下：

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 对象挂载自定义的 $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 内容模型在这里插入图片描述