作为在线旅游OTA的龙头老大，携程旅行在微信宣布小程序上线的当天就推出了「携程旅行」小程序.但是那会小程序都还不成熟，粗略看了一下功能就没有仔细研究。但是小程序已经上线2个多月了，对于在线旅游这样的行业，2个多月足以让一个产品成熟！所以今天要介绍的是「携程旅行」小程序！携程旅行小程序页面简单明了，共有酒店、机票、火车票、汽车票四大产品入口，基本满足用户出行、住宿的“刚需”。进入小程序后，它会基于地理定位自动运行，为用户推荐附近酒店，并确定机票、火车票的原始出发地。对用户来说是非常方便。
本文重点分析这款微信小程序的主要功能，以及对应的数据接口和采用的小程序组件/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个，分别如下：
1
前端页面个数：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
2
用到的小程序组件:
text,view,image,button,form ,tab
用到的小程序API:
wx.request,wx.chooseLocation ,wx.requestPayment
3
数据接口API个数：11
数据接口API：
1、显示首页
2、酒店列表|搜索
3、酒店详情
4、提交订单（微信支付）
5、机票、火车票、汽车票列表
6、预定车票
7、添加乘机人
8、景点列表|搜索
9、门票详情
10、门票支付
11、我的订单
爱盈利（aiyingli.com）移动互联网具影响力的盈利指导网站。定位于服务移动互联网创业者，移动盈利指导。我们的目标是让盈利目标清晰可见！降低门槛，让缺乏经验、资金有限的个人和团队获得经验和机会，提高热情，激发产品。
