攜程小程式初體驗

YRQ1429發表於2018-06-09

攜程小程式初體驗

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

隨著小程式的大熱，作為一個程式猿，我也開始接觸並且大概瞭解了一個製作小程式的一些過程，為了提高自己的動手能力，於是乎，我開始來仿寫攜程的小程式，來實現一些基本功能，在仿寫的過程中，也遇到了一些難題，也有了一點收穫，希望可以通過這篇文章與大家共同交流，共同進步。

前言

為了更好的開發，我們需要準備我們需要的工具：

  • 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地址：github.com/yrq1429/yrq…

小總結

第一次發表文章有點小慌張，寫的不好希望大家諒解，說實話，在我看來，這次所寫的東西確實有點'糙'，但還是很開心自己能堅持寫下來，功能方面以後會繼續完善，希望能得到各位大佬們的意見和建議，沒啥說的，繼續努力吧，路漫漫其修遠兮，Just do it!

攜程小程式初體驗

相關文章