携程小程序的初步体验

随着小程序的普及，作为一个程，我也开始接触和了解一些制作小程序的流程。为了提高动手能力，我开始复制携程的小程序来实现一些基本功能。在临摹的过程中，也遇到了一些问题，收获了一点。希望通过这篇文章和大家交流，共同进步。

前言

为了更好的发展，我们需要准备我们需要的工具：

Vscode:主要用于编写特定的代码。微信开发者工具：通过这个渲染EasyMock:我们可以通过这个网站伪造一些数据供我们使用，非常方便。这是我的数据接口

具体实现

功能效果如下

。

查询功能的实现

1.首先查询前需要得到录入的城市、录入的城市、时间的选择，通过这些条件进行过滤，所以点击查询按钮时需要绑定一个时间，需要携带参数进行查询。

navigator class=' search ' URL='/pages/trainbuy content/trainbuy content？from={ { from } } to={ { to } } train time={ { start date } } ' Query/navigator 2。需要跳转的页面接收参数通过onload事件的选项获取。

var from=options.fromvar to=options.tovar train time=options . train time；3.最重要的是过滤掉相关数据。这里，我们需要一个for循环的判断语句。当请求数据地址URL时，我们可以通过for循环和if语句找出相应数据文件中的json数据。

wx.request({ url: API_BASE，success :(RES)={ for(var I=0；IRES . data . data . trainilist . length；I){ if(from==RES . data . data . train list[I]。from to==RES . data . data . train list[I]。to train time==RES . data . data . train list[I]。train time){ temp . push(RES . data . data . train list[I])；}}这个。setdata({ search edlist : temp })} })4。此时，只需通过for循环将其输出到页面上。

wx : for=' { { search edlist } } ' wx : key=' { { item . id } } ' temp . push(RES . data . data . trainilist[I])；这个。setdata({ searched list : temp })*小程序页面传递值的方式：1.url传递值2。本地存储3。全局应用程序对象

订单查询的实现

这里我采用了全局的app对象保存

1.首先获取全局对象，然后当你点击OK购买成功回调函数时，获取json格式的所有信息。

const app=GetApp()；var trained list=app . global data . trained list；var train item={ from : this . data . from，to: this.data.to，train num : this . data . train num，train time : this . data . train time，total price : this . data . total price }；trained list . push(trainet item)；2.然后在相应的页面上获取全局数组。

:功能(选项){这。setdata({ trained list 3360 app . global data . trained list })}，3。让它通过for循环输出到页面上。