A quick trip began

As small programs, ape as a program, I also started to contact and know about some process was made a small program, in order to improve their own ability, as a result, I began to copy write ctrip small procedures, to achieve some basic functions, in the process of copy writing, also met with some problems, also have a little bit of harvest, I hope I can communicate with you and make progress together through this article.

preface

For better development, we need to prepare the tools we need:

  • Vscode: here is mainly used for the preparation of specific code
  • Wechat developer tools: Look at the renderings here
  • EasyMock: Through this website we can forge some data for our use, very convenient. This is mineData interface

The specific implementation

Function effects are as follows

The realization of query function

1. First of all, the input city and the city to be visited as well as the selection of time should be obtained before the query. Therefore, a time should be bound when clicking the query button and parameters should be carried for the query

<navigator class="search"  url="/pages/trainBuyContent/trainBuyContent? from={{from}}&to={{to}}&trainTime={{startDate}}"< / > query the navigator >Copy the code

2. The parameters to be sent to the page can be obtained from options of the onLoad event

    var from = options.from;
    var to = options.to;
    var trainTime = options.trainTime;
Copy the code

3. The most important thing is to screen out relevant data. Here, a judgment statement of the for loop is needed to find the corresponding JSON data in the corresponding data file through the for loop and if statement when requesting the data address URL.

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
        })
      }
    })
Copy the code

4. At this point, the page through the for loop output is ok

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

* Applets page value transfer method: 1. Url value transfer 2. Local storage 3

Order query implementation

I’m using the global app object save here

1. Get the global object first, and then get all the information in a JSON format when you click on the success callback to confirm the purchase

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);
Copy the code

2. Then fetch the global array on the corresponding page

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

3. Make it output on the page through a for loop

Other features

Some functions are not displayed or not perfect, please forgive me.

The source address

GitHub address: github.com/yrq1429/yrq…

A small summary

Published for the first time a little nervous, writing is not good hope you understand, to be honest, in my opinion, this time by writing can be a bit “rough”, but still very happy I can insist on writing, functional aspects will continue to improve, hope to get everyone’s opinions and Suggestions, nothing to say, continue to work, I see road, Just do it!