基于小程序“校之助”平台的开发和研究
2022-08-20罗平娟龙和妹姚敦黔邱蘇洋
王 丽,罗平娟,龙和妹,姚敦黔,邱蘇洋
(1.兴义民族师范学院,毕节 552100;2.兴义民族师范学院,兴义 562400;3.兴义民族师范学院,凯里 556000)
0 引言
微信之父张小龙曾公开表态:“小程序未来能取代百分之八十的APP”,小程序是一种不需要安装即可使用的应用,用户扫一扫或搜一下就可以打开应用。随着2017年微信小程序的兴起,各种各样的小程序应运而生,小程序开发者大多认为小程序简单、易开发、bug少、流畅度高,而且开发成本比APP低。当然,把大学生的生活与小程序相结合也是人们关注的热点之一。“校之助”就是将二者相结合的产物,它为在校学生建立了一个二手交易以及信息发布平台。
1 系统简介
在大数据时代的今天,我们深切地感受到手机内存不够用,各种软件应用铺天盖地,内存即将暴走。在此情况下,小程序的优势渐渐凸显。“小程序”,顾名思义,小、占用运行内存小、使用快捷。“校之助”平台从二手交易平台、电脑知识科普、兼职信息三个方面入手,打造一个令大学生称心的小程序。校之助小程序可以帮助同学们提高找兼职、了解电脑、掌握生活技巧和处理二手物品的效率,并且提供的平台简洁、使用方便,不需要下载浪费时间,也不需要占用手机运行内存。
要开发这样一个小程序需要一个过程,其简单开发流程如下:
(1)通过分发问卷,公开提问调查,对需要开发的功能进行商讨,例如有多少同学是需要出售或者购买二手物品,有多少同学需要校内兼职,以及校内兼职的种类等,以及各个专业的同学对电脑小知识的需求度等相关问题;对调查结果进行分析,总结。
(2)深入学习微信小程序的相关知识,构建微信小程序“校之助”的基本框架和建立云数据库;分析、解决如何建立云数据库,如何上传图片到云存储中,选取组件库等相关问题。
(3)功能开发的实现,解决一系列开发技术问题。如何实现前后端交互,如何提取数据库中的数据到前端页面,如何将商品图片存储在云存储中,以方便需要时便捷提取,以及如何排版使得页面美观等。
(4)内部测试,测试功能是否可用,是否完善。本平台在前期开发阶段测试人员只涉及本小组成员,随着程序不断完善,开始加入更多测试人员,帮助小程序逐渐完善。
2 “校之助”相关技术及功能分析
2.1 “校之助”相关技术
“校之助”小程序使用微信小程序所自带的云数据库,云开发提供了一个JSON数据库,每一条记录是一个JSON格式的对象,用到增、删、改、查功能。在app.js中定义相关函数,在需要页面进行引用。
上传相关图片时需要云存储,云存储依赖于云开发,微信为开发者提供了一块存储空间,可以将图片、文件上传到云端,主要是用两个API来对云储存进行相关操作wx.cloud.uploadFile。获取的用户信息存储在缓存中,主要用wx.setStorage进行存储再缓存,使用wx.getStorage取出相应的数据。
为了小程序的美观,引用ColorUI组件库。ColorUI组件库拥有鲜亮的高饱和色彩,专注于视觉的小程序组件库,引入后,可以直接采用原本的样式,也可以适当地修改。本小程序的底部导航栏,竖直导航栏,轮播图等就是采用ColorUI的样式。
开发此小程序存在如何分离前后端、一个用户怎样实现既可以发表物品出售又可以发表兼职信息以及怎样判断发布内容是否审核通过等问题。“校之助”后台从“我的”页面进入,建立一个管理员Openid数组,获取当前用户的用户Openid并判断是否在该数组中,如果在数组中,“我的”页面会出现后台管理按钮,进入后台执行相关操作,如果不在数组中,就不会展示,关键代码如下:
that.setData({
openid:openid,
isAdmin:that.data.adiminArr.indexOf(openid)
})
发布是一个页面,发布类型有三个,要做到发布分离,“校之助”采用了选项卡,给不同选项卡里的内容添加不同事件,将用户填的内容存储到相应的数据表中,选项卡部分代码如下:
<view class=′tapCard′>
<view class= "addCard1{{cardNum===1?′tapOn′:′tapOff′}}"bindtap=′tapTo1′>申请出售</view>
<view class= "addCard2{{cardNum===2?′tapOn′:′tapOff′}}"bindtap=′tapTo2′>兼职信息</view>
<view class= "addCard3{{cardNum===3?′tapOn′:′tapOff′}}"bindtap=′tapTo3′>生活技巧</view>
</view>
审核是一个重要的环节,用户申请内容一开始应是未审核状态,除了自己和后台人员,其他用户是看不到的,后台人员审核通过后才可以展现在相应页面,所以将采用一个字段去控制审核状态,后台人员通过修改该字段的值来达到审核,“我的”页面中的发表状态也对应该字段的值,部分代码如下:
app.getInfoWhere(′thing′,{check:1},
e=>{
getCurrentPages()["0"].setData({
shopInfo:e.data,
isShow:true
})
wx.hideLoading()
}
)
2.2 “校之助”相关功能
“校之助”小程序分为两大部分,前端和后台。前端包括“首页”、“兼职”、“小知识科普”、“我的”以及“发布”模块;后台包括“订单管理”以及“审核管理”模块。审核模块又分为三种,分别为“二手物品审核”、“兼职信息审核”和“小知识审核”。具体模块功能如下:
(1)“首页”模块:是二手物品的一个页面,主要内容包括一个搜索框,可以搜索出关于关键字的物品;商品列表即展示所出售的物品,当选中其中一个物品时会跳转到商品详情页,方便进行购买。
(2)“兼职”页模块:本页面有一个搜索框可以查询出相对应类型的兼职,兼职列表可以任意点击一个进入兼职详情页查看兼职的主要内容和兼职环境以及招聘人的相关联系方式等。
(3)“小知识科普”模块:可以输入自己所遇到相关问题的关键字查询相应的知识。例如,搜索“电脑”,便有相应的电脑知识点排列在页面,也可以查看失物招领、生活技巧这些信息。
(4)“我的”模块:有地址信息栏需要完善,填写好自己姓名、联系电话等信息,还可以看到自己购买物品的订单。
(5)“发布”模块:发布分为三类,分别为二手物品出售的申请,兼职信息的申请以及小知识的申请,用户填好相关信息后,需等待管理员审核,在我的页面中的我的发布栏下可以看到审核状态,用户第一次进入发布页面需要授权登录,将用户信息存到缓存中。发布管理是指可以查看到自己发布的信息当前状态,还可以删除信息。
(6)“订单管理”模块:对所有订单进行管理、删除、修改、查找。
(7)“二手物品管理”模块:查看申请发布的二手物品并审核,删除相应物品信息,还可以查询某个物品,并进行删除或者审核。
(8)“兼职信息管理”模块:查看申请发布的兼职信息并审核,删除相应兼职信息,还可以查询某个兼职,并进行删除或者审核。
(9)“小知识科普管理”模块:查看申请发布的科普知识并审核,删除相应科普内容,还可以查询某个内容,并进行删除或者审核。
2.3 “校之助”页面效果图
首页页面属于上中下结构,上面是搜索框和轮番图,中间部分是竖直导航栏和对应的商品列表,下面就是底部导航栏;发布页面主要分为申请出售二手物品、发布兼职的申请、发布小知识的申请;我的页面如果该用户属于管理员会有一个后台管理按钮,从此处进入后台,后台分别为审核管理和订单管理,“校之助”首页效果如图1所示,“校之助”后台页面展示效果如图2所示。
图1 首页效果图
图2 后台管理页面效果图
3 “校之助”发展潜力以及特点
大四学生会产生二手物品的同时也会需要二手物品,实习时大多数同学会选择租房,但是实习时间仅四个多月,过多添置物品较为浪费,“校之助”在实现校内二手交易的基础上,可以考虑扩展到校外,建立大四实习生和租房周围的二手交易平台,当大四学生实习结束后又可以将物品再次出售。发布的兼职信息也可以扩展到校外周围的兼职,这对于课特别少的同学,可以提前到校外锻炼。还有一些毕业但还没正式工作的人,也可能会做一些临时的工作,租房子需要购买二手物品,找到正式工作的时候就会需要出售二手物品,所以“校之助”对于校外需要出售和购买二手物品以及找兼职的人也同样适用。
采用“校之助”能给大学生带来良好的体验,本程序用JSON格式作为数据传输,凸显程序的高效性、稳定性以及安全性。一个好的程序除了功能完善,页面肯定也需要美观,“校之助”采用ColorUI的相关CSS组件样式,使用亮丽的色彩吸引人的眼球,亮丽的颜色也符合大学生活泼好动的形象。采用微信小程序自带的云数据库能带来很大的便利,云数据库存取比较方便,也容易开通、好学。将二手交易、兼职信息、小知识科普相结合是该小程序的亮点,也是难点,如何将它们通过用户衔接起来是需要进一步解决的问题。在保障每个用户享有发表兼职、科普知识的权利的同时,后台管理员认真审核每条申请,以确保用户使用小程序过程中的美好体验。