当前位置: 首页 > news >正文

携程小程序初体验

一场说走就走的旅行开始啦


随着小程序的大热,作为一个程序猿,我也开始接触并且大概了解了一个制作小程序的一些过程,为了提高自己的动手能力,于是乎,我开始来仿写携程的小程序,来实现一些基本功能,在仿写的过程中,也遇到了一些难题,也有了一点收获,希望可以通过这篇文章与大家共同交流,共同进步。

前言


为了更好的开发,我们需要准备我们需要的工具:

  • Vscode:这里主要用来具体代码的编写
  • 微信开发者工具:通过这个看效果图
  • EasyMock: 通过这个网站可以伪造一些数据来供我们使用,非常方便。这个是我的数据接口

具体实现


功能效果如下

查询功能的实现

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循环让其输出在页面

其他功能

还有一部分功能未能展示或者未完善,请大家见谅。

源码地址

GitHub地址:https://github.com/yrq1429/yrq_js_fullstack/tree/master/wxapp/Ctrip

小总结

第一次发表文章有点小慌张,写的不好希望大家谅解,说实话,在我看来,这次所写的东西确实有点'糙',但还是很开心自己能坚持写下来,功能方面以后会继续完善,希望能得到各位大佬们的意见和建议,没啥说的,继续努力吧,路漫漫其修远兮,Just do it!

相关文章:

  • java虚拟机之垃圾回收算法
  • 10分钟了解JS堆、栈以及事件循环的概念
  • 常见面试题—css实现垂直水平居中
  • hyperLedger fabric 从0到1 + End2EndIT源码解析
  • 天猫校园店一个月签约100家高校!未来要服务2000万高校人群
  • T-SQL 簡易小數處理
  • 基于 CentOS 搭建 WordPress 个人博客
  • eclipse部署jrebel热启动后报错java.lang.OutOfMemoryError: PermGen space问题
  • Powershell渗透测试系列–进阶篇
  • 【leetcode】802. Find Eventual Safe States
  • 架构的代码结构
  • 做RAID1 遇到种种问题
  • jira安装
  • 对指定多个目录的第一级保留进行保留(再递归删除空目录)
  • C++之const类成员变量,const成员函数
  • 2017 前端面试准备 - 收藏集 - 掘金
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • C++类中的特殊成员函数
  • JavaScript DOM 10 - 滚动
  • PHP 程序员也能做的 Java 开发 30分钟使用 netty 轻松打造一个高性能 websocket 服务...
  • rabbitmq延迟消息示例
  • spring cloud gateway 源码解析(4)跨域问题处理
  • uva 10370 Above Average
  • V4L2视频输入框架概述
  • vuex 学习笔记 01
  • 不用申请服务号就可以开发微信支付/支付宝/QQ钱包支付!附:直接可用的代码+demo...
  • 从setTimeout-setInterval看JS线程
  • 搭建gitbook 和 访问权限认证
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践,瞭望未来城市源起 ...
  • const的用法,特别是用在函数前面与后面的区别
  • LevelDB 入门 —— 全面了解 LevelDB 的功能特性
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • $分析了六十多年间100万字的政府工作报告,我看到了这样的变迁
  • %3cli%3e连接html页面,html+canvas实现屏幕截取
  • (1)(1.9) MSP (version 4.2)
  • (ibm)Java 语言的 XPath API
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (附源码)基于SpringBoot和Vue的厨到家服务平台的设计与实现 毕业设计 063133
  • (转)重识new
  • .net core控制台应用程序初识
  • .net FrameWork简介,数组,枚举
  • .net的socket示例
  • @Autowired多个相同类型bean装配问题
  • @cacheable 是否缓存成功_Spring Cache缓存注解
  • @ComponentScan比较
  • @manytomany 保存后数据被删除_[Windows] 数据恢复软件RStudio v8.14.179675 便携特别版...
  • @RequestBody详解:用于获取请求体中的Json格式参数
  • [ SNOI 2013 ] Quare
  • [16/N]论得趣
  • [BROADCASTING]tensor的扩散机制
  • [Everyday Mathematics]20150130
  • [Hadoop in China 2011] Hadoop之上 中国移动“大云”系统解析
  • [hive]中的字段的数据类型有哪些
  • [InnoDB系列] -- SHOW INNODB STATUS 探秘
  • [Java][Android][Process] ProcessBuilder与Runtime差别