欢迎光临,了解微信小程序开发,就上易用通!

小程序测评:美的官方商城小程序之分析

发布:2017-11-12 15:03浏览: 来源:网络 作者:tianshu

小程序开发

今天要介绍的是「美的官方商城」小程序,美的官方商城小程序是专门售卖生活电器的商城应用,给消费者提供了一个权威、快捷、可信赖的购物渠道。提供了美的全品类家电包括空调、冰箱、洗衣机、厨房家电、及各类小型家电等商品。

 

本文重点分析这款微信小程序的主要功能,以及对应的数据接口和采用的小程序组件/API技术。让我们离小程序更近一点,传递知识,分享收获。

功能1:显示首页

小程序测评:美的官方商城小程序之分析(图1)

  • 功能1:显示首页

  • 数据接口:进入首页,显示美的人气产品并且提供优惠券领取

  • 用到的小程序组件:view,text,image,input,form,scroll-view,tab

  • 用到的小程序API: wx.request

 
 
 

功能2: 商品分类

小程序测评:美的官方商城小程序之分析(图2)

  • 数据接口:点击“商品分类”,进入商品类型列表,可以选择进行搜索

  • 用到的小程序组件:view,text,image

  • 用到的小程序API: wx.request

 
 
 

功能3:显示商品列表|搜索

小程序测评:美的官方商城小程序之分析(图3)

  • 数据接口:点击不同类型商品,进入商品列表,也可以进行搜索或筛选

  • 用到的小程序组件:view,text,image,input,form

  • 用到的小程序API:wx.request

 
 
 

功能4:详情页面

小程序测评:美的官方商城小程序之分析(图4)

  • 数据接口:进入详情页面,显示商品的详情,并且可以进行立即购

  • 用到的小程序组件:text,view,image,button,scroll-view

  • 用到的小程序API:wx.request

 
 
 

功能5:订单详情

小程序测评:美的官方商城小程序之分析(图5)

  • 数据接口:

  • ①订单页面:选择购买商品,进入订单页面

  • ②提交订单(微信支付):选择团购,进行填写,提交订单

  • 用到的小程序组件:text,view,image,button,form

  • 用到的小程序API:wx.request,wx.requestPayment

 
 
 

功能6:收货地址 

小程序测评:美的官方商城小程序之分析(图6)

  • 数据接口:收货地址

  • ①编辑|添加地址:点击填写收货地址,输入相对应的关键词,进行提交

  • ②显示|删除地址:点击收货地址,显示用户全部的收获地址,并且可以点击删除

  • 用到的小程序组件:text,view,input,form,button

  • 用到的小程序API: wx.request

 
 
 

功能7:领取优惠券

小程序测评:美的官方商城小程序之分析(图7)

  • 数据接口:在首页,点击优惠券,领取优惠券

  • 用到的小程序API:wx.request

 
 
 

功能8:我的订单

小程序测评:美的官方商城小程序之分析(图8)

小程序测评:美的官方商城小程序之分析(图9)

  • 数据接口:进入我的,可以查看我的购买的商品

  • 用到的小程序组件:text,view,image,tab

  • 用到的小程序API:wx.request

 
 
 

功能9:登录

小程序测评:美的官方商城小程序之分析(图10)

小程序测评:美的官方商城小程序之分析(图11)

  • 数据接口:进入小程序,小程序弹出登录请求

  • 用到的小程序API: wx.login, wx.getUserInfo

 
 
 

总结:「美的官方商城」小程序有10个页面,用到的小程序组件有8个,用的小程序API有4个,分别如下:

1

前端页面个数:10

分别为:

1.首页:pages/index/index

2.美的搜索:pages/search/search

3.商品详情:pages/goodsDetail/goodsDetail

4.确认订单:pages/confirmOrder/confirmOrder

5.注册:pages/register/register

6.商品分类:pages/categories/categories

7.个人中心:pages/personal/personal

8.订单列表:pages/orderList/orderList

9.地址管理:pages/address/address

10.编辑地址:pages/editAddress/editAddress

2

用到的小程序组件:

view,text,image,input,form,scroll-view,tab,button

用到的小程序API:

wx.request, wx.requestPayment, wx.login, wx.getUserInfo

3

数据接口API:

1、显示首页

2、商品分类

3、显示商品列表|搜索

4、详情页面

5、订单页面

6、提交订单(微信支付)

7、编辑|添加地址

8、显示|删除地址

9、领取优惠券

10、我的订单

11、登录






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。