美团外卖小程序

这个美团外卖的小程序我是从github上面找到的,然后参考他的代码完成的。所以界面和代码还是有点相似,毕竟现在我才刚开始学习,所以我认为参考大牛源码也是一种提升。因为里面有许多的技巧在里面,有的时候就可以不用这么纠结应该如何布局等。


这是一个首页界面,在写代码的时候,只要在app.json的pages的数组的第一行写上你要的首页路径就可以了,因为小程序是将获取到的第一条路径默认为首页。

这些页面都是采用组件写的,而且小程序的组件不多。只要学过前端的都能够很快的上手小程序的前台页面的编写,而且这里的前端都是采用动态的渲染方式的,所以就会有模板的使用出现。这里的模板开始和结束符为{{}}。

然后就是点击商家信息栏进入商家页面了。


这里面的话是采用scroll-view组件写的,因为左边的要滚动,右边的也要滚动。所以要采用scroll-view来写。这里的scroll-view要固定height的值,不然会出不来滚动的效果,不能用百分比的形式。然后按钮的话只要采用bindtap来绑定函数就ok了。这样子的话,只要我们点击图片就会触发事件,这里的bind是可冒泡的,采用catch的话就不会冒泡了。


之后就是订单的提交了,这里的话只要提取静态的购物车数据就ok了。之后直接显示出来,然后再请求url来进行订单的提交。

这个程序大概就是这样子了。

代码在这里:传送门

功能上还是比较少,所以等到有时间再补吧

1,实现的需求 1)首页:标题栏获取用户当前位置,使用腾讯api实现定位,不用弹窗出现用户授权, 进入首页,获取附近商铺的列表 轮播图: 导航栏: (1)向后台发送请求来获取展示的商铺列表,综合排序,筛选实现根据用户 条件请求数据 (2)导航栏出现偏移 商铺列表: (1)带参跳转店铺 网络中断情况: 新页面提示没网,可点击刷新 2)店铺:根据店铺id获取店铺相关信息 头部:动态显示店铺的相关优惠 导航:分别切换菜单,评价,商家 菜单: 商品列表展示:左右联动,动态出现添加数量以及按钮 商品详情展示:弹窗卡片,展示详情,可动态出现添加数量以及按钮 购物车:展示添加进购物车的商品信息,清空结算,计算合价,差多少配送, 结算:(未实现),跳转支付,传后台购物车数据,用户信息,当前时间等订单 需求信息 评价:根据店铺id获取店铺的所有评价list展示 商家:展示商家优惠信息,需求(呼叫商家,查看食品安全档案) 3)订单 全部订单:根据用户信息获取相关全部订单,实现详情,再来一点(需要根据店铺 id) 待评价:需求:实现评价功能(提交:店铺id,评价信息) 退款:评价,详情 4)个人 用户信息展示: 登录: 未登录:(登录,注册实现) 用户地址: 管理地址:添加新地址,编辑地址(地址id,用户id) 客服中心:接入客服(公众号后台可设置客服人员) 退出账号:清空本地用户信息
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值