摘要:前言为了更好的开发,我们需要准备我们需要的工具这里主要用来具体代码的编写微信开发者工具通过这个看效果图通过这个网站可以伪造一些数据来供我们使用,非常方便。
一场说走就走的旅行开始啦
随着小程序的大热,作为一个程序猿,我也开始接触并且大概了解了一个制作小程序的一些过程,为了提高自己的动手能力,于是乎,我开始来仿写携程的小程序,来实现一些基本功能,在仿写的过程中,也遇到了一些难题,也有了一点收获,希望可以通过这篇文章与大家共同交流,共同进步。
前言为了更好的开发,我们需要准备我们需要的工具:
Vscode:这里主要用来具体代码的编写
微信开发者工具:通过这个看效果图
EasyMock: 通过这个网站可以伪造一些数据来供我们使用,非常方便。这个是我的数据接口
具体实现 功能效果如下 查询功能的实现1.首先需要在查询之前获取输入的所在城市以及到的城市,以及时间的选择,通过这些条件去筛选,所以需要在点击查询按钮的时候绑定一个时间,需要携带参数去进行查询
查询
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;i4.这时候再在页面通过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!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113485.html
摘要:准备工作开发工具下载地址竟然隐藏在一个超链接里,真的很不醒目啊文档地址初次体验新建项目的时候,可以选择是小程序小游戏,这次我体验的是小程序的开发。可以配置小程序边界的,如顶部的导航栏的一些样式。 很早前就想体验一把小程序的开发了,如果熟悉三大框架的话,小程序的开发还是很容易上手的,所以只要跟着做一个小应用,加上官方的文档就十分好学了。加上官方提供的开发工具也比较简洁好用,初次体验的我觉...
阅读 1678·2021-10-13 09:39
阅读 1256·2019-08-30 13:58
阅读 1368·2019-08-29 16:42
阅读 3521·2019-08-29 15:41
阅读 2971·2019-08-29 15:11
阅读 2421·2019-08-29 14:10
阅读 3375·2019-08-29 13:29
阅读 2068·2019-08-26 13:27