微信小程序开发图解案例教程第6章 综合案例：仿智行火车票12306微信小程序
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
仿智行火车票12306微信小程序的设计流程为：先设计底部标签导 航，添加导航对应的4个界面，即火车票、飞机票、汽车票、个人中心； 在火车票界面里设计海报轮播效果、火车票查询界面；再添加一个新的 火车票列表界面，在这个界面里完成火车票列表设计；在个人中心界面 里完成个人中心界面设计；最后添加一个抢票界面，完成抢票界面的设 计。
这样就完成了仿智行火车票12306微信小 程序的底部标签导航配置，单击不同的导航， 可以切换显示不同的页面，同时导航图标和 导航文字会呈现为选中状态，如图6.15所示。
图6.15 火车票界面
6.4.2 海报轮播效果设计
海报轮播效果可以在有限的区域内动态 地显示不同的幻灯片图片，是很多网站或者 APP软件都会采用的一种展现方式，在仿智 行火车票12306微信小程序的火车票界面里， 采用海报轮播效果展示广告图片，如图6.16 所示。
图6.11 海报轮播图片
（4）准备火车票界面用到的一些图标，放置在IMAGES/ICON/HCP 文件夹下，如图6.12所示。
图6.12 火车票界面图标
（5）准备个人中心界面用到的一些图标，放置在IMAGES/ICON/GRZX 文件夹下，如图6.13所示。
图6.13 个人中心界面图标
6.4 设计流程
图6.1 火车票
图6.2源自文库飞机票
图6.3 汽车票
图6.4 个人中心
6.1 需求描述
仿智行火车票12306微信小程序要完成以下功能。 （1）底部标签导航，放置4个标签：火车票、飞机票、汽车票、个 人中心。
选中效果图片呈现为蓝色，字体颜色设置蓝色，如图6.5所示。
图6.5 标签选中效果
（2）在火车票界面，顶部区域放置海报轮播区域，中间放置火车票、 飞机票查询内容，下面放置快捷导航菜单：极速抢票、在线选座、抢 手好货、超值酒店。如图6.6所示。
6.2.2 相关知识点
（1）在界面布局的时候，会用到微信小程序的组件，包括VIEW视图 容器组件、IMAGE图片组件、SWIPER滑块视图容器组件、表单相关组 件等组件的使用。 （2）界面样式设计，需要写一些WXSS样式进行界面的美化和渲染。 （3）获取火车票列表信息，需要使用WX.REQUEST发起网络请求获取 到火车票相关信息，返回JSON数据，在界面中进行渲染。 （4）界面跳转需要使用WX.NAVIGATETO这个API接口来实现。
图6.8 个人中心界面
图6.9 抢票界面
6.2 设计思路及相关知识点
6.2.1 设计思路
（1）设计底部标签导航，准备好底部标签导航的图标并建立相应 的4个页面；设置默认时图片和选中时图片，标签名称采用两种颜 色，蓝色为选中颜色，灰色为默认颜色。 （2）设计幻灯片轮播效果，准备好幻灯片需要轮播的图片。 （3）设计火车票查询区域，火车票查询区域有火车票和飞机票两 个页签的切换效果，切换选中时，背景色为白色，文字颜色为黑色。
（3）在WINDOW数组里配置窗口导航背景颜色为蓝色（#5495E6）， 导航栏文字为智行12306，字体颜色设置为白色（#FFFFFF）。 （4）在TABBAR对象里配置底部标签导航背景色为白色（#FFFFF）， 文字默认颜色为灰色，选中时为蓝色（#5495E6），在LIST数组里配 置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。
（4）设计火车票列表界面时，可以先设计出一条火车票信息，然 后发起网络请求获得所有的火车票列表，采用列表渲染的方式展现 出所有火车票信息。 （5）个人中心采用列表式导航的方式来进行二级界面导航，这种 导航设计也是先设计出一个菜单，其他的导航菜单可以直接复用这 个菜单的界面效果。 （6）抢票界面也是非常有规律性的界面，先设计出第一个区域内 容，其他区域内容可以直接进行复用。
6.3 准备工作
（1）需要准备一个APPID，如果没有APPID，就不能在手机上进行项目 的预览，但是在开发工具上开发是没有任何问题的。 （2）底部标签导航，需要有选中图片和默认图片，放置在IMAGES/BAR 文件夹下，如图6.10所示。
图6.10 底部标签导航图片
（3）需要准备海报轮播的图片，放置在IMAGES/HAIBAO文件夹下， 如图6.11所示。
6.4.1 底部标签导航设计
仿智行火车票12306微信小程序的底部标签导航分为4个标签导航： 火车票、飞机票、汽车票、个人中心。
标签导航选中时导航图标会变为蓝色图标，导航文字会变为蓝色 文字，如图6.14所示。
图6.14 底部标签导航选中效果
（1）新建一个ZXTRAIN项目的微信小程序，将准备好的底部标签导航图标、 海报轮播图片、火车票界面图标、个人中心界面图标放置在ZXTRAIN项目 下。 （2）打开APP.JSON配置文件，在PAGES数组里添加4个页面路径“PAGES/ TRAIN/TRAIN”“PAGES/AIRPLANE/AIRPLANE”“PAGES/BUS/BUS”“PAGES / MYCENTER/MYCENTER”，保存后会自动生成相应的页面文件夹；删除 “PAGES/INDEX/INDEX”“PAGES/ LOGS/LOGS”页面路径以及对应的文件 夹。
微信小程序开发图解案例教程 （附精讲视频）（第2版）
刘刚 著
第6章 综合案例：仿智行火车票12306微信小程序
需求描述 ■ 设计思路及相关知识点 ■ 准备工作 ■ 设计流程 ■ 小结 ■
智行火车票对12306购票流程进行了 大量优化，使用户购票更加快捷，还额 外提供了智能查询和火车票监控功能。
智行火车票APP的主要界面如图6.1、 图6.2、图6.3、图6.4所示。
（3）在火车票界面，输入起始站和终点站，单击查询按钮，可以查 到火车票信息，包括车站名称、车次、历时时长、发车时间、到站时 间、票价，如图6.7所示。
图6.6 火车票界面
图6.7 火车票列表
（4）在个人中心界面，设计账号信息内容、订单菜单导航以及 二级页面的列表式导航，如图6.8所示。 （5）在个人中心界面，单击“邀请好友一起来抢票”导航，可 以查看抢票情况，如图6.9所示。
这样就完成了仿智行火车票12306微信小 程序的底部标签导航配置，单击不同的导航， 可以切换显示不同的页面，同时导航图标和 导航文字会呈现为选中状态，如图6.15所示。
图6.15 火车票界面
6.4.2 海报轮播效果设计
海报轮播效果可以在有限的区域内动态 地显示不同的幻灯片图片，是很多网站或者 APP软件都会采用的一种展现方式，在仿智 行火车票12306微信小程序的火车票界面里， 采用海报轮播效果展示广告图片，如图6.16 所示。
图6.11 海报轮播图片
（4）准备火车票界面用到的一些图标，放置在IMAGES/ICON/HCP 文件夹下，如图6.12所示。
图6.12 火车票界面图标
（5）准备个人中心界面用到的一些图标，放置在IMAGES/ICON/GRZX 文件夹下，如图6.13所示。
图6.13 个人中心界面图标
6.4 设计流程
图6.1 火车票
图6.2源自文库飞机票
图6.3 汽车票
图6.4 个人中心
6.1 需求描述
仿智行火车票12306微信小程序要完成以下功能。 （1）底部标签导航，放置4个标签：火车票、飞机票、汽车票、个 人中心。
选中效果图片呈现为蓝色，字体颜色设置蓝色，如图6.5所示。
图6.5 标签选中效果
（2）在火车票界面，顶部区域放置海报轮播区域，中间放置火车票、 飞机票查询内容，下面放置快捷导航菜单：极速抢票、在线选座、抢 手好货、超值酒店。如图6.6所示。
6.2.2 相关知识点
（1）在界面布局的时候，会用到微信小程序的组件，包括VIEW视图 容器组件、IMAGE图片组件、SWIPER滑块视图容器组件、表单相关组 件等组件的使用。 （2）界面样式设计，需要写一些WXSS样式进行界面的美化和渲染。 （3）获取火车票列表信息，需要使用WX.REQUEST发起网络请求获取 到火车票相关信息，返回JSON数据，在界面中进行渲染。 （4）界面跳转需要使用WX.NAVIGATETO这个API接口来实现。
图6.8 个人中心界面
图6.9 抢票界面
6.2 设计思路及相关知识点
6.2.1 设计思路
（1）设计底部标签导航，准备好底部标签导航的图标并建立相应 的4个页面；设置默认时图片和选中时图片，标签名称采用两种颜 色，蓝色为选中颜色，灰色为默认颜色。 （2）设计幻灯片轮播效果，准备好幻灯片需要轮播的图片。 （3）设计火车票查询区域，火车票查询区域有火车票和飞机票两 个页签的切换效果，切换选中时，背景色为白色，文字颜色为黑色。
（3）在WINDOW数组里配置窗口导航背景颜色为蓝色（#5495E6）， 导航栏文字为智行12306，字体颜色设置为白色（#FFFFFF）。 （4）在TABBAR对象里配置底部标签导航背景色为白色（#FFFFF）， 文字默认颜色为灰色，选中时为蓝色（#5495E6），在LIST数组里配 置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。
（4）设计火车票列表界面时，可以先设计出一条火车票信息，然 后发起网络请求获得所有的火车票列表，采用列表渲染的方式展现 出所有火车票信息。 （5）个人中心采用列表式导航的方式来进行二级界面导航，这种 导航设计也是先设计出一个菜单，其他的导航菜单可以直接复用这 个菜单的界面效果。 （6）抢票界面也是非常有规律性的界面，先设计出第一个区域内 容，其他区域内容可以直接进行复用。
6.3 准备工作
（1）需要准备一个APPID，如果没有APPID，就不能在手机上进行项目 的预览，但是在开发工具上开发是没有任何问题的。 （2）底部标签导航，需要有选中图片和默认图片，放置在IMAGES/BAR 文件夹下，如图6.10所示。
图6.10 底部标签导航图片
（3）需要准备海报轮播的图片，放置在IMAGES/HAIBAO文件夹下， 如图6.11所示。
6.4.1 底部标签导航设计
仿智行火车票12306微信小程序的底部标签导航分为4个标签导航： 火车票、飞机票、汽车票、个人中心。
标签导航选中时导航图标会变为蓝色图标，导航文字会变为蓝色 文字，如图6.14所示。
图6.14 底部标签导航选中效果
（1）新建一个ZXTRAIN项目的微信小程序，将准备好的底部标签导航图标、 海报轮播图片、火车票界面图标、个人中心界面图标放置在ZXTRAIN项目 下。 （2）打开APP.JSON配置文件，在PAGES数组里添加4个页面路径“PAGES/ TRAIN/TRAIN”“PAGES/AIRPLANE/AIRPLANE”“PAGES/BUS/BUS”“PAGES / MYCENTER/MYCENTER”，保存后会自动生成相应的页面文件夹；删除 “PAGES/INDEX/INDEX”“PAGES/ LOGS/LOGS”页面路径以及对应的文件 夹。
微信小程序开发图解案例教程 （附精讲视频）（第2版）
刘刚 著
第6章 综合案例：仿智行火车票12306微信小程序
需求描述 ■ 设计思路及相关知识点 ■ 准备工作 ■ 设计流程 ■ 小结 ■
智行火车票对12306购票流程进行了 大量优化，使用户购票更加快捷，还额 外提供了智能查询和火车票监控功能。
智行火车票APP的主要界面如图6.1、 图6.2、图6.3、图6.4所示。
（3）在火车票界面，输入起始站和终点站，单击查询按钮，可以查 到火车票信息，包括车站名称、车次、历时时长、发车时间、到站时 间、票价，如图6.7所示。
图6.6 火车票界面
图6.7 火车票列表
（4）在个人中心界面，设计账号信息内容、订单菜单导航以及 二级页面的列表式导航，如图6.8所示。 （5）在个人中心界面，单击“邀请好友一起来抢票”导航，可 以查看抢票情况，如图6.9所示。