随着小程序的大热,作为一个程序猿,我也开始接触并且大概了解了一个制作小程序的一些过程,为了提高自己的动手能力,于是乎,我开始来仿写携程的小程序,来实现一些基本功能,在仿写的过程中,也遇到了一些难题,也有了一点收获,希望可以通过这篇文章与大家共同交流,共同进步。 前言为了更好的开发,我们需要准备我们需要的工具:
具体实现功能效果如下查询功能的实现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循环让其输出在页面 |
携程小程序初体验
发布:2018-06-12 10:39浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08