小程序开发
今天要介绍的是「美团外卖」小程序,美团外卖小程序二维码是微信美团外卖小程序的扫码入口,用户可以通过扫描此二维码使用外卖订购服务,美团外卖小程序会获取你的地理位置,为你提供高品质的外卖服务。
本文重点分析这款微信小程序的主要功能,以及对应的数据接口和采用的小程序组件/API技术。让我们离小程序更近一点,传递知识,分享收获。
功能1:显示首页
-
数据接口:进入首页,系统自动定位,并且展示周边的服务
-
用到的小程序组件:view,text,image,input,form
-
用到的小程序API: wx.request, wx.getLocation
功能2: 显示列表|搜索
-
数据接口:点击外卖分类,进入商户列表,也可以进行搜索或筛选
-
用到的小程序组件:view,text,image,input,form
-
用到的小程序API: wx.request
功能3:商户页面
-
数据接口:进入商户页面,显示不同商户的菜单和信息
-
用到的小程序组件:text,view,image
-
用到的小程序API:wx.request
功能4:提交订单(微信支付)
-
数据接口:选择团购,进行填写,提交订单
-
用到的小程序组件:text,view,button,form
-
用到的小程序API:wx.request,wx.requestPayment
功能5:我的订单
-
数据接口:进入“订单”,可以查看我的所有订单
-
用到的小程序组件:text,view,image,tab
-
用到的小程序API:wx.request
功能6:我的红包
-
数据接口:进入“我的”,可以查看我的红包
-
用到的小程序组件:text,view,image
-
用到的小程序API:wx.request
功能7:收货地址
-
数据接口:
-
①编辑|添加地址:点击填写收货地址,输入相对应的关键词,进行提交
-
②显示|删除地址:点击收货地址,显示用户全部的收获地址,并且可以点击删除
-
用到的小程序组件:text,view,input,form,button
-
用到的小程序API: wx.request
总结:「美团外卖」小程序有14个页面,用到的小程序组件有8个,用的小程序API有3个,分别如下:
1
前端页面个数:14
分别为:
1.首页:pages/index/index
2.订单:pages/order/order
3.我的:pages/my/my
4.当前位置:pages/address/address
5.编辑收货地址:pages/addaddr/addaddr
6.搜索:pages/search/search
7.店铺列表:pages/store-list/store-list
8.店铺菜单:pages/menus/menus
9.提交订单:pages/submit-order/submit-order
10.订单状态、详情:pages/order-status/order-status
11.红包:pages/packet/packet
12.过期红包:pages/past-packet/past-packet
13.我的地址列表:pages/addrlist/addrlist
14.登录:pages/login/login
2
用到的小程序组件:
view,text,image,input,form, button ,scroll-view ,tab
用到的小程序API:
wx.request, wx.getLocation ,wx.requestPayment
3
数据接口API个数:8
数据接口API:
1、显示首页
2、显示列表|搜索
3、商户页面
4、提交订单(微信支付)
5、我的订单
6、我的红包
7、编辑|添加地址
8、显示|删除地址