欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 最新携程小程序初体验

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

最新携程小程序初体验

发布时间:2020-10-18  

功能效果如下

最新携程小程序初体验

 

查询功能的实现

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循环让其输出在页面

最新携程小程序初体验

其他功能

还有一部分功能未能展示或者未完善,请大家见谅。

  小总结

第一次发表文章有点小慌张,写的不好希望大家谅解,说实话,在我看来,这次所写的东西确实有点'糙',但还是很开心自己能坚持写下来,功能方面以后会继续完善,希望能得到各位大佬们的意见和建议,没啥说的,继续努力吧,路漫漫其修远兮,Just do it!

最新携程小程序初体验

本文标签

: