微信小程序 火车票查询实例讲解

下面是针对微信小程序火车票查询实例讲解的详细攻略:

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技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 简单了解Ajax表单序列化的实现方法

    下面是“简单了解Ajax表单序列化的实现方法”的完整攻略。 一、什么是Ajax表单序列化? Ajax表单序列化是AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)技术中的一种常见用法,它可以将表单中的数据自动转换成一组用于HTTP POST请求或GET请求的字符串。这个字符串可以被传递到服务器端,用于…

    JavaScript 2023年5月19日
    00
  • JavaScript实现数字前补“0”的五种方法示例

    JavaScript实现数字前补“0”是一个常见的需求。在编程中,我们经常需要对数字进行前补“0”的操作,以匹配字符串的长度或者满足数据格式的要求。本文将详细讲解五种JavaScript实现数字前补“0”的方法示例。 方法一:字符串拼接 其实,这是最常见的一种方法。可以将数字字符与“0”字符进行拼接,再将结果转换为字符串。拼接前需要判断数字是否占位够用。代码…

    JavaScript 2023年5月28日
    00
  • Javascript Dom元素获取和添加详解

    关于JavaScript中Dom元素获取和添加,可以分为如下几个方面进行讲解: 一、Dom元素获取 Dom元素是页面上的元素,我们可以通过JavaScript代码获取到Dom元素以便进行操作,下面介绍一些常用的Dom元素获取方式: 1. document.getElementById 这是获取单个元素最常用的方法,通过元素id获取单个Dom元素: var e…

    JavaScript 2023年6月10日
    00
  • Vue设置keepAlive不生效问题及解决

    一起来详细讲解“Vue设置keepAlive不生效问题及解决”的完整攻略。 问题描述 在Vue开发中,我们通过设置keep-alive组件来缓存页面状态,避免重复渲染页面的性能瓶颈。但是,有时候我们可能会遇到这样的问题:设置了keep-alive却不生效,每次页面跳转都会重新渲染页面,这是为什么呢?如何解决这个问题呢? 原因分析 keep-alive组件默认…

    JavaScript 2023年6月11日
    00
  • js脚本学习 比较实用的基础

    JS脚本学习 比较实用的基础攻略 前言 JavaScript是一种常用的编程语言,广泛用于Web前端和服务器后端开发,现如今几乎所有的网站都离不开JavaScript的支持。本文将介绍JS的一些脚本基础知识,以及一些实用的基础操作方法,旨在帮助初学者快速入门JS。 一、学习资源 MDN Web 文档是JS官方文档,包含了JS的语法、API、示例等详细资料。 …

    JavaScript 2023年6月11日
    00
  • js 数据存储和DOM编程

    JS 数据存储和 DOM 编程攻略 概述 JavaScript 是一种具有灵活性和交互性的编程语言,它在 Web 开发中扮演着重要的角色。其中,数据存储是支撑 Web 应用程序的关键之一,DOM 编程则是实现动态 Web 应用程序的重要手段之一。 本攻略将向您介绍如何使用 JS 实现数据存储和 DOM 编程的基本知识。本攻略分为以下两个部分: JS 数据存储…

    JavaScript 2023年6月10日
    00
  • js中Array对象的常用遍历方法详解

    下面是“js中Array对象的常用遍历方法详解”的完整攻略。 一、前言 在JavaScript中,数组(Array)是一种常用的数据类型,很多时候需要对数组进行遍历和处理。本篇文章将带大家详细讲解JavaScript中Array对象的常用遍历方法。 二、常用遍历方法 1. forEach forEach方法是ES5中Array对象自带的方法,主要用于遍历数组…

    JavaScript 2023年5月27日
    00
  • 使用JS获取当前地理位置方法汇总

    介绍:本文主要介绍使用JavaScript获取当前地理位置的方法,并提供了相关的代码示例,帮助开发人员更快地集成获取地理位置的功能。 HTML5 Geolocation API HTML5 Geolocation API是W3C定制的用于获取用户地理位置信息的标准API,它可以使用纯JavaScript来获取用户的GPS坐标信息,这是一种免费的获取位置的方法…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部