攜程小程序初體驗

一場說走就走的旅行開始啦

---

隨着小程序的大熱，做爲一個程序猿，我也開始接觸而且大概瞭解了一個製做小程序的一些過程，爲了提升本身的動手能力，因而乎，我開始來仿寫攜程的小程序，來實現一些基本功能，在仿寫的過程當中，也遇到了一些難題，也有了一點收穫，但願能夠經過這篇文章與你們共同交流，共同進步。

前言

---

爲了更好的開發，咱們須要準備咱們須要的工具：

• Vscode：這裏主要用來具體代碼的編寫
• 微信開發者工具：經過這個看效果圖
• EasyMock: 經過這個網站能夠僞造一些數據來供咱們使用，很是方便。這個是個人數據接口

具體實現

---

功能效果以下

查詢功能的實現

1.首先須要在查詢以前獲取輸入的所在城市以及到的城市，以及時間的選擇，經過這些條件去篩選，因此須要在點擊查詢按鈕的時候綁定一個時間，須要攜帶參數去進行查詢

<navigator class="search"  url="/pages/trainBuyContent/trainBuyContent?from={{from}}&to={{to}}&trainTime={{startDate}}">查詢</navigator>

2.須要到跳轉的頁面接收參數經過onload事件的options獲取

var from = options.from;
    var to = options.to;
    var trainTime = options.trainTime;

3.最重要的是篩選出相關數據，這裏須要一個for循環的判斷語句，在請求數據地址URL的時候，經過for循環和if語句找出相對應的數據文件裏面所對應的json數據。

wx.request({
      url: API_BASE,
      success: (res) => {
        for(var i=0;i<res.data.data.trainList.length;i++){
          if (from == res.data.data.trainList[i].from && to == res.data.data.trainList[i].to && trainTime == res.data.data.trainList[i].trainTime){
            temp.push(res.data.data.trainList[i]);
          }
        }
        this.setData({
          searchedList:temp
        })
      }
    })

4.這時候再在頁面經過for循環輸出就能夠了

wx:for="{{searchedList}}"
wx:key="{{item.id}}"
temp.push(res.data.data.trainList[i]);
this.setData({
          searchedList:temp
        })

`
*小程序頁面傳值的方式：1.url傳值2.本地儲存3.全局的app對象
`

訂單查詢的實現

這裏我採用了全局的app對象保存

1.先獲取全局對象，而後在點擊肯定購買的success回調函數的時，去獲取全部的信息，以一個json格式去獲取

const app = getApp();
var trainedList = app.globalData.trainedList;
var trainItem = {
          from: this.data.from, 
          to: this.data.to,  
          trainNum: this.data.trainNum,
          trainTime: this.data.trainTime,
          totalPrice: this.data.totalPrice
        };
trainedList.push(trainItem);

2.而後在相應的頁面去獲取這個全局的數組

onLoad: function (options) {
    this.setData({
      trainedList: app.globalData.trainedList
    })
    
  },

3.經過一個for循環讓其輸出在頁面

其餘功能

還有一部分功能未能展現或者未完善，請你們見諒。

源碼地址

GitHub地址：https://github.com/yrq1429/yrq_js_fullstack/tree/master/wxapp/Ctrip

小總結

第一次發表文章有點小慌張，寫的很差但願你們諒解，說實話，在我看來，此次所寫的東西確實有點'糙'，但仍是很開心本身能堅持寫下來，功能方面之後會繼續完善，但願能獲得各位大佬們的意見和建議，沒啥說的，繼續努力吧，路漫漫其修遠兮，Just do it!