携程小程序初体验

Charlie_Jade 发布于2019-08-29 15:41 / 3408人阅读

摘要：前言为了更好的开发，我们需要准备我们需要的工具这里主要用来具体代码的编写微信开发者工具通过这个看效果图通过这个网站可以伪造一些数据来供我们使用，非常方便。

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

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

前言

为了更好的开发，我们需要准备我们需要的工具：

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;i
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!

混合云 idc机房托管初体验小程序体验免费体验小程序小程序体验版

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113485.html

携程小程序初体验

摘要：前言为了更好的开发，我们需要准备我们需要的工具这里主要用来具体代码的编写微信开发者工具通过这个看效果图通过这个网站可以伪造一些数据来供我们使用，非常方便。 showImg(https://segmentfault.com/img/remote/1460000015238794); 一场说走就走的旅行开始啦随着小程序的大热，作为一个程序猿，我也开始接触并且大概了解了一个制作小程序的一...

leonardofed 2019-08-05 14:07 评论0 收藏0
微信小程序体验(1)：携程酒店机票火车票

摘要：扫一扫携程提供的二维码之后，看到携程小程序的名字为携程酒店机票火车票。我拒绝了，不过据携程方面说可以基于地理定位自动运行，为用户推荐附近酒店，并确定机票火车票的原始出发地。在 12 月 28 日微信公开课上，张小龙对微信小程序的形态进行了阐释，小程序有四个特定：无需安装、触手可及、用完即走、无需卸载。由于携程这种订酒店、火车票和机票等工具性质非常强的服务，非常符合张小龙的对小程序的...

winterdawn 2019-08-05 10:37 评论0 收藏0
数据分析在携程产品设计中的应用

摘要：在携程产品的整个生命周期中，数据始终贯穿其间。此时，携程的用户研究团队就受命登场了。携程民宿频道的设计进化或许就可归因于这种定量与定性分析的结合。数据与设计的关系，业界向来颇多热议——有数据驱动设计之说，有数据引导设计之论，也有类似数据关注削弱用户体验的抱怨。看似感性主观的用户体验设计与理性客观的数据分析，究竟怎样才能相互作用进而碰撞出产品的灵感火花？本文试抛一砖，将通过酒店产品设...

hufeng 2019-05-28 18:33 评论0 收藏0
【个人】微信小程序初体验

摘要：准备工作开发工具下载地址竟然隐藏在一个超链接里，真的很不醒目啊文档地址初次体验新建项目的时候，可以选择是小程序小游戏，这次我体验的是小程序的开发。可以配置小程序边界的，如顶部的导航栏的一些样式。很早前就想体验一把小程序的开发了，如果熟悉三大框架的话，小程序的开发还是很容易上手的，所以只要跟着做一个小应用，加上官方的文档就十分好学了。加上官方提供的开发工具也比较简洁好用，初次体验的我觉...

894974231 2019-08-23 12:48 评论0 收藏0
.Net大户的选择：Windows Container在携程的应用

摘要：一些的技术细节最开始的时候携程用物理机部署应用，为了保证互不冲突，用户在一个物理机上只部署一个应用。目前支持的系统是，这个版本是去年月份正式发布的携程是国内比较早的一批拿到了他们的版本，支持两类，一类是，另一类是。数人云上海&深圳两地容器之 Mesos/K8S/Swarm 三国演义的嘉宾精彩实录第四弹！小数已经被接连不断的干货搞晕了，沉浸技术的海洋好幸福~Windows contai...

leo108 2019-08-27 11:04 评论0 收藏0