#小程序云开发挑战赛#-校园寻回-小旅分队
发布于 4 年前 作者 maoqiang 2746 次浏览 来自 分享

项目简介

本小程序名为"得之",是一款用于校园失物招领平台的小程序。用户点击登录是默认微信登录,可以在平台进行信息发布,包括丢失物品信息的发布以及拾取物品信息的发布;在丢失与找回的信息界面会实时更新发布出来的信息进行展示,点击每条发布信息可以查看详情。并且小程序带有搜索功能,能够根据搜索值返回相关数据。

功能介绍

__实时登录获取用户信息__

>  
__登录界面__  
简介: 小程序一进来是一个简约的登录界面,直接一键登录,微信授权获取到当前使用的微信的具体信息,达到真实用户体验的效果。![](https://image.wxopen.club/content_81ed4548-ffb7-11ea-a53c-001a7dda7111.gif)
>  
__我的界面__  
:获取当前使用微信的真实的微信头像以及昵称作为放入用户信息展示。
__查看发布信息__



*   
    
    查看找回和认领的发布信息
    
    >  
    功能实现:三个主页面,第一个lost页面根据tag标签展示客户丢失的物品,第二个sort页面展示客户捡到的物品,所以在这两页面渲染的时候,调用云函数getList.传入kind来区别是__lost(丢失)__ 还是__found(认领)__,传入tag标签来划分__证件,书籍,书籍和其他.__.
*   
    
    查看各种分类中的所有信息
    
    >  
    图片展示![](https://image.wxopen.club/content_823a90f8-ffb7-11ea-b203-001a7dda7111.gif)  
    功能实现:第二个主页面sort,根据tag展示found(认领)的数据条目,每个tag可以展示更多,进入information页面,这个页面里面调用information组件,展示一类标签的所有信息.
*   
    
    查看单条发布信息
    
    >  
    图片展示![](https://image.wxopen.club/content_82804836-ffb7-11ea-a516-001a7dda7111.gif)  
    功能实现:lost,sort页面里展示出来的物品简略条目,以及user页面的我的发布里都可以点击跳转物品详情页面,这个detail页面里面会调用detail的组件,调用云函数getDetail,根据传入的\_id匹配相应的信息,并展示出来
*   
    
    查看我的发布信息
    
    >  
    图片展示  
    功能实现:在第三个主页面user,渲染页面时调用云函数getMyRelease,传入OPENID这个参数,将数据库数据里OPENID相匹配的数据全部取出来,在页面渲染
__信息发布功能__

>  
在release里进行了友好得反馈,在发布之前,会判断是否有东西没被选择或者填写。发布以后调用云函数release,将release页面填写的数据当作参数传入云函数,在groupList表里插入数据。![](https://image.wxopen.club/content_8319ea5a-ffb7-11ea-a960-001a7dda7111.gif)
__搜索功能__



*   界面隐藏>  
    解析:在进行搜索输入时,相应的要进行一些页面的隐藏;当输入框有值时,清除按钮和取消按钮要出现;文本清除后,清除按钮得消失;取消搜索后,取消按钮也得清除;当输入值传递给数据库进行查询时,返回值得到搜索建议后需要展示出来;点击搜索建议中的一条,出现所有的搜索结果,并隐藏搜索建议。只需要给容器加上一个判断条件,在执行何种功能时去让容器隐藏。例如:`` <view class="{{showSort? 'wrapper' : 'hide'}}"> ``,令`` showSort ``为`` false ``,`` hide ``的`` css ``为`` display: none; ``;即隐藏容器。
*   获取文本>  
    `` input ``中的value属性为输入文本,在`` input ``的自带属性`` bindinput ``绑定一个方法,当输入结束时获取到输入框的内容,以此作为搜索关键词传递给云函数`` getSearchSuggest ``,在云函数中拿到数据库`` groupList ``当中的字,使用正则模糊查找是否传入值与数据空库中的值匹配,返回数据传回给搜索界面中的数据源。  
    点击搜索建议执行再一次传值,点击事件本身会返回参数,使用 `` data-xx=={{item.xx}} ``,即将数据源中的某个信息在点击时将此值返回,此时在执行一次关于搜索的云函数,再次将搜索结果返回。  
    同样,对搜索结果中的某条信息进行点击时,利用点击事件,拿到返回的该条数据的`` _id ``,通过绑定的页面跳转事件,将`` _id ``进行传值跳转
*   获取数据>  
    获取数据在获取文本之后就该执行,在`` js ``的搜索方法中,将点击 事件拿到的值作为需要传递给蕴含是的数据,连库,搜索,如上
*   搜索历史>  
    搜索历史使用的时本地缓存,使用`` input ``自带属性失去焦点函数,在输入完成进行搜索后触发,拿到输入的值进行对搜索历史空数组的赋值,并在生命周期函数`` onShow ``中做本地缓存,搜索历史即会随页面发生变化时进行搜索记录缓存,同样还进行了去重和时间先后排序  
    搜索历史删除,调用组件,点击删除按钮出现,点击确认删除,则将搜索历史数组里面的所有值清空  
    ![](https://image.wxopen.club/content_837c2fb4-ffb7-11ea-8a42-001a7dda7111.gif)

数据库

groupList

users

云函数

10 回复

很实用呀

写的可以的

这个功能太强了吧

方便大家,👍 。

为校园贡献力量

回到顶部