- #小程序云开发挑战赛#-大学校园闲置物品交易平台-HANG_IN_THERE
项目名称:大学校园闲置物品交易平台 1. 应用场景 作为一个大学生,经常会有一些闲置的物品需要处理,物品仍有使用价值,直接扔掉有些可惜,只好寻找再次出售的途径;或许也想要买一些物品,但不需要全新的,如二手自行车等。购买出售的途径一般有两个: 二手物品交易平台,如闲鱼等。但是,这种途径并不是十分非常适合大学生,本来就学业繁忙的我们需要抽出时间去寄送包裹,而且如果买到假货后甚至无从申诉,权益可能受到损害。 校内的各种闲置物品交换群(QQ,微信):此类途径具备了一定的安全性,而且方便快捷,因为都是本校的学生线上联系后线下交易。但是仍然存在信息获取效率低下的问题,很难从几百条群消息中准确的找到自己想要的物品,自己发布的商品也可能被群消息淹没。除此之外,信息的时效性很难得到保障,看到发布的商品后,很可能那件商品已经出售,需要要麻烦卖家亲自删除消息或说明商品已卖出。 针对上述途径存在的问题,我们设计了“大学校园闲置物品交易平台”的微信小程序,使用学生验证(暂未完成)、各大学相互隔离、线下交易的方式确保安全性,提供线上发布、商品列表与商品详情展示、商品检索的功能以保障较高的消息获取效率,采用商品问答、商品状态自动更新的方式确保信息的时效性。在大学校园闲置物品交易平台中,大学生能够在不涉及线上支付的情况下安全快捷地出售与购买二手物品。 2. 各页面功能展示(效果截图) 视频展示链接:https://v.qq.com/x/page/x31519ac9h3.html 2.1 商品列表与搜索 [图片] 首页为商品列表展示界面。 首页上方显示用户所在大学与搜索框,搜索框下方为大屏轮播图(暂未完成),可用来展示商品或广告。 轮播图下方为商品分类栏,包含了大多数常用分类,用户可以浏览自己感兴趣的分类。 主体部分为商品列表展示卡片,展示商品图片、标题、简介、状态、价格及数量。列表展示采用分页加载,每次加载10条商品信息,下滑到底部后,会自动加载下面10条商品信息,直到加载完所有商品。 搜索后的商品展示与首页的展示方式类似,采用模糊搜索,查询匹配到的商品的标题。 2.2 商品详情页与商品问答 [图片] 点击商品卡片后,进入商品详情界面。 界面上方为商品详情图片的轮播图,点击图片可以查看具体的图片,左右滑动查看列表中所有图片。 详情图下方为商品详情信息,包括标题、状态、价格、简介、数量、备注及原始购买链接。 详情信息下方为商品的问答区,可以在此询问卖家关于商品的问题,卖家可以在此回复用户。 [图片] 点击提问/回复后可以发表提问/回复内容,并在问答区展示。 商品问题仍然采用分页加载模式。当问题的回复超过2条时,回复卡片将自动折叠,点击查看全部回答可以跳转至问题详情界面,采用分页加载的模式展示所有回复。 2.3 商品发布 [图片] 点击底部Tab Bar的加号可以进入商品发布界面,上传前会进行表单验证,防止非法的数据存入数据库。上传时会让用户选择是否接受新交易推送,无论是否同意均不影响商品上传。上传成功后会自动跳转到商品列表界面,用户可以看到自己刚发布的商品。 2.4 发起交易与交易操作 [图片] 点击商品详情界面的发起交易后,若商品能够被购买,则进入确认交易界面。用户可以选择商品数量(不超过库存),查看总价格,最后点击确认交易。 若商品能够被购买,则更新商品库存,有必要的话更新商品状态,生成交易详情,跳转至交易详情界面。 至此,线上的活动暂告一段落,点击查看对方联系方式,通过对方的联系方式自行进行线下交易,结束后,当双方都点击确认交易完成后,交易结束。若任一方想要中止交易,直接点击取消交易即可。进行中的交易若无人点击确认完成,将在7天后状态自动变为已完成。 2.5 用户信息管理 [图片] 点击底部Tab Bar我的,可以进入管理界面。 点击头像/昵称/学校或在我的信息中,可以编辑个人信息,修改昵称、微信QQ联系方式与大学。 2.6 交易与商品管理 [图片] 在“我的交易”与“我发布的商品”中,可以查看交易详情,进行交易操作,或者查看发布的商品,选择删除商品。加载方式均为分页加载。 2.7 新交易推送 [图片] 为了提醒卖家有人购买其发布的商品,小程序加入消息推送功能。在发布商品时,会让用户选择允许接受新交易通知。点击允许后,若有人对卖家发布的商品成功发起交易,卖家便会收到消息推送,点击推送内容可直接查看交易详情,进行交易操作。 由于微信小程序对于用户隐私的保护,个人小程序的消息订阅仅是一次性的。若想再次收到交易推送,则需要在“我的”界面中点击“接受新交易推送一次”。 2.8 其他 其他界面包括index页、用户注册页、小程序介绍页等等,均为辅助功能,在此不再赘述。 3. 项目架构 下面时此项目的详细架构,对此项目感兴趣的小伙伴可以仔细阅读,如有不妥,敬请指正。 3.1 总体架构 [图片] 本项目以云开发为核心,主要包括:云函数,云数据库,云存储,云调用和HTTP API(暂未完成)五个部分。除了云开发外,还有小程序端,后台管理系统(CMS),第三方服务器等部分。 云函数: 接收小程序端发来的请求 接收CMS通过HTTP API发来的请求(暂未完成) 访问云数据库和云存储获取数据,然后发送回复 使用云调用,如消息推送 向第三方服务器发送请求,如用于学生验证的学校服务器(暂未完成) 云数据库: 被云函数访问 通过HTTP API被访问(暂未完成) 云存储: 被云函数访问 通过HTTP API被访问(暂未完成) 云调用: 通过云函数被调用 访问腾讯云服务,如消息推送 HTTP API(暂未完成): 被后台管理系统调用 调用云函数,访问云数据库,云存储 小程序端: 只访问云函数获取服务 后台管理系统(暂未完成): 只访问HTTP API获取服务 下面将对上述架构的每一部分进行详述。 3.2 云数据库表结构 [图片] 由于项目较大,涉及到的实体较多,故先画出该项目的ER Model(为了便于展示,略去了attribute)。实体共有8个:用户,大学,商品,商品分类,商品问题,问题回复,交易,轮播图(暂未完成)。上述实体的关系如图片所示。 根据模型图,可以在云数据库中建立8张数据表,对于特定的键建立索引。本项目,除了图片以外,删除方式都是软删除,故添加[代码]is_deleted[代码]字段。 [图片] 3.3 小程序端架构 [图片] 小程序端共分为以下几个部分:用户模块、商品模块、交易模块、工具类、学生验证(暂未完成)、云函数统一接口、缓存管理、组件库和CSS库。 用户模块:包括用户注册、学生身份验证和用户信息管理。 商品模块:包括商品列表、商品搜索、商品详情、发布商品、商品提问、提问回复和商品管理。 交易模块:包括发起交易、交易操作和交易管理。 工具类:返回内容格式化、时间展示格式化、表单验证。 学生验证(暂未完成):对于特点操作,访问云函数之前先验证学生身份。 云函数统一接口:将云函数返回的数据加工成合适的格式,直接供页面逻辑层使用。 缓存管理:将商品列表,用户信息,商品分类等数据缓存在本地,提高小程序性能,合适的时候清除缓存,重新访问云函数统一接口。 组件库:为了加快开发速度,专注云开发功能,本项目使用vant-weapp组件库。 CSS库:为了小程序的样式更加美观,本项目使用Color-UI库。 3.4 云函数结构 [图片] 本项目一共创建了10个云函数,大多与云数据库中的数据表一一对应。由于业务功能较多,所以使用[代码]tcb-router[代码]进行路由转发,增加服务的数量。每个云函数中的方法不再赘述,见其名就可知其意,都是基本的CURD操作。 需要说明的是: [代码]subscribeMsg[代码]函数:使用云调用,向用户推送消息(新交易提醒)。 [代码]del_trigger[代码]函数:定时触发器,每天定时删除一定时间之前的商品、问答、交易等。 [代码]transaction[代码]函数中的发起交易、取消交易、确认交易完成,以及[代码]commodity[代码]函数中的删除商品,这几个操作均涉及到多个数据表的改动,为了保障ACID(atomic, consistency, isolation, durable),都应采用数据库事务去完成数据库的操作。 3.5 云存储结构 [图片] 云存储中主要存放商品的缩略图和详情图的[代码]fileIDs[代码]、小程序背景图片及轮播图(暂未完成)。 3.6 云调用 [图片] 本项目的云调用主要是实现消息推送的功能,先在小程序端获取卖家的授权,然后由买家触发推送消息的云函数。 3.7 HTTP API,后台管理及第三方服务器(暂未完成) 由于参加比赛时间较晚,再加上临近开学,时间仓促,故无法完成该平台后台管理系统的搭建。待时间允许,将考虑建立后台管理系统,方便快捷地管理商品、用户、交易、轮播图的数据,通过HTTP API访问云函数,复用写好的方法,或者直接访问云数据库和云存储。 关于第三方服务器的学生验证功能,暂时还无法实现。 4.代码链接 github地址: https://github.com/2horse9sun/University_O2O 点个star吧! 5. 体验二维码 由于该项目涉及到信息发布内容且是个人开发,故无法上线,只有体验版。 希望日后能争取上线投入使用吧。 6.团队作者简介 我们是大二升大三的大学生,爱好旅游、美食、看书。希望能够和大家在github上交流技术、结识朋友。
2020-09-17 - #小程序云开发挑战赛#-虾麦-动感JY
项目背景 作为一个留学生,加了学校中国人间大大小小的微信群,有学校的,有系里的,有同一个小区的,还有狼人杀群。 每到学期末就有不少毕业或者要搬家的同学在群里发自己的二手物品信息。小到文具,大到汽车,大家都想让自己的物品卖个合理的价格,给它们找个合适的新主人。 有的人发纯文字,有的人发文字和图片,还有的同学用备忘录非常辛苦地做了长图。“不好意思打扰一下”,他们这样开头,然后连着在三五个群里发了同样的信息。可惜的是这些信息很容易就被各种聊天给刷过去了,于是过了几小时或是一两天,他们又发了一遍。这次长图也许有了小小的变化:有的图片上手绘了个叉表示东西已经卖出去了。 做长图很麻烦,群发很麻烦,还要为了卖出东西一遍遍群发,担心被同学反感。 应该要更优雅,更方便,更轻松地做这件事。 这就是我开发“虾麦”的原动力。 应用场景 希望和微信群中自己“认识的人”以及“认识的人的认识的人”进行二手闲置物品交易时 举例 换宿舍,搬家时有一些完全还可以用扔了可惜但是不打算带到新地方的家具摆件 留学生毕业卖车 想从学姐学长处购买二手教科书,或者想处理自己用过的教科书 有闲置的物品想和同小区的住户交易,避免邮寄等麻烦 在其他平台上看二手,看闲置,但是总觉的买家/卖家是个完全的陌生人有点不放心,想要找更能让自己信任的卖家/买家 目标用户 留学生,大学生,同一小区的业主等原来在微信群进行二手闲置物品信息发布和浏览的人。 项目亮点 一般二手交易平台都是从物品入手,虾麦最重要的则是人和人之间通过微信群形成的关系网络。熟人经济模式非常适合二手,尤其是大件二手闲置物品的交易。 实现思路 微信小程序中分享时可以通过shareTicket获取点击分享卡片的人所在的群id信息。通过相同的群id就可以获取用户各个群的群成员们所发布的物品。 在微信群中进行二手信息发布时很多人会做一张长图介绍物品。排版,添加文字,根据卖出去的情况进行修改费时费力。通过wxml-to-canvas,虾麦可以一键生成长图进行分享。 前端用了Lin-ui的组件。后端利用微信小程序的云开发能力,部署云函数进行数据库CRUD,获取openid,opengid等操作。 调用openapi.security.msgSecCheck和openapi.security.imgSecCheck检查文字图片是否合规。 架构图 [图片] 效果截图 用户主页 [图片] 微信群物品 [图片] 物品页面 [图片] 我的收藏 [图片] 一键生成海报 [图片] 海报 [图片] 代码链接 https://github.com/oliwang/xiamai-wechat-miniapp 介绍视频 https://v.qq.com/x/page/a3153ll5hu6.html 作品体验二维码 [图片] 未来开发计划 搜索功能 根据地理位置看到附近的物品方便面对面交易 item页面中添加同一个卖家的物品推荐和相似物品推荐增加物品曝光量 团队/作者简介 Olivia Wang 计算机研究生在读 最近有在做播客「编程百物语」,这是一档揭开编程的神秘面纱,分享真实的编程体验的播客节目。无论是新手的疑惑还是老手的经历我们都聊聊看。 https://codingmyths.github.io/
2020-09-20 - #小程序云开发挑战赛#-校园二手购-大王叫我来巡山
项目名称:校园二手购 项目介绍:我们开发的小程序名字叫做校园二手购,是一个专注于服务广州大学学生的平台。我们都知道,身为大学生,生活费有限,而有很多东西都是在大学生活中必须的。所以有很多学生乐意将目光投向二手交易平台。而我们的小程序,就是为了方便广大学生用户,不用在贴吧等地方发布二手交易,而是有一个官方的、专门的平台来提供给学生。小程序的使用者可以在校园二手购平台上发布闲置的物品,以供大家购买。用户可以浏览全部发布的商品,在自己喜欢的商品下面留言以取得和售主的联系,在双方都谈妥之后,就可以进行线下交易。用户可以在小程序上使用修改自己的个人信息,查看我的发布,查看我的收藏,查看我的足迹,查看新留言,申请学生认证等功能。还可以在首页上查看最火热的商品的排行榜,各种便宜好货,以及常见问题。本项目致力于为广州大学学生提供一个可以进行二手交易的平台,方便广州大学的学生进行各种二手物品的交易,让闲置的物品可以得到充分的利用,减少浪费。 目标用户:广州大学学生 应用场景:广州大学学生进行二手物品交易 实现思路:用户初次进入小程序就位用户随机取一个用户名和头像上传到user表,直到用户授权登录之后把信息修改为用户的微信信息,以实现用户的管理。用户在发布了商品之后,把商品的信息上传到goods表,以实现对商品的管理,这样就实现了最重要的两个部分的管理,其他的操作都是基于这两个表去进行的。 作品体验二维码 [图片] 联系方式:13030204802,13533203394 团队简介:本项目完全由广州大学两位在校学生开发完成。 架构图: [图片] 效果截图 首页:首页最上方的栏目是搜索栏,用户可以通过此搜索栏目来进行商品的检索下一个图片展示栏。 下一个图片展示栏。能够提供用户一个清晰的窗口,点击进去还能够看到商品的详情介绍。 第二个是菜单栏,方便用户进行各种常见操作。 第三我们还可以在商品推荐里面进行商品的简单分类。 [图片] 搜索:首页最上方的栏目是搜索栏,用户可以通过此搜索栏目来进行商品的检索 [图片] 商品详情:显示商品的详细信息,以及留言板块 [图片] 发布:用户发布商品可以有两种方式,第一种是直接点击底部的发布按钮,第二种是点击首页的发布按钮,都可以进去发布页面。 [图片] 分类:用户如果想要获取更多的商品分类的话,可以点击底部的菜单栏进去分类,进行分类商品的浏览 [图片] 便宜好货:用户可以在这里获取推荐的好货。 [图片] 热度排行榜:用户可以在这里获取热度排行前10的物品。 [图片] 用户页面:最重要的一个页面则是“我的”页面,点击底部菜单栏即可进去。 [图片] 我的发布:在我的发布页面,用户可以左滑商品进行商品状态的更改,如果商品状态改为已售出的话,那么这个商品就不会在主页上显示,用户还可以 删除已经发布的商品。 [图片] [图片] [图片] 我的收藏: 在我的收藏页面,用户可以看到已经收藏的商品,同理,用户可以左滑,取消收藏商品 [图片] 我的足迹:用户还可以进去我的足迹,看到浏览过的商品 [图片] 新留言: 用户可以进入新留言页面,来查看发布的商品是否有新的留言或者回复 [图片] 个人资料:还可以修改个人资料,还提供了积分机制,以便在将来进行功能的扩展 [图片] 学生认证:进行学生认证,以识别是否是本校学生。 [图片]
2020-09-20