您现在的位置: 首页 > 微信小程序运营 > 测评 >

小程序测评-美团外卖小程序之分析

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2017-11-10 16:04热度:
本文来自公众号:小程聚

小程序开发

今天要介绍的是「美团外卖」小程序,美团外卖小程序二维码是微信美团外卖小程序的扫码入口,用户可以通过扫描此二维码使用外卖订购服务,美团外卖小程序会获取你的地理位置,为你提供高品质的外卖服务。

 

本文重点分析这款微信小程序的主要功能,以及对应的数据接口和采用的小程序组件/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、显示|删除地址