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

小程序开发--微寄递小程序之分析

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

小程序开发

今天要介绍的是「微寄递」小程序,微寄递小程序由广州邮局提供服务,为用户提供快捷的快递服务,包括可以让用户可以随时随地线上下单,选择上门取件或到附近蜜蜂箱投件,以及在线查询邮件、服务网点等信息,一个微寄递小程序就能搞定。

 

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

功能1:显示首页

小程序开发--微寄递小程序之分析(图1)

  • 数据接口:进入首页,显示取件和寄件服务

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

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

 
 
 

功能2:上门取件和密封箱寄件

小程序开发--微寄递小程序之分析(图2)

  • 数据接口:点击“上门取件”或“蜜蜂箱取件”,选择时间、物品、寄和收的详细信息进行提交上门取件或寄件服务

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

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

 
 
 

功能3:物流查询

 

小程序开发--微寄递小程序之分析(图3)

  • 数据接口:

  • ①扫码查询:点击扫码,打开扫码,进行物流的查询 

  • ②订单号查询:输入物流单号,进行物流的查询

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

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

 
 
 

功能4:我的订单

小程序开发--微寄递小程序之分析(图4)

 

  • 数据接口:点击“我的订单”,显示我寄件的所有订单

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

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

 
 
 

功能5:寄件人和收件人地址显示

小程序开发--微寄递小程序之分析(图5)

  • 数据接口:点击“寄件人地址簿”或“收件人地址簿”,查看不同分类的地址

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

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

 
 
 

功能6:编辑和添加地址簿

小程序开发--微寄递小程序之分析(图6)

  • 数据接口:点击“编辑”或“添加”,编辑或添加地址

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

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

 
 
 

功能7:我的代金券

小程序开发--微寄递小程序之分析(图7)

  • 数据接口:点击“我的代金券”,显示用户的全部代金券,并且可以进行管理

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

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

 
 
 

功能8:登录

小程序开发--微寄递小程序之分析(图8)

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

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

 
 
 

功能9:绑定手机

小程序开发--微寄递小程序之分析(图9)

  • 数据接口:输入手机号,进行验证码,进行绑定手机

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

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

 
 
 

总结:「微寄递」小程序有13个页面,用到的小程序组件有6个,用的小程序API有4个,分别如下:

前端页面个数:13

分别为:

1.首页:pages/index/index

2.添加寄件地址:pages/address/address

3.查找蜜蜂箱:pages/beeHives/beeHives

4.服务协议:pages/protocol/protocol

5.期望上门时间:pages/wantTime/wantTime

6.查询:pages/inquire/inquire

7.查找邮政网点:pages/searchPostal/searchPostal

8.查询包裹:pages/package/package

9.物流详情:pages/logisticsDetail/logisticsDetail

10.我:pages/myself/myself

11.我的订单:pages/order/order

12.我的代金券:pages/vouchers/vouchers

13.绑定手机:pages/mobile/mobile

用到的小程序组件:

view,text,tab,input,form,button,

用到的小程序API:

wx.login,wx.getUserInfo,wx.request, wx.scanCode,

数据接口API

1、显示首页

2、上门取件和密封箱寄件

3、扫码查询

4、订单号查询

5、我的订单

6、寄件人和收件人地址显示

7、编辑和添加地址簿

8、我的代金券

9、登录

10、绑定手机






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