微信小程序《3.1 创建页面和导航》
前言
小程序是多页面应用，一个项目可以包含多个页面，通过 app.json 注册页面，使用 组件实现页面跳转。
本案例主题：中国航天领域重要成果。首页展示3个导航条目，点击分别跳转到载人航天、探月工程、卫星应用页面；
课后作业：新增2个页面，总共5个跳转页面，修改icon type显示不同图标。
核心知识点
- 在 app.json 的 pages 数组中添加页面路径，开发者工具会自动生成整套页面4文件(wxml/wxss/json/js)。
- 导航组件， url 属性填写目标页面相对路径实现页面跳转。
- icon 组件： type 属性可以切换不同内置图标（success、info、warn、waiting、cancel等）。
- Flex布局实现列表条目：图标居左，文字占剩余空间，箭头居右。
准备素材：项目根目录新建 images 文件夹，放入 right_arrow.png 右箭头图片。
app.json
删除skyline相关配置，注册5个页面（原3个+作业新增2个，这里演示完整5页面）
代码如图所示：
保存之后工具自动生成： aerospace 、 moon 、 satellite 、 rocket 、 station 五个页面文件夹。
pages/index/index.wxml（首页导航，作业已修改不同icon type）
代码如图所示：
pages/index/index.wxss
代码如图所示：
全局 app.wxss
代码如图所示：
载人航天页面 pages/aerospace/aerospace.wxml
代码如图所示：
pages/aerospace/aerospace.json
代码如图所示：
探月工程页面 pages/moon/moon.wxml
代码如图所示：
pages/moon/moon.json
代码如图所示：
卫星应用页面 pages/satellite/satellite.wxml
代码如图所示：
pages/satellite/satellite.json
代码如图所示：
作业新增页面1 ——运载火箭 pages/rocket/rocket.wxml
代码如图所示：
pages/rocket/rocket.json
代码如图所示：
作业新增页面2 ——中国空间站 pages/station/station.wxml
代码如图所示：
pages/station/station.json
代码如图所示：
补充：所有页面的 .js 、 .wxss 文件工具自动生成，无需手写额外代码，样式全部复用全局 app.wxss 。
效果部分展示
首页展示5条导航列表，每条：左侧不同类型icon图标，中间文字，右侧箭头图片，flex实现水平一行对齐，垂直居中。
点击任意条目， 根据 url 跳转到对应子页面。
子页面使用自定义导航栏， back=“{{true}}” 显示返回箭头，点击可以回到首页。
作业完成点：
在app.json的pages数组增加2条页面路径，自动生成2套页面文件；
index页面新增两个 导航项；
修改各个 ，使用success / info / warn / waiting / cancel不同内置图标。
核心知识点总结
注册新页面：只需要在 app.json 的 pages 数组添加页面路径，保存后开发者工具自动生成wxml/wxss/json/js四个页面文件，不用手动新建文件夹。数组第一个页面为小程序启动首页。
navigator导航组件
url=“相对页面路径” ：指定要跳转的页面地址；
页面跳转后，左上角返回按钮可以回到上一页。
- icon内置图标组件
type=“success” 绿色对勾； info 蓝色感叹号； warn 黄色警告； waiting 等待圆圈； cancel 红色叉号。
transform:scale(1.5) 可以放大图标大小。
- Flex布局做列表条目：
父容器 display:flex; align-items:center; 实现垂直居中；
中间文字设置 flex:1 自动占满剩余全部宽度，左右元素固定大小。
作业心得
本次案例学习了小程序多页面开发流程，明白了小程序所有页面都必须在 app.json 中注册才可以访问。
是页面跳转最基础的组件，通过url实现页面之间互相访问。利用flex布局轻松实现了列表条目：图标、文字、箭头三栏布局。
作业中新增两个页面，加深了对页面注册流程理解；修改icon的type属性，看到小程序内置多种图标，不需要外部图片就可以完成简单UI，开发非常方便。多页面导航是小程序开发基础，几乎所有小程序都会用到页面跳转。
