基于微信云开发的校园二手交易平台小程序的设计与实现

来源:用户上传      作者:陈怡婧，郑晓溪，李芳

　　摘要：基于微信开发者工具搭建校园二手交易平台小程序，利用云开发，完整地实现了二手交易平台各类基本功能。并对其中的关键问题进行了介绍。其特色功能包括：留言、回复信息、商品分类、关键词查找、根据定位选择附近高校等，满足校内二手交易的需求，提升闲置物品的利用率，建立卖家与买家的信任关系，实现可靠的二手商品交易。
　　关键词：微信；二手交易平台；微信开发者工具；云开发；小程序
　　中图分类号：TP311 文献标识码：A
　　文章编号：1009-3044（2022）32-0051-04
　　1 概述
　　随着经济的迅速发展，人民生活水平日益提高，高校学生的消费水平大幅提升[1]。许多大学生可能会购买大量可以临时使用的物品或只能使用几次的物品，大学生对闲置物品的交易需求越来越多，这些闲置物品不能被合理利用，弃之可惜。为了改变这一现状，二手交易这一方案被提出。
　　在传统方式下，校园内闲置物品交换多通过“二手交易”微信群或者相应的论坛实现，但这些方式存在许多弊端。例如：无法进行二手物品分类、卖出的商品无法及时下架。当用户想要修改商品价格时只能通过重新发布商品的方式进行调整。相较于传统的校园二手交易方式，微信小程序具有“触手可及，用完即走”的特点，方便了消费者与卖家实时关注商品动态信息，便于用户进行二手交易。特别是2018年起，微信官方推出了云开发的功能，云开发弱化了后端的概念，提供了云存储、云函数和云数据库三大功能，并提供了大量开发相关的API。开发者无须搭建服务器即可实现类似后端的功能，便于开发者专注于前端核心业务的开发，大大缩短了应用开发周期，方便用户的使用。利用微信小程序的开发优势，结合校园活动的独特性以及高校学生对校园二手平台物品交易的需求，设计针对高校师生的校园二手交易平台，以有效解决大学校园闲置物品的处理问题。
　　2 校园二手交易平台的设计
　　根据大量研究调查发现，市面上现有的二手交易平台，主要以网站或是App为主。这类系统大多缺少第三方商品检验的环节，交易的闲置物品的质量和品质全部建立在买家与卖家的信任之上，如果不是面对面进行交易很容易出现物品质量参差不齐的情况。根据观察发现，在校大学生近期热衷于将二手商品信息发布在各类微信群里，在微信群中完成交易，这种方式不利于商品的曝光，如果想要购买到心意的产品会花费大量的时间来查找。
　　结合高校师生对闲置物品交易的需求及微信平台的优势，开发了基于微信开发者工具在线校园二手交易平台。卖家可以在系统上传或管理他的闲置物品，买家可以通过分类、搜索找到自己喜欢的物品。买家可以针对定位查看到附近的商品，实现校内二手交易，达到共同利益、互利共赢的目的。
　　2.1 微信小程序系统架构
　　微信小程序的架构主要包含两部分，视图层View和逻辑层App Service，其中视图层可能包含多个。视图层主要用于渲染页面，逻辑层用来进行数据请求、结构调用以及一些逻辑处理，这两项工作分别在两个线程里面进行。视图层使用WebView进行渲染，在该线程中，wxml语言通过编译生成JS，执行JS生成函数用来构建虚拟DOM，这一过程还需要数据支撑，如图1所示。逻层使用JSCore维持运行，运行在另一个WebView线程中，即JS执行引擎线程。系统层的JsBridge是视图层和逻辑层进行通信的桥梁，逻辑层会将数据的变化通知给视图层，随之视图层会根据变化触发页面更新，与此同时，逻辑层会收到视图层要触发的事件，并进行业务处理，如图2所示。
　　2.2 开发模式
　　系统采用小程序云开发平台模式，云开发模式是原生的Serverless云服务，继承于小程序控制台，这种开发模式通过弱化后端和运维的概念，为开发者提供了微信服务支持和原生云端支持。Serverless架构包含两块：函数即服务和后端即服务。前者为开发提供了计算能力，后端包含对象存储、数据库、缓存服务等，如图3所示。云开发的核心能力主要有云存储、云数据库、云函数、云调用、HTTP API。
　　ServerLess实现计算托管服务，用户将代码提交到平台上进行托管，与此同时需要上传一些配置文件，这些配置文件预先设定了触发源，即定义了在什么事件下代码才会运行。当事件没有到来之前，云函数平台仅仅执行代码和配置文件的存储，当事件触发到来的时候，云函数平台才会真正启动一个函数实例，也就意味着一个计算单元被启动，如图4所示。
　　2.3 数据库设计
　　小程序中的数据主要包括商品数据、个人信息数据、留言板数据、买家操作数据。根据数据流动关系，项目在云数据库共设置七张表，分别是用户表、商品表、加入购物车表、收藏表、购买表、发布表、留言表，如图5所示。
　　3 系统模块功能介绍
　　项目主要由首页、分类、发布、我的，四个主页面构成。首页页面主要进行二手商品的展示，分类页面设有八个模块，对应八类二手物品，发布页面主要进行二手商品的发布，我的页面主要关于个人信息、个人买卖情况的记录，下面详细介绍该项目在设计过程中各页面的功能。
　　3.1 首页页面
　　用户进入小程序后首先会进入首页，页面上方以轮播图的方式显示三张图片，为了节省空间，图片存储在云端，不占小程序空间，下方通过云数据库存储的二手商品信息，调用接口，返回结果置前端进行渲染。首页页面主要展示二手商品信息，包括商品的名称、售价、封面图、发布地点。
　　3.2 分类页面
　　分类页面主要是针对不同商品进行分类归纳，小程序将二手商品分为8个类别，可供用户根据类别选择自己的去求商品，通过大类筛选后进入二级搜索页面。
　　3.3 发布页面
　　发布页面主要供卖家使用，进行商品发布。卖家在发布页面获取用户手机图片的功能以完成二手商品信息的上传。

nlc202301131438

　　3.4 我的页面
　　我的页面主要展示了个人信息、个人买卖情况。如果用户是首次登录该小程序，那么系统会检测用户是否进行授权，如果进行了授权就不会再提示用户授权登录，用户可通过我的页面查看发布的商品、买到的商品、收藏的商品，除此之外还能进行个人信息修改，点击我的主页还可跳转到个人详细信息页面。
　　4 关键问题的解决
　　4.1 腾讯地图API
　　腾讯地图API 是基于腾讯位置服务，为开发者免费提供的应用程序接口，提供了开放式的API，支持多种接入方式，如web端的Java Script、手机App端的Android SDK等[2]。腾讯地图API包括MVC类，可以将业务模型与控制器的实现代码分离[3]，从而使相同的程序能够使用不一样的表现模式。本文通过腾讯API获取用户的经度和纬度，精准根据用户的地理位置查找出用户附近的高校可供用户选择，从而将交易范围扩大到全国各高校。
　　本文主要通过调用腾讯地图API，调用wx.getLocation获取用户当前位置经纬度，并调用腾讯地图API（qqmapsdk.reverseGeocoder）进行逆地址解析，获取到用户当前所在位置的城市及周边区域，代码实现如图7。
　　4.2 Promise对象解决异步问题
　　由于Java Script的异步运行机制，经常出现数据在未完成当前语句块的处理，就会被下一语句块调用，导致数据读取、写入错误。为解决这个问题，本文使用了Java Script的Promise对象，通过其then方法，为Promise实例添加状态改变时的回调函数，catch方法用于指定发生错误时的回调函数，以同步操作的流程将异步操作表现出来，从而避免了数据读取错误以及随着回调增加导致代码嵌套层次相应增加[4]。
　　本文对Promise对象进行二次封装，封装后wechat.js文件如图8，将小程序的异步请求接口统一，并且对异步请求的功能接口分布更加明确，使得程序的可读性能够大大提升，并提供了良好的错误处理逻辑，可以使通过云函数从数据库中取得的数据能够得到正确的处理。Promise运行前后对比[5]如图9所示。
　　4.3 瀑布流式布局
　　由于小程序的主页展示以图片+关键信息为主，随着商品展示的数据信息逐渐繁多复杂，如何使用户浏览页面获取信息更为有效、直观，成为商品展示页面的重要设计标准。因此本文在商品展示页面采用瀑布流式布局，在保证信息传达及页面秩序的有效性的同时[6]，兼顾用户顺畅的视觉流程、情境化的浏览体验、人性化的交互设计。
　　本文通过flex弹性布局实现瀑布流式布局，主要通过在wxml中将最外层的元素设置为横向排列，即：display： flex，将flex-flow设置为column wrapshe使其换行，并设置height填充高度来容纳子元素。
　　5 结束语
　　基于云开发平台所搭建的易物校园二手交易平台小程序，将闲置资源再利用概念的实施扩大化、普遍化，旨在帮助大学生合理调配资源的同时，方便自己的生活。眼下，随着共享经济的不断发展，多角度地为社会经济的发展赋予了新的动能，除此之外共享商业模式也在不断渗透大学校园，而基于微信小程序的易物校园二手交易平台的出现正好符合共享经济的理念。同时国家大力提倡节能环保，勤俭节约，该项目让校园中闲置的二手物品流通起来产生效益，有效地避免了旧物或旧书的浪费， 大力提倡了在校@内落实旧物利用、环保节约的生活理念，从而实现交易双方的共赢。
　　参考文献：
　　[1] 欧国立，王睿哲.我国分享经济快速发展面临的困境与对策[J].经济纵横，2017（10）：54-59.
　　[2] 杨凯.腾讯地图API在Joomla中的应用研究[J].科技广场，2016（4）：21-23.
　　[3] 代庆梅.浅析JavaScript MVC框架在Web开发中的应用[J].电脑知识与技术，2014，10（10）：2242-2245.
　　[4] 邓森泉，杨海波.Promise方式实现Node.js应用的实践[J].计算机系统应用，2017，26（4）：218-223.
　　[5] 李沛熹，朱晓君，姜建，等.基于微信小程序的校园二手书籍交易平台设计与实现[J].电脑知识与技术，2021，17（23）：57-59，67.
　　[6] Wang M Y，Tang D L.Waterfall Flow vs. Fixed Grid Webpage Layout Design C The Effects Depend on the Zhong-Yong Thinking Style[M].Springer，Cham，2017.
　　【通联编辑：谢媛媛】

nlc202301131438

转载注明来源:https://www.xzbu.com/8/view-15444091.htm