微信小程序 简单实例---火车票查询应用，学习掌握小程序框架，及开发步骤的实现。微信小程序体现了轻便，易用的特点，并且上手快，前端知识好学易用。
1. 相关链接
本本项目代码获取地址
Github：https://github.com/VincentWYJ/WXAppTrain.git；
Blog file：；
微信小程序开发学习资料
微信开发者平台：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=1475052055990，小程序开发工具可以在里面下载，值得高兴的是新版本已经不再需要借助安装0.7版本进行先登录，而是可以直接登录来开发与调试；
Flex css layout：，像我这样的非前段开发者，对于Flex layout的使用得先花时间学习一番，不然连最基本的组件布局都比较困难，更不要说设计出美观、交互性强的界面；
小程序：?t=resource/res_main&id=mp1474632113_xQVCl&token=&lang=zh_CN，点击提示无法打开/回到首页的话请复制粘贴到地址栏进行打开，这里面的内容可以说是和第一个链接中的内容相辅相成，边学边用吧；
2. 界面展示
结合动态图描述一下目前实现的功能：
2.1 主页上半部分显示用户头像与用户名（和微信中的信息一致，这部分组件是工具自带的，我们可以修改这部分组件和内容，稍候会提到）；下半部分显示一个经典的问候语“Hello World”，提供一个可点击的按钮“点击获取火车票”；
2.2 点击按钮后，通过事先指定的参数（调用了百度APIStore中去哪网火车票查询接口，站-站查询所需参数为始发地、目的地及时间）发送网络请求，将获取到的JSON数据按火车车次为节点进行解析并在新页面显示基本信息（除了详细座位信息），为每个车次提供一个可点击的按钮“点击查看座位信息”；
2.3 点击某车次中的座位查询按钮后，会将该车次对应的所有座位信息显示在新页面中；
2.4 点击后两个页面左上角的“返回”按钮可回到上一页，这个功能也是工具自带的；
顺便提一下在博客园中插入动画，上面的演示过程是一张格式为gif的图片，像添加普通图片一样操作即可。录制工具使用的是灵者Gif录制，可以指定开始、停止时所需操作与区域等录制信息。
3. 要点分析
关于微信小程序工具的使用及初始项目的结构说明，网上资源已经很丰富，这里不打算再啰嗦，有不了解的可以参考：
下面开始讲讲我个人在学习与开发过程中认为值得分享与记录的点，欢迎大小神们一起讨论与指正，特别是讲得不对或有待改善的地方。下面只给出和讲的点直接相关的代码，整体代码可以到项目工程中去查看，建议大家自己调试一遍。
3.1 index
index是项目新建时自动生成的，作为小程序的启动页面。
3.1.1 index.wxml
首页的头像与用户名，从上图的演示过程可以看出我将微信的名字“***”改成了“用户名”：
1 <view bindtap="bindViewTap"> 2 <image src="https://www.jb51.net/{{userInfo.avatarUrl}}" background-size="cover"></image> 3 <text>用户名</text> <!-- {{userInfo.nickName}}直接写成“用户名” --> 4 </view>
用户名部分原本的内容为{{userInfo.nickName}}，{{key_name}}的作用是获取关键字名为key_name对应的值（数据一般以key_name:value的形式定义在wxml文件同目录下js文件的data成员中，后面会讲解），image显示的头像资源也是通过这种方式指定为src="https://www.jb51.net/{{userInfo.avatarUrl}}"，程序中产生的数据可以在开发者工具顶部偏右的AppData栏中查看。
如果不需要从js文件中获取数据，那么可以像代码中“用户名”那样直接写入数据值，不过一般不推荐这样做，因为像Android等平台App在开发时会将数据值放入strings.xml等文件，目的是为了将数据与布局分离，布局和功能实现代码分离，方便开发与维护。
组件中的class项用来设置其样式，属性名对应的样式信息定义在wxss文件中，除了可以使用定义在本目录wxss文件中的样式，还可以使用app.wxss文件中定义的。如果样式只是在某页面中使用，那么建议定义在其目录下的wxss文件中，即局部作用域内；如果是多个页面共同使用，即全局样式，那么一般定义在主程序app.wxss文件中。class样式可以指定组件的宽高、背景颜色等属性，本文不再进行详述。
在界面下方添加按钮“点击获取火车票”组件：
1 <view bindtap="getTrainInfo"> 2 <text>点击获取火车票</text> 3 </view>
按钮的目标是为了让用户可以点击进行交互，至于使用button、text或其他组件，视具体需求而定。这里是利用text组件，文本内容直接写入了字串“点击获取火车票”，对于只有一个子组件的布局其实可以如下面代码不用嵌套，一层布局搞定。一般来说嵌套层数越少，加载速度越快，这对移动程序的体验是至关重要的。
1 <view bindtap="getTrainInfo"> 2 点击获取火车票 3 </view>
但如果在父容器下有多个子组件共享其定义的样式，那么嵌套可以另代码简洁很多：