携程旅行微信小程序分析，让我们离小程序更近一点

今天要介绍的是「携程旅行」小程序，携程旅行小程序页面简单明了，共有酒店、机票、火车票、汽车票四大产品入口，基本满足用户出行、住宿的“刚需”。进入小程序后，它会基于地理定位自动运行，为用户推荐附近酒店，并确定机票、火车票的原始出发地。对用户来说是非常方便。

本文重点分析这款微信小程序的主要功能，以及对应的数据接口和采用的小程序组件/API技术。

功能1：显示首页

数据接口：进入首页，显示酒店、机票、火车票等不同类型服务

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

用到的小程序API: wx.request

功能2： 酒店列表|搜索

数据接口：点击“酒店”，进入酒店列表，也可以进行搜索或筛选

用到的小程序组件：view,text,image,input,form,tab

用到的小程序API： wx.request

功能3：酒店详情

数据接口：进入酒店详情，显示酒店的详情并且可以预定酒店

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

用到的小程序API：wx.request,wx.chooseLocation

功能4：提交订单（微信支付）

数据接口：选择酒店，进行预定支付

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

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

功能5：机票、火车票、汽车票列表

数据接口：进入机票、火车票、汽车票，输入起始点、终点和时间，进行搜索

用到的小程序组件：text,view

用到的小程序API：wx.request

功能6：预定车票

数据接口：填写乘机人的信息和电话号码，进行支付

用到的小程序组件：text,view,image,input,form,button

用到的小程序API：wx.request

功能7：添加乘机人

数据接口：点击“添加乘客”,输入乘客的相关信息，进行添加

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

用到的小程序API：wx.request

功能8：景点列表|搜索

数据接口：进入景点门票，可以选择城市，输入目的地进行搜索

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

用到的小程序API：wx.request

功能9：门票详情

数据接口：点击景点门票，查看景点门票的详情信息

用到的小程序组件：text,view

用到的小程序API：wx.request

功能10：门票支付

数据接口：填写订单信息，并且进行支付操作

用到的小程序组件：text,view

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

功能11：我的

数据接口：进入我的，可以查看我的所有订单

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

用到的小程序API：wx.request

总结：「携程旅行」小程序有42个页面，用到的小程序组件有6个，用的小程序API有3个，分别如下：

一

前端页面个数：42

分别为：

1.首页：pages/index/index

2.酒店列表：pages/hotelList/hotelList

3.酒店详情：pages/hotelDetail/hotelDetail

4.酒店图片：pages/hotelPicture/hotelPicture

5.酒店点评：pages/hotelComments/hotelComments

6.选择城市：pages/selectCity/selectCity

7.选择入住日期：pages/selectDate/selectDate

8.预订酒店：pages/hotelBooking/hotelBooking

9.提交订单：pages/submitOrder/submitOrder

10.国内机票：pages/airTickets/airTickets

11.机票城市选择：pages/airCity/airCity

12.搜索详情：pages/searchDetail/searchDetail

13.日历：pages/airCalendar/airCalendar

14.预订机票：pages/airBooking/airBooking

15.添加旅客：pages/addPassengers/addPassengers

16.支付机票：pages/airPay/airPay

17.国内火车票：pages/trainTickets/trainTickets

18.选择日期：pages/selectGoDate/selectGoDate

19.搜索结果：pages/searchList/searchList

20.订单填写：pages/orderInput/orderInput

21.套餐选择：pages/packageSelect/packageSelect

22.新增乘客：pages/addTrainPasse/addTrainPasse

23.立即预订：pages/trainBooking/trainBooking

24.汽车票：pages/carTickets/carTickets

25.汽车票搜索结果：pages/carSearch/carSearch

26.汽车票详情：pages/carTicketsDetail/carTicketsDetail

27.去支付车票：pages/carPay/carPay

28.景点门票：pages/attractions/attractions

29.景点详情：pages/attractionsDetial/attractionsDetial

30.景点订单填写：pages/attrInput/attrInput

31.景点使用日期：pages/useDate/useDate

32.去支付门票：pages/attrPay/attrPay

33.我的：pages/myself/myself

34.会员登录：pages/login/login

35.全部订单：pages/allOrder/allOrder

36.订单详情：pages/orderDetail/orderDetail

37.酒店订单：pages/hotelOrder/hotelOrder

38.机票订单：pages/airOrder/airOrder

39.火车票订单：pages/trainOrder/trainOrder

40.汽车票订单：pages/carOrder/carOrder

41.门票订单：pages/attractOrder/attractOrder

42.优惠券：pages/coupon/coupon

二

用到的小程序组件:

text,view,image,button,form ,tab

用到的小程序API:

wx.request,wx.chooseLocation ,wx.requestPayment

三

数据接口API个数：11

数据接口API：

1、显示首页

2、酒店列表|搜索

3、酒店详情

4、提交订单（微信支付）

5、机票、火车票、汽车票列表

6、预定车票

7、添加乘机人

8、景点列表|搜索

9、门票详情

10、门票支付

11、我的