#小程序云开发挑战赛#-旅梦恋爱-金龙团队
发布于 4 年前 作者 gguo 3800 次浏览 来自 分享

旅梦恋爱说明手册



1,开发目的以及针对人群

目前国内现状 每个10个男人里面就有7个是单身,而且每年在持续在增加,都说有钱人终成眷属,但爱情也需要灌溉,并不是简简单单依靠思念就能掘金的,很多男人想谈恋爱,想要结婚,单身没有好的方法去解决问题,而旅梦恋爱便是这样一款解决男生恋爱问题的小程序
用户人群:20-35岁单身一线城市男性

2,实现思路

想要打造一款线上学习恋爱的小程序软件,市场上有很多类型,但是我们想打造一款以学习为主的小程序,帮助国人解决恋爱问题,所以通过搜索页面可以快速查找内容,也可以通过浏览模式,以及后台my页面里可以查找获取用户信息和留下了我们的联系方式,实现成交

3,功能说明

页面分为三个部分 第一主页 第2 搜索页 第三我的

第一主页 index页面

主页分为 1,上(头部主题) 2,中(轮播图) 3,下(左右功能联动)
根据云函数的 将所有的文字和图片都上传到了云开发数据库 list的群组里
轮播图和左右功能都是来自

3,左右功能实现原理
点击左侧菜单右侧滚动很好实现,直接通过scroll-view组件的scroll-into-view属性实现类似锚点效果即可,右侧滚动主要是通过右侧scroll-view组件bindscroll获取右侧滚动的距离顶部的距离和右侧某一菜单分类的高度进行判断
所有很好的实现了 点击左侧按钮 显示右侧相应的位子 滑动右侧,左侧按钮相应的高亮
最后点击 不同的点击按钮 跳转到相应的内容页面 功能一致

第二 搜索页面search页面

首先思路, 在搜索框输入关键词,点击搜索按钮,进行搜索,当我们点击搜索时,会向服务器请求数据,那么,我们的思路是,我们输入的关键词与数据库数据进行匹配,如果有,则被调用出来
 搜索功能 绑定bindInput函数 
  将输入的值存在inputValue中,搜索button 用bindtap绑定Onclike函数。
  
在Cloud-submission页面 存储了相应的搜索字段 比如 搭讪,开场,重新开场。。。。
上传到云函数数据库中。
在点击事件里面 发起云函数接口请求,把云函数中的存储的方法用先通过 where方法 找到相应的字段跟他匹配 ,在通过get()方法调用到点击事件里面通过if判断实现基本功能

点击下面热门搜索 会出现到搜索框内 是一个双向数据绑定去js手写原理

内容页面content
总共也4个
选用vant 组件 采用折叠式框

第三 my页面

点击进入“我的”页面时有一个动画效果,头部动画是Ainmate.css里的从上往下渐入动画,列表动画是Ainmate.css里的从右到左渐入动画。登录功能用的是微信API "wx.getSetting"先获取用户权限,再用微信API "wx.getUserInfo"拿到用户的头像和微信名,展示在页面上。列表部分用的是Vant Weapp框架的Cell单元格组件,循环展示在页面上,点击列表有一个弹窗效果,弹窗出现后点击确认按钮会复制里面的内容。

4,体验2维码链接

回到顶部