以攜程旅行微信小程序 談旅游類小程序開發(fā)

旅游類小程序開發(fā)已經(jīng)是當下最熱門的話題，下面將從多方面來談談攜程旅行微信小程序相關的內(nèi)容。

今天要介紹的是「攜程旅行」小程序，攜程旅行小程序頁面簡單明了，共有酒店、機票、火車票、汽車票四大產(chǎn)品入口，基本滿足用戶出行、住宿的“剛需”。進入小程序后，它會基于地理定位自動運行，為用戶推薦附近酒店，并確定機票、火車票的原始出發(fā)地。對用戶來說是非常方便。

本文重點分析這款微信小程序的主要功能，以及對應的數(shù)據(jù)接口和采用的小程序組件/API技術。

功能1：顯示首頁

數(shù)據(jù)接口：進入首頁，顯示酒店、機票、火車票等不同類型服務

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

用到的小程序API: wx.request

功能2： 酒店列表|搜索

數(shù)據(jù)接口：點擊“酒店”，進入酒店列表，也可以進行搜索或篩選

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

用到的小程序API： wx.request

功能3：酒店詳情

數(shù)據(jù)接口：進入酒店詳情，顯示酒店的詳情并且可以預定酒店

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

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

功能4：提交訂單（微信支付）

數(shù)據(jù)接口：選擇酒店，進行預定支付

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

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

功能5：機票、火車票、汽車票列表

數(shù)據(jù)接口：進入機票、火車票、汽車票，輸入起始點、終點和時間，進行搜索

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

用到的小程序API：wx.request

功能6：預定車票

數(shù)據(jù)接口：填寫乘機人的信息和電話號碼，進行支付

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

用到的小程序API：wx.request

功能7：添加乘機人

數(shù)據(jù)接口：點擊“添加乘客”,輸入乘客的相關信息，進行添加

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

用到的小程序API：wx.request

功能8：景點列表|搜索

數(shù)據(jù)接口：進入景點門票，可以選擇城市，輸入目的地進行搜索

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

用到的小程序API：wx.request

功能9：門票詳情

數(shù)據(jù)接口：點擊景點門票，查看景點門票的詳情信息

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

用到的小程序API：wx.request

功能10：門票支付

數(shù)據(jù)接口：填寫訂單信息，并且進行支付操作

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

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

功能11：我的

數(shù)據(jù)接口：進入我的，可以查看我的所有訂單

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

用到的小程序API：wx.request

總結：「攜程旅行」小程序有42個頁面，用到的小程序組件有6個，用的小程序API有3個，分別如下：

一

前端頁面?zhèn)€數(shù)：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.國內(nèi)機票：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.國內(nèi)火車票：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.優(yōu)惠券：pages/coupon/coupon

二

用到的小程序組件:

text,view,image,button,form ,tab

用到的小程序API:

wx.request,wx.chooseLocation ,wx.requestPayment

三

數(shù)據(jù)接口API個數(shù)：11

數(shù)據(jù)接口API：

1、顯示首頁

2、酒店列表|搜索

3、酒店詳情

4、提交訂單（微信支付）

5、機票、火車票、汽車票列表

6、預定車票

7、添加乘機人

8、景點列表|搜索

9、門票詳情

10、門票支付

11、我的