一、实验目的

掌握微信小程序页面注册方式，学会使用navigator导航组件实现页面之间跳转，了解全局样式与页面样式的使用方法，能够自主新增页面并完成导航配置。

二、实验环境

微信开发者工具 Stable 2.02，小程序基础库

三、实验原理

1. 所有页面必须在app.json的pages数组中完成注册，保存后开发者工具会自动生成页面的wxml、wxss、js、json文件，pages数组第一项默认作为小程序首页。

2. <navigator>导航组件用于页面跳转，url属性填写目标页面的相对路径，点击即可实现页面切换。

3. app.wxss用来编写全局样式，项目内所有页面都可以复用定义好的样式，减少重复代码。

4. icon组件可以设置不同类型图标，丰富列表UI；image组件加载本地图片资源。本次开发遇到Skyline渲染引擎兼容问题，开启自定义导航后子页面会出现空白，通过给滚动容器设置高度解决渲染异常。

四、实验步骤

1. 新建小程序项目，打开app.json，在pages数组中依次注册首页、载人航天、探月工程、卫星应用，再新增2个自定义页面：机器人工程、新能源技术，一共5个跳转页面。

2. 在首页index.wxml编写导航列表，使用navigator包裹每一条导航项，搭配icon图标与右侧箭头图片right.gif。

3. 在app.wxss编写全局样式，统一设置标题红色加粗、正文紫色。

4. 分别编写5个子页面的wxml内容，针对Skyline渲染带来的空白问题，给所有子页面滚动视图设置100vh高度。

5. 编译运行，依次点击全部导航条目，测试页面跳转是否正常，检查图片、文字样式是否生效。

五、运行效果

。

六、实验总结

本次实验熟悉了小程序页面注册流程，理解了导航组件的用法。开发踩坑：项目开启Skyline渲染引擎时，如果开启自定义导航，子页面很容易渲染空白，需要手动设置容器高度。新增页面时一定要记得在app.json注册，否则页面无法访问；本地图片路径写错会导致图片无法渲染，开发时要注意路径大小写与后缀名。通过本次练习，我掌握了多页面小程序开发的基础流程。