进日工作压力比较大,连出门吃饭的时候都没有,所有就一直是店外卖的状态。由于工作的职业习惯,我就尝试了「美团外卖」的小程序点外卖,美团外卖小程序二维码是微信美团外卖小程序的扫码入口,用户可以通过扫描此二维码使用外卖订购服务,美团外卖小程序会获取你的地理位置(注意一定是要获取你的地理位置,如果无法获取你的地址位置,美团外卖的小程序是无法提供服务的),为你提供高品质的外卖服务。
首先我们来看看如何找到「美团外卖」的小程序?打开微信手机客户端—点击搜索“美团外卖”,就会出现美团外卖公众号和美团外卖小程序。而我们今天要介绍的就是美团外卖小程序
本文重点分析这款微信小程序的主要功能,以及对应的数据接口和采用的小程序组件/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、显示|删除地址
爱盈利(aiyingli.com)移动互联网具影响力的盈利指导网站。定位于服务移动互联网创业者,移动盈利指导。我们的目标是让盈利目标清晰可见!降低门槛,让缺乏经验、资金有限的个人和团队获得经验和机会,提高热情,激发产品。


