下面是针对微信小程序火车票查询实例讲解的详细攻略:
1. 了解API和数据格式
在开始前,我们要了解火车票查询所需要使用的API和数据格式。一般来说,我们需要使用第三方提供的API来进行火车票查询。常用的API有12306、高德等。这里以12306 API为例进行讲解。12306 API的请求地址为https://kyfw.12306.cn/otn/leftTicket/query
,请求参数包括:
leftTicketDTO.train_date
:出发日期(格式为YYYY-MM-DD
)leftTicketDTO.from_station
:出发站点三字码leftTicketDTO.to_station
:到达站点三字码purpose_codes
:乘客类型代码(成人票为ADULT
,学生票为0X00
)
返回的数据格式为JSON格式,包括所有可预定的车次信息,每个车次信息包括车次号、出发时间、到达时间、历时、商务座、特等座、一等座、二等座等座位信息。
2. 构建页面和布局
构建页面和布局是小程序开发的第一步。在小程序中,我们使用WXML和WXSS来构建页面和布局。在构建火车票查询页面时,我们可以使用基础组件和自定义组件来构建。根据界面设计,我们可以创建一个输入框、一个查询按钮和一个结果列表。其中,输入框用来输入日期、出发站和到达站信息,查询按钮用来触发查询操作,结果列表用来展示查询结果。
示例代码如下:
<view class="container">
<view class="inputs">
<view class="input">
<label class="label">出发日期</label>
<input class="date" value="{{date}}" bindinput="bindDateChange" />
</view>
<view class="input">
<label class="label">出发站</label>
<input class="station" value="{{fromStation}}" bindinput="bindFromStationChange" />
</view>
<view class="input">
<label class="label">到达站</label>
<input class="station" value="{{toStation}}" bindinput="bindToStationChange" />
</view>
</view>
<view class="button" bindtap="query">查询</view>
<view class="result" wx:if="{{result.length}}">
<view class="row header">
<text class="left">车次</text>
<text class="right">出发/到达</text>
<text class="right">历时</text>
<text class="right">商务座</text>
<text class="right">特等座</text>
<text class="right">一等座</text>
<text class="right">二等座</text>
</view>
<scroll-view class="list" scroll-y="true">
<view class="row" wx:for="{{result}}">
<text class="left">{{item.trainNum}}</text>
<text class="right">{{item.departTime}}/{{item.arriveTime}}</text>
<text class="right">{{item.duration}}</text>
<text class="right">{{item.businessSeat}}</text>
<text class="right">{{item.luxurySeat}}</text>
<text class="right">{{item.firstSeat}}</text>
<text class="right">{{item.secondSeat}}</text>
</view>
</scroll-view>
</view>
</view>
3. 实现查询逻辑和数据绑定
在小程序中,我们使用JavaScript实现页面的逻辑和实现与API的交互。在查询火车票的功能中,我们需要在点击查询按钮后,获取输入框中的信息,构造API请求并发送请求。请求返回后,我们需要将返回的数据绑定到结果列表中。在小程序中,我们使用WXS来处理页面中的逻辑和与API的交互。需要注意的是,由于小程序是运行在客户端的,而非服务器上,因此需要注意调用API时的跨域问题。
示例代码如下:
Page({
data: {
date: '',
fromStation: '',
toStation: '',
result: []
},
bindDateChange: function(e) {
this.setData({
date: e.detail.value
})
},
bindFromStationChange: function(e) {
this.setData({
fromStation: e.detail.value
})
},
bindToStationChange: function(e) {
this.setData({
toStation: e.detail.value
})
},
query: function() {
if (!this.data.date || !this.data.fromStation || !this.data.toStation) {
wx.showToast({
title: '请输入查询条件',
icon: 'none'
})
return
}
wx.showLoading({
title: '查询中',
})
wx.request({
url: 'https://kyfw.12306.cn/otn/leftTicket/query',
data: {
leftTicketDTO: {
train_date: this.data.date,
from_station: this.data.fromStation,
to_station: this.data.toStation
},
purpose_codes: 'ADULT'
},
success: (res) => {
console.log(res.data.data.result)
this.setData({
result: res.data.data.result.map((item) => ({
trainNum: item[3],
departTime: item[8],
arriveTime: item[9],
duration: item[10],
businessSeat: item[32],
luxurySeat: item[25],
firstSeat: item[31],
secondSeat: item[30]
}))
})
wx.hideLoading()
},
fail: () => {
wx.showToast({
title: '查询失败',
icon: 'none'
})
wx.hideLoading()
}
})
}
})
在实现查询逻辑和数据绑定时,我们首先添加了一个输入框、一个查询按钮和一个结果列表的事件监听。在输入框中输入或更改内容时,触发相应的监听函数并更新数据。在点击查询按钮时,判断输入框中是否有内容,如果有则构造API请求并发送请求。请求返回后,将返回的数据绑定到结果列表中。
4. 使用CSS美化界面
最后, 我们使用CSS美化界面,为页面增加一些交互和动态效果。在小程序中,我们使用WXSS来定义样式。在火车票查询页面中,我们可以为输入框添加边框、调整字体大小和颜色,为查询按钮添加背景颜色和圆角效果,为结果列表添加行间隔和配色效果。
示例代码如下:
.container {
padding: 20rpx;
}
.inputs {
margin-bottom: 20rpx;
}
.input {
display: inline-flex;
align-items: center;
margin-right: 30rpx;
margin-bottom: 20rpx;
}
.label {
font-size: 28rpx;
color: #333;
margin-right: 20rpx;
}
.date, .station {
font-size: 28rpx;
border: 1px solid #ccc;
padding: 10rpx;
border-radius: 5rpx;
}
.button {
display: inline-block;
width: 100%;
font-size: 28rpx;
text-align: center;
padding: 20rpx 0;
background-color: #3cc51f;
border-radius: 5rpx;
color: #fff;
margin-bottom: 20rpx;
}
.result {
margin-bottom: 20rpx;
}
.header {
display: flex;
background-color: #e1e1e1;
padding: 10rpx;
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx;
border-bottom: 1px solid #ccc;
font-size: 28rpx;
color: #333;
}
.left {
flex: 1;
margin-right: 10rpx;
}
.right {
flex: 1;
text-align: right;
}
.list {
height: 300rpx;
margin-top: 10rpx;
}
综上所述,以上就是微信小程序火车票查询实例讲解的完整攻略。开发者可以根据需求自行调整,在这个基础上添加更多的功能和特效,增加用户体验。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序 火车票查询实例讲解 - Python技术站