云开发实现——智行微信小程序

于 2020-04-24 22:49:11 发布
阅读量2.4k 收藏 25
点赞数 1
分类专栏： 微信小程序开发 文章标签： javascript css node.js html5 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42202174/article/details/105741209
版权

源码下载地址：https://github.com/gaojing2262/WXAPP_ZhiXing

记得Star哟

1.小程序中主要实现了智行火车票、机票信息的搜索功能

（1）小程序中实现了顶部轮播图

（2）火车票与飞机票的切换效果

（3）出发城市与到达城市的切换

（4）根据时间选择器进行票务筛选功能

最终实现的UI效果：

2.轮播图部分的实现：

<view class="content">
  <view class="header" style="height:80px;">
    <swiper style="height:100%" indicator-dots="true" autoplay='true' interval='3000'>
      <block wx:for="{{swipers}}" wx:key="{{item}}">
        <swiper-item>
          <image src="{{item.url}}" mode="widthFix" style="width:100%"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>

indicator-dots="true"  显示面板指示点

autoplay='true'：       实现自动播放

interval='3000'          每一张图显示的时间间隔

 wx:for="{{swipers}}" ：  从云数据库的swipers表中读取数据，图片的存取方式为url链接

可参考微信小程序云开发数据库指引：

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html

 

3.火车票、飞机票样式的切换效果

该功能的实现主要是借助三目表达式来实现的，源码如下：

 <view class="searchbar">
    <view id="1" class="{{currentId == 1? 'selected' : 'unselected'}}" bindtap="switchChange">火车票</view>
    <view id="2" class="{{currentId == 2? 'selected' : 'unselected'}}" bindtap="switchChange">飞机票</view>
  </view>

.searchbar {
  display: flex;
  flex-direction: row;
  text-align: center;
  margin-top: -20px;
  margin-left: 14px;
  width: 90%;
  height: 40px;
  border-radius: 0.5em 0.5em 0 0;
  opacity: 0.7;
  background: #696969;
}

.selected {
  color: #000;
  background: #fff;
  width: 40%;
  height: 40px;
  margin: 0 auto;
  line-height: 40px;
  text-align: center;
  opacity: 1;
}

.unselected {
  color: #fff;
  background: #696969;
  width: 40%;
  height: 40px;
  margin: 0 auto;
  line-height: 40px;
  text-align: center;
}

data：{
 currentId: 1,
}

switchChange: function (e) {
    var id = e.currentTarget.id;
    this.setData({
      currentId: id
    })
    if (id != 1) {
      wx.switchTab({
        url: '../plane/plane',
      })
    }
  },

实现的原理：

      首先给火车票及飞机票的view部分赋值id为1和2，添加一个点击事件switchChange，通过点击事件获取当前view的id值，当两部分view的id分别为1和2，即点击哪个view，该部分就显示为选中状态。

 

4.出发地、目的地、两地切换效果、出发日期选择的实现

 

 代码如下：


  <view class="place">
    <view class="weui-cell__bd heb">
      <picker bindchange="bindSrcCityChange" value="{{srcCityIndex}}" range="{{cities}}" range-key="name">
        <view class="weui-select weui-select_in-select-after">{{cities[srcCityIndex].name}}</view>
      </picker>
    </view>

    <view class="ima">
      <image src="../images/icon/hcp/xz.jpg" style="width:45px;height:45px" mode="widthFix" bindtap="switchCity"></image>
    </view>


    <view class="weui-cell__bd bj">
      <picker bindchange="bindDesCityChange" value="{{desCityIndex}}" range="{{cities}}" range-key="name">
        <view class="weui-select weui-select_in-select-after">{{cities[desCityIndex].name}}</view>
      </picker>
    </view>

  </view>

  <view class="go">
    <view class="weui-cell__bd date">
      <picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="bindDateChange">
        <view class="weui-input">{{date}}</view>
      </picker>
    </view>

    <view class="day">

      <view class="weui-input" bindchange="bindDateChange">{{week}}</view>

    </view>
    <view class="qj">
      <image src="../images/icon/hcp/qj.png" style="width:24px;height:24px" mode="widthFix"></image>
    </view>
  </view>


  <view class="type">
    <view class="gt">高铁动车</view>
    <view class="weui-cell__ft">
      <switch checked color="#26a2ff" />
    </view>
    <view class="xs">学生票</view>
    <view class="weui-cell__ft">
      <switch checked color="#26a2ff" />
    </view>
  </view>

  <view class="query">
    <button class="cx" bindtap="Select">查询</button>
  </view>


.place {
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 50px;
  margin: 0 auto;
}

.heb {
  padding-top: 12px;
  width: 30%;
  height: 50px;
  text-align: center;
  color: #000;
  margin: 10 auto;
  font-weight: bold;
}

.ima {
  margin-left: 30px;
  margin-top: 15px;
  width: 30%;
}

.bj {
  padding-top: 12px;
  width: 30%;
  height: 50px;
  text-align: center;
  color: #000;
  margin: 10 auto;
  font-weight: bold;
}

.go {
  width: 90%;
  height: 45px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}

.date {
  padding-top: 12px;
  width: 40%;
  height: 45px;
  text-align: center;
  margin: 0 auto;
  font-weight: bold;
}

.day {
  padding-top: 12px;
  width: 60%;
  height: 45px;
  text-align: right;
  margin: 0 auto;
  color: #1e90ff;
}

.qj {
  padding-top: 12px;
  width: 7%;
  margin: 0 auto;
}

.type {
  width: 90%;
  height: 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}

.gt {
  padding-top: 6px;
  width: 30%;
  height: 45px;
  text-align: left;
  margin-left: 0px;
  margin: 0 auto;
}

.xs {
  padding-top: 6px;
  width: 20%;
  height: 45px;
  text-align: center;
  margin: 0 auto;
}

.query {
  width: 85%;
  height: 45px;
  background: #1e90ff;
  margin: 0 auto;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
}

.cx {
  color: #fff;
  padding-top: 0px;
}

.other {
  width: 90%;
  height: 25px;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}
.ls{
  width: 45%;
  color: #696969;
  font-size: 13px;
  margin: 3px 20px;
  text-align: center

}

.cy {
  width: 90%;
  margin: -2px auto;
  height: 25px;
}

.fw {
  width: 90%;
  height: 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}

.qp {
  width: 25%;
  height: 45px;
  margin-left: 15px;
}

.xz {
  width: 25%;
  height: 45px;
  margin-left: 20px;
}

.hh {
  width: 25%;
  height: 45px;
  margin-left: 20px;
}

.jd {
  width: 25%;
  height: 45px;
  margin-left: 20px;
}

.fw-2 {
  width: 90%;
  height: 10px;
  margin: 5px auto;
  display: flex;
  flex-direction: row;
}

.qb-2 {
  width: 25%;
  height: 10px;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
}
.weui-cell__ft{
  zoom: 0.7;
  margin: 9px auto
}

 

data: {
    swipers: [
      '/images/haibao/1.jpg',
      '/images/haibao/2.jpg',
      '/images/haibao/3.jpg'
    ],
    currentId: 1,
    cities: [
      "石家庄", "乌鲁木齐", "北京", "上海", "广州", "深圳", "天津", "重庆", "武汉", "长沙", "太原",
      "兰州", "西宁", "南京", "郑州", "沈阳",
    ],
    srcCityIndex: 1,
    desCityIndex: 2,
    date: [
      "2019-11-13"
    ],
    week: '周四'

  },

/**
   * 出发地
   */
  bindSrcCityChange: function (e) {
    this.setData({
      srcCityIndex: e.detail.value
    })
  },
  /**
   * 目的地
   */
  bindDesCityChange: function (e) {
    this.setData({
      desCityIndex: e.detail.value
    })
  },

  /**
   * 交换地址
   */
  switchCity: function (e) {
    var i = this.data.srcCityIndex
    var j = this.data.desCityIndex
    this.setData({
      srcCityIndex: j,
      desCityIndex: i

    })

  },
  /**
   * 星期切换
   */
  bindDateChange: function (e) {
    var currentDate = new Date(e.detail.value)
    var weekString = '周三'
    switch (currentDate.getDay()) {
      case 1:
        weekString = '周一'
        break
      case 2:
        weekString = '周二'
        break
      case 3:
        weekString = '周三'
        break
      case 4:
        weekString = '周四'
        break
      case 5:
        weekString = '周五'
        break
      case 6:
        weekString = '周六'
        break
      default:
        weekString = '周日'
    }

    this.setData({
      date: currentDate.getMonth() + 1 + '月' + currentDate.getDate() + '日',
      week: weekString,
      currentDate: currentDate

    })
  },
  Select: function (e) {
    wx.navigateTo({
      url: '/pages/tickets/tickets?srcStation=' + this.data.cities[this.data.srcCityIndex].name +
        "&desStation=" + this.data.cities[this.data.desCityIndex].name + "&date=" + this.data.date + "&week=" + this.data.week + "&currentDate=" + this.data.currentDate
    })
  },

5.航班信息数据库

 

 

Anagnahs
关注
专栏目录
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值