携程小程序初体验

一场说走就走的旅行开始啦

---

随着小程序的大热，做为一个程序猿，我也开始接触而且大概了解了一个制做小程序的一些过程，为了提升本身的动手能力，因而乎，我开始来仿写携程的小程序，来实现一些基本功能，在仿写的过程当中，也遇到了一些难题，也有了一点收获，但愿能够经过这篇文章与你们共同交流，共同进步。

前言

---

为了更好的开发，咱们须要准备咱们须要的工具：

• 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!