3 　　用户名

4

用户名部分原本的内容为{{userInfo.nickName}}，{{key_name}}的作用是获取关键字名为key_name对应的值（数据一般以key_name:value的形式定义在wxml文件同目录下js文件的data成员中，后面会讲解），image显示的头像资源也是通过这种方式指定为src="{{userInfo.avatarUrl}}"，程序中产生的数据可以在开发者工具顶部偏右的AppData栏中查看。

如果不需要从js文件中获取数据，那么可以像代码中“用户名”那样直接写入数据值，不过一般不推荐这样做，因为像android等平台App在开发时会将数据值放入strings.xml等文件，目的是为了将数据与布局分离，布局和功能实现代码分离，方便开发与维护。

组件中的class项用来设置其样式，属性名对应的样式信息定义在wxss文件中，除了可以使用定义在本目录wxss文件中的样式，还可以使用app.wxss文件中定义的。如果样式只是在某页面中使用，那么建议定义在其目录下的wxss文件中，即局部作用域内；如果是多个页面共同使用，即全局样式，那么一般定义在主程序app.wxss文件中。class样式可以指定组件的宽高、背景颜色等属性，本文不再进行详述。

在界面下方添加按钮“点击获取火车票”组件：

运行截图如下图所示：

四、实例二

栅格系统是Bootstrap的和具有优势。采用的是流式的栅格系统，对宽度进行12等分。