小程序开发
今天要介绍的是「美的官方商城」小程序,美的官方商城小程序是专门售卖生活电器的商城应用,给消费者提供了一个权威、快捷、可信赖的购物渠道。提供了美的全品类家电包括空调、冰箱、洗衣机、厨房家电、及各类小型家电等商品。
本文重点分析这款微信小程序的主要功能,以及对应的数据接口和采用的小程序组件/API技术。让我们离小程序更近一点,传递知识,分享收获。
功能1:显示首页
-
功能1:显示首页
-
数据接口:进入首页,显示美的人气产品并且提供优惠券领取
-
用到的小程序组件:view,text,image,input,form,scroll-view,tab
-
用到的小程序API: wx.request
功能2: 商品分类
-
数据接口:点击“商品分类”,进入商品类型列表,可以选择进行搜索
-
用到的小程序组件:view,text,image
-
用到的小程序API: wx.request
功能3:显示商品列表|搜索
-
数据接口:点击不同类型商品,进入商品列表,也可以进行搜索或筛选
-
用到的小程序组件:view,text,image,input,form
-
用到的小程序API:wx.request
功能4:详情页面
-
数据接口:进入详情页面,显示商品的详情,并且可以进行立即购
-
用到的小程序组件:text,view,image,button,scroll-view
-
用到的小程序API:wx.request
功能5:订单详情
-
数据接口:
-
①订单页面:选择购买商品,进入订单页面
-
②提交订单(微信支付):选择团购,进行填写,提交订单
-
用到的小程序组件:text,view,image,button,form
-
用到的小程序API:wx.request,wx.requestPayment
功能6:收货地址
-
数据接口:收货地址
-
①编辑|添加地址:点击填写收货地址,输入相对应的关键词,进行提交
-
②显示|删除地址:点击收货地址,显示用户全部的收获地址,并且可以点击删除
-
用到的小程序组件:text,view,input,form,button
-
用到的小程序API: wx.request
功能7:领取优惠券
-
数据接口:在首页,点击优惠券,领取优惠券
-
用到的小程序API:wx.request
功能8:我的订单
-
数据接口:进入我的,可以查看我的购买的商品
-
用到的小程序组件:text,view,image,tab
-
用到的小程序API:wx.request
功能9:登录
-
数据接口:进入小程序,小程序弹出登录请求
-
用到的小程序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、登录