微信小程序《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开发非常方便。多页面导航是小程序开发基础几乎所有小程序都会用到页面跳转。