微信小程序开发图解案例教程第6章-综合案例：仿智行火车票12306微信小程序课件.pptx

1、微信小程序开发图解案例教程（附精讲视频）（第2版）刘刚刘刚 著著需求描述需求描述 设计思路及相关知识点设计思路及相关知识点 准备工作准备工作 设计流程设计流程 小结小结 第第6 6章章 综合综合案例：仿智案例：仿智行火车票行火车票1230612306微信小程序微信小程序 智智行火车票对行火车票对1230612306购票流程进行了购票流程进行了大量优化，使用户购票更加快捷，还额大量优化，使用户购票更加快捷，还额外提供了智能查询和外提供了智能查询和火车票监控火车票监控功能功能。智智行火车票行火车票APPAPP的主要界面如图的主要界面如图6.16.1、图图6.26.2、图、图6.36.3、图、图6.

2、46.4所示。所示。图图6.1火车票火车票图图6.2飞机票飞机票图图6.3汽车票汽车票图图6.4个人中心个人中心 仿仿智行火车票智行火车票1230612306微信小程序要完成以下功能。微信小程序要完成以下功能。（1 1）底部标签导航，放置）底部标签导航，放置4 4个标签：火车票、飞机票、汽车票、个个标签：火车票、飞机票、汽车票、个人中心人中心。选中效果选中效果图片呈现为蓝色，字体颜色设置蓝色，如图图片呈现为蓝色，字体颜色设置蓝色，如图6.56.5所示。所示。6.16.1需求描述需求描述图图6.5标签选中效果标签选中效果（2 2）在火车票界面，顶部区域放置海报轮播区域，中间放置火车票、）在火车票

3、界面，顶部区域放置海报轮播区域，中间放置火车票、飞机票查询内容，下面放置快捷导航菜单：极速抢票、在线选座、抢飞机票查询内容，下面放置快捷导航菜单：极速抢票、在线选座、抢手好货、超值酒店。如图手好货、超值酒店。如图6.66.6所示。所示。（3 3）在火车票界面，输入起始站和终点站，单击查询按钮，可以查）在火车票界面，输入起始站和终点站，单击查询按钮，可以查到火车票信息，包括车站名称、车次、历时时长、发车时间、到站时到火车票信息，包括车站名称、车次、历时时长、发车时间、到站时间、票价，如图间、票价，如图6.76.7所示。所示。图图6.6火车票火车票界面界面 图图6.7火车票列表火车票列表（4 4）

4、在个人中心界面，设计账号信息内容、订单菜单导航以及）在个人中心界面，设计账号信息内容、订单菜单导航以及二级页面的列表式导航，如图二级页面的列表式导航，如图6.86.8所所示。示。（5 5）在个人中心界面，单击）在个人中心界面，单击“邀请好友一起来抢票邀请好友一起来抢票”导航，可导航，可以查看抢票情况，如图以查看抢票情况，如图6.96.9所示。所示。图图6.8个人中心界面个人中心界面 图图6.9抢票界面抢票界面6.2.16.2.1设计思路设计思路（1 1）设计底部标签导航，准备好底部标签导航的图标并建立相应）设计底部标签导航，准备好底部标签导航的图标并建立相应的的4 4个页面；设置默认时图片和个

5、页面；设置默认时图片和选中时选中时图片，标签名称采用两种颜图片，标签名称采用两种颜色，蓝色为选中颜色，灰色为默认颜色。色，蓝色为选中颜色，灰色为默认颜色。（2 2）设计幻灯片轮播效果，准备好幻灯片需要轮播的图片。）设计幻灯片轮播效果，准备好幻灯片需要轮播的图片。（3 3）设计火车票查询区域，火车票查询区域有火车票和飞机票两）设计火车票查询区域，火车票查询区域有火车票和飞机票两个页签的切换效果，切换选中时，个页签的切换效果，切换选中时，背景色背景色为白色，文字颜色为黑色。为白色，文字颜色为黑色。6.26.2设计思路及相关知识点设计思路及相关知识点（4 4）设计火车票列表界面时，可以先设计出一条火

6、车票信息，然）设计火车票列表界面时，可以先设计出一条火车票信息，然后发起网络请求获得所有的火车票后发起网络请求获得所有的火车票列表列表，采用列表渲染的方式展现，采用列表渲染的方式展现出所有火车票信息。出所有火车票信息。（5 5）个人中心采用列表式导航的方式来进行二级界面导航，这种）个人中心采用列表式导航的方式来进行二级界面导航，这种导航设计也是先设计出一个菜单，导航设计也是先设计出一个菜单，其他其他的导航菜单可以直接复用这的导航菜单可以直接复用这个菜单的界面效果。个菜单的界面效果。（6 6）抢票界面也是非常有规律性的界面，先设计出第一个区域内）抢票界面也是非常有规律性的界面，先设计出第一个区域

7、内容，其他区域内容可以直接容，其他区域内容可以直接进行复用进行复用。（1 1）在界面布局的时候，会用到微信小程序的组件，包括）在界面布局的时候，会用到微信小程序的组件，包括VIEWVIEW视图视图容器组件、容器组件、IMAGEIMAGE图片组件、图片组件、SWIPERSWIPER滑块滑块视图容器组件、表单相关组视图容器组件、表单相关组件等组件的使用。件等组件的使用。（2 2）界面样式设计，需要写一些）界面样式设计，需要写一些WXSSWXSS样式进行界面的美化和渲染。样式进行界面的美化和渲染。（3 3）获取火车票列表信息，需要使用）获取火车票列表信息，需要使用WX.REQUESTWX.REQUE

8、ST发起网络请求获取发起网络请求获取到火车票相关信息，返回到火车票相关信息，返回JSONJSON数据，数据，在界面在界面中进行渲染中进行渲染。（4 4）界面跳转需要使用）界面跳转需要使用WX.NAVIGATETOWX.NAVIGATETO这个这个APIAPI接口来实现。接口来实现。6.2.26.2.2相关知识点相关知识点（1 1）需要准备一个）需要准备一个APPIDAPPID，如果没有，如果没有APPIDAPPID，就不能在手机上进行项目，就不能在手机上进行项目的预览，但是在开发工具上的预览，但是在开发工具上开发开发是没有任何问题的。是没有任何问题的。（2 2）底部标签导航，需要有选中图片和默

9、认图片，放置在）底部标签导航，需要有选中图片和默认图片，放置在IMAGES/BARIMAGES/BAR文件夹下，如图文件夹下，如图6.106.10所示。所示。6.36.3准备工作准备工作图图6.10底部标签导航图片底部标签导航图片（3 3）需要准备海报轮播的图片，放置在）需要准备海报轮播的图片，放置在IMAGES/IMAGES/HAIBAOHAIBAO文件夹下，文件夹下，如图如图6.116.11所示。所示。图图6.11海报轮播图片海报轮播图片（4 4）准备火车票界面用到的一些图标，放置在）准备火车票界面用到的一些图标，放置在IMAGES/ICON/IMAGES/ICON/HCPHCP文件夹下，

10、如图文件夹下，如图6.126.12所示。所示。图图6.12火车票界面图标火车票界面图标（5 5）准备个人中心界面用到的一些图标，放置在）准备个人中心界面用到的一些图标，放置在IMAGES/ICON/IMAGES/ICON/GRZXGRZX文件夹下，如图文件夹下，如图6.136.13所示。所示。图图6.13个人中心界面图标个人中心界面图标 仿仿智行火车票智行火车票1230612306微信小程序的设计流程为：先设计底部标签导微信小程序的设计流程为：先设计底部标签导航，添加导航对应航，添加导航对应的的4 4个界面，即火车票、飞机票、汽车票、个人中心；个界面，即火车票、飞机票、汽车票、个人中心；在火车

11、票界面里设计海报轮播效果、在火车票界面里设计海报轮播效果、火车票火车票查询界面；再添加一个新的查询界面；再添加一个新的火车票列表界面，在这个界面里完成火车票列表设计；火车票列表界面，在这个界面里完成火车票列表设计；在个人在个人中心界面中心界面里完成个人中心界面设计；最后添加一个抢票界面，完成抢票界面的设里完成个人中心界面设计；最后添加一个抢票界面，完成抢票界面的设计。计。6.46.4设计流程设计流程 仿仿智行火车票智行火车票1230612306微信小程序的底部标签导航分为微信小程序的底部标签导航分为4 4个标签导航：个标签导航：火车票、飞机票、汽车票、个人中心火车票、飞机票、汽车票、个人中心。

12、标签标签导航选中时导航图标会变为蓝色图标，导航文字会变为蓝色导航选中时导航图标会变为蓝色图标，导航文字会变为蓝色文字，如图文字，如图6.146.14所示。所示。6.4.16.4.1底部标签导航设计底部标签导航设计图图6.14底部标签导航选中效果底部标签导航选中效果（1 1）新建一个）新建一个ZXTRAINZXTRAIN项目的微信小程序，将准备好的底部标签导航图标、项目的微信小程序，将准备好的底部标签导航图标、海报轮播图片、火车票海报轮播图片、火车票界面图标界面图标、个人中心界面图标放置在、个人中心界面图标放置在ZXTRAINZXTRAIN项目项目下。下。（2 2）打开）打开APP.JSONAP

13、P.JSON配置文件，在配置文件，在PAGESPAGES数组里添加数组里添加4 4个页面个页面路径路径“PAGES/“PAGES/TRAIN/TRAIN/TRAIN”“PAGESTRAIN”“PAGES/AIRPLANE/AIRPLANE/AIRPLANE”“PAGESAIRPLANE”“PAGES/BUS/BUS/BUS”“PAGESBUS”“PAGES/MYCENTERMYCENTER/MYCENTERMYCENTER”，保存后会自动生成相应的页面文件夹；保存后会自动生成相应的页面文件夹；删除删除“PAGES/INDEX/“PAGES/INDEX/INDEX”“PAGESINDEX”“PA

14、GES/LOGS/LOGS”/LOGS/LOGS”页面页面路径以及对应的路径以及对应的文件文件夹。夹。（3 3）在）在WINDOWWINDOW数组里配置窗口导航背景颜色为蓝色（数组里配置窗口导航背景颜色为蓝色（#5495E6#5495E6），），导航栏文字为智行导航栏文字为智行1230612306，字体，字体颜色颜色设置为白色（设置为白色（#FFFFFFFFFFFF）。）。（4 4）在）在TABBARTABBAR对象里配置底部标签导航背景色为白色（对象里配置底部标签导航背景色为白色（#FFFFFFFFFF），），文字默认颜色为灰色，选中时为文字默认颜色为灰色，选中时为蓝色蓝色（#5495E6#

15、5495E6），在），在LISTLIST数组里配数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。图标。这样这样就完成了仿智行火车票就完成了仿智行火车票1230612306微信小微信小程序的底部标签导航配置，单击不同的导航，程序的底部标签导航配置，单击不同的导航，可以切换显示可以切换显示不同不同的页面，同时导航图标和的页面，同时导航图标和导航文字会呈现为选中状态，如图导航文字会呈现为选中状态，如图6.156.15所示。所示。图图6.15火车票界面火车票界面 海报轮播效果可以在有限的区域内动态海报轮播效果可以在有限的区域内动

16、态地显示不同的幻灯片图片，是很多网站或者地显示不同的幻灯片图片，是很多网站或者APPAPP软件都会采用的一种展现方式，在仿智软件都会采用的一种展现方式，在仿智行火车票行火车票1230612306微信小程序的火车票界面里，微信小程序的火车票界面里，采用海报轮播效果展示广告图片，如图采用海报轮播效果展示广告图片，如图6.166.16所示。所示。6.4.26.4.2海报轮播效果设计海报轮播效果设计图图6.16海报轮播显示海报轮播显示（1 1）进入到）进入到PAGES/TRAIN/PAGES/TRAIN/TRAIN.WXMLTRAIN.WXML文件里，采用文件里，采用VIEWVIEW、SWIPERSW

17、IPER、IMAGEIMAGE进行布局，图片宽度设置进行布局，图片宽度设置为为100100%，高度设置为，高度设置为80PX80PX。SWIPERSWIPER滑块视图容器设置为自动播放滑块视图容器设置为自动播放(AUTOPLAYAUTOPLAY=TRUE)=TRUE)，自动切换，自动切换时间间隔为时间间隔为3S(INTERVAL=3000)3S(INTERVAL=3000)，滑动动画滑动动画时长为时长为1S(DURATION=1000)1S(DURATION=1000)；采用采用WX:FORWX:FOR循环来显示要展示的图片，从循环来显示要展示的图片，从TRAIN.JSTRAIN.JS文件里获

18、取文件里获取IMGURLSIMGURLS图图片路径。片路径。（3 3）这样就可以实现幻灯片轮播效果，如图）这样就可以实现幻灯片轮播效果，如图6.176.17、图、图6.186.18所示。所示。图图6.17海报轮播一海报轮播一图图6.18海报轮播二海报轮播二 火车票火车票查询界面可以输入始发站、终点查询界面可以输入始发站、终点站、出行日期、火车类型等内容来进行火车站、出行日期、火车类型等内容来进行火车票查询；提供票查询；提供飞机票页飞机票页签，其与火车票页签签，其与火车票页签可以进行相互切换显示；在火车票查询界面可以进行相互切换显示；在火车票查询界面下面是下面是4 4个快捷导航菜单：极速抢票、个

19、快捷导航菜单：极速抢票、在线在线选座、抢手好货、超值酒店。如图选座、抢手好货、超值酒店。如图6.196.19所示。所示。6.4.36.4.3火车票查询界面设计火车票查询界面设计图图6.19火车票界面火车票界面1 1页签切换效果设计页签切换效果设计（1 1）进入到）进入到PAGES/TRAIN/PAGES/TRAIN/TRAIN.WXMLTRAIN.WXML文件里，设计火车票与飞文件里，设计火车票与飞机票页签切换效果以及选中状态效果，机票页签切换效果以及选中状态效果，设计设计两种样式：一种是选两种样式：一种是选中样式中样式SELECTSELECT，另一种是正常样式，另一种是正常样式NORMALN

20、ORMAL。根据变量。根据变量CURRENTTABCURRENTTAB值来决定使用哪个值来决定使用哪个样式样式，同时提供，同时提供SWITCHNAVSWITCHNAV切换导航的切换导航的事件。事件。（2 2）进入到）进入到PAGES/TRAIN/PAGES/TRAIN/TRAIN.WXSSTRAIN.WXSS文件里，添加导航背景灰文件里，添加导航背景灰色（色（#898989#898989），灰色背景上面是圆角矩形；添加页签选中时和），灰色背景上面是圆角矩形；添加页签选中时和默认时的样式，页签选中时背景色是白色（默认时的样式，页签选中时背景色是白色（#FFFFFFFFFFFF），文字是），文字是

21、黑色（黑色（#000000#000000），页），页签默认时文字颜色是白色（签默认时文字颜色是白色（#FFFFFFFFFFFF）。）。（3 3）进入到）进入到PAGES/TRAIN/TRAIN.JSPAGES/TRAIN/TRAIN.JS文件里，定义文件里，定义变变CURRENTTABCURRENTTAB默认值为默认值为0 0，添加，添加SWITCHNAVSWITCHNAV事件，事件，用来进行用来进行页签相互切换，动态页签相互切换，动态改变变量改变变量CURRENTTABCURRENTTAB的的值。值。界面界面效果如图效果如图6.206.20所示。所示。图图6.20页签切换效果页签切换效果2

22、2火车票查询区域设计火车票查询区域设计（1 1）进入到）进入到PAGES/TRAIN/PAGES/TRAIN/TRAIN.WXMLTRAIN.WXML文件里，设计火车票查询文件里，设计火车票查询区域，采用表单组件区域，采用表单组件INPUTINPUT文本框来文本框来输入始发站输入始发站、终点站、日期，、终点站、日期，采用采用SWITCHSWITCH组件来选择高铁动车和学生票，采用组件来选择高铁动车和学生票，采用BUTTONBUTTON组件提交组件提交按钮，采用按钮，采用FORMFORM组件组件来提交表来提交表单。单。（2 2）进入到）进入到PAGES/TRAIN/PAGES/TRAIN/TRA

23、IN.WXSSTRAIN.WXSS文件里，添加相应的文件里，添加相应的样式。样式。界面界面效果如图效果如图6.216.21所示。所示。图图6.21火车票查询表单火车票查询表单（3 3）在）在APP.JSONAPP.JSON文件中配置一个新的页面文件中配置一个新的页面路径路径“PAGES/“PAGES/TRAINLISTTRAINLIST/TRAINLISTTRAINLIST”，用来设计火车票列表用来设计火车票列表界面界面，微信小程序框架会自动建，微信小程序框架会自动建立相应的立相应的TRAINLISTTRAINLIST文件夹。文件夹。（4 4）在）在PAGES/TRAIN/TRAIN.JSPA

24、GES/TRAIN/TRAIN.JS文件里，添加表单提交文件里，添加表单提交FORMSUBMITFORMSUBMIT事事件，获得始发站、终点站、日期、件，获得始发站、终点站、日期、星期星期数据值，把这些数据值带到数据值，把这些数据值带到TRAINLISTTRAINLIST火车票列表火车票列表界面。界面。在这个在这个火车票查询界面里，输入始发站和终点站，单击查询按钮，火车票查询界面里，输入始发站和终点站，单击查询按钮，就会根据输入的内容进行相应的就会根据输入的内容进行相应的火车票火车票列表的查询。列表的查询。3 3快捷导航设计快捷导航设计（1 1）进入到）进入到PAGES/TRAIN/PAGES

25、/TRAIN/TRAIN.WXMLTRAIN.WXML文件里，在火车票查询下文件里，在火车票查询下面有面有4 4个查询按钮，它是由图标和导航个查询按钮，它是由图标和导航名称名称组成组成的。的。（2 2）进入到）进入到PAGES/TRAIN/PAGES/TRAIN/TRAIN.WXSSTRAIN.WXSS文件里，给文件里，给ICONICON、ITEMITEM、MENUMENU这这3 3个个CLASSCLASS添加样式。界面效果如图添加样式。界面效果如图6.226.22所示。所示。这样这样就完成了火车票和飞机票页就完成了火车票和飞机票页签的切换效果、火车票查询表单设计签的切换效果、火车票查询表单设

26、计以及快捷导航设计，输入表单以及快捷导航设计，输入表单内容内容，就可以根据这些表单内容进行火车票就可以根据这些表单内容进行火车票列表查询。列表查询。图图6.22快捷导航设计快捷导航设计 从从火车票查询界面跳转到火车票列表界面，会把始发站、终火车票查询界面跳转到火车票列表界面，会把始发站、终点站、日期这些查询条件带到火车票列表点站、日期这些查询条件带到火车票列表界面界面中，根据这些查询中，根据这些查询条件，会加载出相应的火车票信息，如图条件，会加载出相应的火车票信息，如图6.236.23所示。所示。1 1导航标题和日期展示导航标题和日期展示 在在火车票列表的最上面是导航标题和日期的展示，导航标题

27、火车票列表的最上面是导航标题和日期的展示，导航标题是从上一个界面传递过来的始发站和是从上一个界面传递过来的始发站和终点站的终点站的参数，日期也是从参数，日期也是从上一个界面传递过来的参数，如图上一个界面传递过来的参数，如图6.246.24所示。所示。6.4.46.4.4火车票列表设计火车票列表设计图图6.23火车票列表界面火车票列表界面图图6.24导航标题和日期导航标题和日期（1 1）进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIST/TRAINLIST.JS/TRAINLIST.JS文件里，在文件里，在ONLOADONLOAD生命周期函数里接收上一个界面传递过来生命周

28、期函数里接收上一个界面传递过来的参数的参数，并通过，并通过WXWX.SETNAVIGATIONBARTITLESETNAVIGATIONBARTITLE来设置导航来设置导航标题。标题。（2 2）进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIST/TRAINLIST.WXMLTRAINLIST.WXML文件里，进行日文件里，进行日期设计，包括查询的日期、前一天和期设计，包括查询的日期、前一天和后一天。后一天。（3 3）进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIST/TRAINLIST.WXSSTRAINLIST.WXSS文件里，给文件里，给DA

29、TEDATE这个这个CLASSCLASS添加样式，设计成蓝色背景，添加样式，设计成蓝色背景，文字文字设置成白色（设置成白色（#FFFFFFFFFFFF）。）。（4 4）进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIST/TRAINLIST.JS/TRAINLIST.JS文件里，定义一个日期文件里，定义一个日期DATEDATE变量，把传递过来的日期赋值变量，把传递过来的日期赋值给给DATEDATE变量变量。（5 5）进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIST/TRAINLIST.WXMLTRAINLIST.WXML文件里，将文件里，将DAT

30、EDATE变量变量绑定到绑定到WXMLWXML文件里，动态显示文件里，动态显示日期。日期。界面界面效果如图效果如图6.256.25所示。所示。图图6.25动态显示日期动态显示日期2 2火车票列表设计火车票列表设计 火车票火车票列表是很有规律地进行展示的列表，每一条火车票信息列表是很有规律地进行展示的列表，每一条火车票信息都包括始发站、终点站、车次、日期、都包括始发站、终点站、车次、日期、票价票价等各种信息等各种信息。先先来设计一条火车票信息，然后去请求火车票列表接口，来获来设计一条火车票信息，然后去请求火车票列表接口，来获取火车票列表信息，最后用取火车票列表信息，最后用列表列表渲染的方式展现出

31、来。渲染的方式展现出来。（1 1）进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIST/TRAINLIST.WXMLTRAINLIST.WXML文件里，设计一条火文件里，设计一条火车票信息的布局车票信息的布局。（2 2）进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIST/TRAINLIST.WXSSTRAINLIST.WXSS文件里，给火车票信文件里，给火车票信息添加息添加样式。样式。界面界面效果如图效果如图6.266.26所示。所示。图图6.26火车票信息火车票信息（3 3）进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIS

32、T/TRAINLIST.JSTRAINLIST.JS文件里，去动态获取文件里，去动态获取火车票列表信息，定义火车票列表信息，定义TRAINLISTTRAINLIST变量来变量来绑定绑定火车票列表信息，定义火车票列表信息，定义WINHEIGHTWINHEIGHT变量来动态计算列表变量来动态计算列表信信息。息。TRAINLISTTRAINLIST数据结构如下所示。数据结构如下所示。（4 4）进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIST/TRAINLIST.WXMLTRAINLIST.WXML文件里，将文件里，将TRAINLISTTRAINLIST变量、变量、WINHE

33、IGHTWINHEIGHT变量动态变量动态地绑定到界面里地绑定到界面里。界面界面效果如图效果如图6.276.27所示。所示。图图6.27火车票列表火车票列表3 3火车票底部固定页签导航火车票底部固定页签导航 火车票火车票列表界面最底部区域，是一块固定区域的页签导航，它不列表界面最底部区域，是一块固定区域的页签导航，它不随着界面的滚动而滚动，而是固定随着界面的滚动而滚动，而是固定在底部在底部，它有，它有4 4个页签导航：筛选、个页签导航：筛选、出发时间、旅行时间、显示价格。根据这些页签导航可以进行火车票出发时间、旅行时间、显示价格。根据这些页签导航可以进行火车票列表列表的展示。的展示。（1 1）

34、进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIST/TRAINLIST.WXMLTRAINLIST.WXML文件里，设计底部固定文件里，设计底部固定导航，需要设计两种样式：一种导航，需要设计两种样式：一种是导航是导航标题选中效果标题选中效果SELECTSELECT，文字呈，文字呈现为蓝色；另一种是默认样式效果现为蓝色；另一种是默认样式效果COMMONCOMMON，定义变量，定义变量CURRENTTABCURRENTTAB来来动动态渲染态渲染样式，定义样式，定义SWITCHNAVSWITCHNAV来切换来切换事件。事件。（2 2）进入到）进入到PAGES/PAGES/TR

35、AINLISTTRAINLIST/TRAINLIST.WXSSTRAINLIST.WXSS文件里，添加页文件里，添加页签导航选中效果样式和默认效果签导航选中效果样式和默认效果样式。样式。（3 3）进入到）进入到PAGES/PAGES/TRAINLISTTRAINLIST/TRAINLIST.JS/TRAINLIST.JS文件里，定义变量文件里，定义变量CURRENTTABCURRENTTAB值为值为1 1，添加菜单切换，添加菜单切换事件事件SWITCHNAVSWITCHNAV，用来动态设置，用来动态设置页签导航选中页签导航选中效果。效果。界面界面效果如图效果如图6.286.28所示。所示。图图

36、6.28固定页签导航固定页签导航 个人个人中心界面用来显示账号相关信息、中心界面用来显示账号相关信息、订单情况、我的财富、出行服务、邀请好订单情况、我的财富、出行服务、邀请好友、消息中心、产品友、消息中心、产品意见意见等内容，它是通等内容，它是通过列表式导航的方式来设计界面的，如图过列表式导航的方式来设计界面的，如图6.296.29所示。所示。6.4.56.4.5个人中心界面设计个人中心界面设计图图6.29个人中心界面个人中心界面1 1账号信息设计账号信息设计（1 1）进入到）进入到PAGES/PAGES/MYCENTERMYCENTER/MYCENTER.WXMLMYCENTER.WXML文

37、件里，设计账号的头文件里，设计账号的头像、昵称等信息，使用变量像、昵称等信息，使用变量USERINFOUSERINFO作为作为个人信息来个人信息来展示。展示。（2 2）进入到）进入到PAGES/PAGES/MYCENTERMYCENTER/MYCENTER.WXSSMYCENTER.WXSS文件里，给头像、账号、文件里，给头像、账号、二级界面导航入口添加二级界面导航入口添加样式。样式。（3 3）进入到）进入到PAGES/PAGES/MYCENTERMYCENTER/MYCENTER.JS/MYCENTER.JS文件里，动态获取昵称，文件里，动态获取昵称，使用使用APP.GETUSERINFOA

38、PP.GETUSERINFO接口来接口来获取个人信息。获取个人信息。界面界面效果如图效果如图6.306.30所示。所示。图图6.30账号信息账号信息2 2订单导航设计订单导航设计（1 1）进入到）进入到PAGES/PAGES/MYCENTERMYCENTER/MYCENTER.WXMLMYCENTER.WXML文件里，设计火车票订文件里，设计火车票订单、抢票订单、机票订单、单、抢票订单、机票订单、全部订单导航，它们是由图标和文字组全部订单导航，它们是由图标和文字组成的。成的。（2 2）进入到）进入到PAGES/PAGES/MYCENTERMYCENTER/MYCENTER.WXSSMYCENT

39、ER.WXSS文件里，给订单区域添文件里，给订单区域添加加样式。样式。界面界面效果如图效果如图6.316.31所示。所示。图图6.31订单信息订单信息3 3列表导航设计列表导航设计（1 1）进入到）进入到PAGES/PAGES/MYCENTERMYCENTER/MYCENTER.WXMLMYCENTER.WXML文件里，设计我的财富、文件里，设计我的财富、出行服务、邀请好友、消息出行服务、邀请好友、消息中心中心、产品意见、更多这、产品意见、更多这6 6个列表个列表导航。导航。（2 2）进入到）进入到PAGES/PAGES/MYCENTERMYCENTER/MYCENTER.WXSSMYCENT

40、ER.WXSS文件里，给我的财富、文件里，给我的财富、出行服务、邀请好友、消息出行服务、邀请好友、消息中心中心、产品意见、更多这、产品意见、更多这6 6个列表导航添个列表导航添加加样式。样式。界面界面效果如图效果如图6.326.32所示。所示。图图6.32个人中心界面个人中心界面（3 3）给邀请好友添加）给邀请好友添加GRABTICKETGRABTICKET抢票事件，单击这个导航会进入到抢抢票事件，单击这个导航会进入到抢票界面查看自己的抢票情况，票界面查看自己的抢票情况，进入进入到到PAGES/PAGES/MYCENTERMYCENTER/MYCENTER.JS/MYCENTER.JS文件文件

41、里，绑定里，绑定GRABTICKETGRABTICKET事件，让它跳转到事件，让它跳转到GRABTICKETGRABTICKET界面，在界面，在APP.JSONAPP.JSON文件里配置文件里配置GRABTICKETGRABTICKET路径。路径。通过通过列表导航进入到二级界面，其实现方式和进入到抢票界面一样，列表导航进入到二级界面，其实现方式和进入到抢票界面一样，绑定跳转事件，配置相应的跳转绑定跳转事件，配置相应的跳转路径路径，就可以进入到二级界面。，就可以进入到二级界面。抢抢票界面分为票界面分为3 3部分内容：第部分内容：第1 1部部分是告诉用户抢到票后会以短信或者分是告诉用户抢到票后会以

42、短信或者电话的方式进行通知；第电话的方式进行通知；第2 2部分部分是抢是抢票情况；第票情况；第3 3部分是分享内容，如图部分是分享内容，如图6.336.33所示。所示。6.4.66.4.6抢票界面设计抢票界面设计图图6.33抢票界面抢票界面1 1通知区域设计通知区域设计（1 1）进入到）进入到PAGES/PAGES/GRABTICKETGRABTICKET/GRABTICKET.WXMLGRABTICKET.WXML文件里，设计文件里，设计抢票通知区域内容，包括攻略、抢票抢票通知区域内容，包括攻略、抢票通知通知信息、二级界面信息、二级界面入口。入口。（2 2）进入到）进入到PAGES/PAGE

43、S/GRABTICKETGRABTICKET/GRABTICKET.WXSSGRABTICKET.WXSS文件里，给通文件里，给通知区域添加样式，设置为蓝色背景，知区域添加样式，设置为蓝色背景，在蓝色在蓝色背景上面添加一块矩背景上面添加一块矩形区域用来放置通知区域形区域用来放置通知区域内容。内容。界面界面效果如图效果如图6.346.34所示。所示。图图6.34通知区域通知区域2 2抢票信息设计抢票信息设计（1 1）进入到）进入到PAGES/PAGES/GRABTICKETGRABTICKET/GRABTICKET.WXMLGRABTICKET.WXML文件里，设计文件里，设计已经取消或者重新开

44、始的抢票情况。已经取消或者重新开始的抢票情况。（2 2）进入到）进入到PAGES/PAGES/GRABTICKETGRABTICKET/GRABTICKET.WXSSGRABTICKET.WXSS文件里，添加文件里，添加相应的相应的样式。样式。界面界面效果如图效果如图6.356.35所示。所示。图图6.35抢票信息抢票信息3 3分享信息设计分享信息设计（1 1）进入到）进入到PAGES/PAGES/GRABTICKETGRABTICKET/GRABTICKET.WXMLGRABTICKET.WXML文件里，设计文件里，设计分享区域内容，包括加速按钮、分享分享区域内容，包括加速按钮、分享赢加速赢

45、加速包以及进入到二级界包以及进入到二级界面的面的入口。入口。（2 2）进入到）进入到PAGES/PAGES/GRABTICKETGRABTICKET/GRABTICKET.WXSSGRABTICKET.WXSS文件里，给分文件里，给分享区域内容添加样式，设计加速享区域内容添加样式，设计加速按钮。按钮。界面界面效果如图效果如图6.366.36所示所示。这样这样就完成了抢票界面的设计，通过界面就完成了抢票界面的设计，通过界面的布局设计和样式设计，就可以实现抢票界面的布局设计和样式设计，就可以实现抢票界面的显示。如果的显示。如果想修改想修改窗口标题，只需要在窗口标题，只需要在PAGES/PAGES/

46、GRABTICKETGRABTICKET/GRABTICKET.JSONGRABTICKET.JSON文件里属文件里属性，就可以覆盖性，就可以覆盖APP.JSONAPP.JSON文件里这个属性。文件里这个属性。配配置置“NAVIGATIONBARTITLETEXTNAVIGATIONBARTITLETEXT”的的“抢票抢票”属属性，就可以覆盖性，就可以覆盖APP.JSONAPP.JSON文件里这个文件里这个属性。属性。图图6.36分享区域分享区域 仿仿智行火车票智行火车票1230612306微信小程序设计完成后，如果该项目有微信小程序设计完成后，如果该项目有APPIDAPPID，可以将微信小程

47、序上传到微信，可以将微信小程序上传到微信服务器服务器上，扫描二维码获上，扫描二维码获得管理员同意后就可以上传项目，如图得管理员同意后就可以上传项目，如图6.376.37所示。所示。6.4.76.4.7项目上传和预览项目上传和预览图图6.37项目上传项目上传 除了除了项目上传，也可以进行项目预览，在手机上运行微信小项目上传，也可以进行项目预览，在手机上运行微信小程序，同样需要扫描二维码进行项目预览程序，同样需要扫描二维码进行项目预览，如，如图图6.386.38所示。所示。图图6.38项目预览（图中二维码只是示意，请扫描自己操作生成的二维码）项目预览（图中二维码只是示意，请扫描自己操作生成的二维码

48、）本章本章主要设计了仿智行火车票主要设计了仿智行火车票1230612306微信小程序，重点掌握微信小程序，重点掌握以下内容：以下内容：（1 1）掌握底部标签导航配置、顶部页签切换效果设计，通过不）掌握底部标签导航配置、顶部页签切换效果设计，通过不同页签之间的切换，向用户展示动态同页签之间的切换，向用户展示动态的内容的内容，实现不同内容的展，实现不同内容的展示；示；（2 2）掌握表单组件如何提交表单内容，这些表单内容如何传递）掌握表单组件如何提交表单内容，这些表单内容如何传递到其他界面，以及其他界面如何获取到其他界面，以及其他界面如何获取传递传递的内容；的内容；（3 3）掌握界面的布局以及给界面

49、布局添加相应的样式和绑定事）掌握界面的布局以及给界面布局添加相应的样式和绑定事件；件；6.56.5小结小结（4 4）学会将学会将JSJS文件里的数据动态地绑定到文件里的数据动态地绑定到WXMLWXML界面，实现数据的动态界面，实现数据的动态绑定；绑定；（5 5）学会如何设计列表内容或者列表导航界面，通过先设计一个基本）学会如何设计列表内容或者列表导航界面，通过先设计一个基本的内容区域，然后复用这个的内容区域，然后复用这个区域内容区域内容的方式，来提高开发效率；的方式，来提高开发效率；（6 6）学会）学会WX.REQUESTWX.REQUEST、WX.NAVIGATETOWX.NAVIGATETO、WX.SETNAVIGATIONBARTITLEWX.SETNAVIGATIONBARTITLE等开发接口的使用，了解每个等开发接口的使用，了解每个APIAPI不同不同的用处和可以实现的不同效果。的用处和可以实现的不同效果。