任务5 添加子页面
任务描述
完成子页面添加，实现子页面图片浏览功能。
1）通过编辑app.json内容，实现子页面添加。
2）配置子页面的标题。
3）在子页面实现多张图片显示的功能。
操作步骤
1 打开小程序项目，打开utils/app.json，如图1-31所示。
2 在utils/app.json文件里的“pages”项内的第一行添加“"pages/center/index"”，保存后，实现新增子页面pages/center/index的效果，子页面pages/center/index的视图效果呈现在左边的手机模拟器中，如图1-32所示。
图1-31 打开utils/app.json
图1-32 子页面pages/center/index的视图效果
经验分享
使用app.json文件来对微信小程序进行全局配置，可以设置页面文件的路径、窗口表现、网络超时时间等。
其中pages属性是一个数组，说明小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息，文件名不需要写文件后缀，小程序会自动寻找对应位置的.json、.js、.wxml、.wxss这4个文件进行处理。
3 在center/index.json文件里花括号内添加“"navigationBarTitleText":"图片展示"”，保存后，实现设置子页面标题文本为“图片展示”的效果，如图1-33所示。
注意：添加一行时，必须在上一行的末尾添加逗号。
图1-33 子页面标题文本为“图片展示”
4 把若干个图片复制到项目的images文件夹中，并依次将它们命名为fruit1.png、fruit2.png、fruit3.png、fruit4.png、fruit5.png，如图1-34所示。
图1-34 将若干个图片复制到项目的images文件夹中
5 打开center/index.wxml文件，添加组件＜view class="box"＞，并在其内添加＜image src="../../images/fruit1.png"＞＜/image＞组件：
在center/index.wxml页面中，实现显示图片images/fruit1.png的效果，如图1-35所示。
图1-35 实现显示图片images/fruit1.png的效果
6 打开center/index.wxss文件，添加样式：
设置图片images/fruit1.png宽度与高度后的效果，如图1-36所示。
图1-36 设置图片images/fruit1.png宽度与高度
7 打开center/index.wxml文件，在组件＜view class="box"＞内，再添加多个image组件，实现显示多张图片的效果，如图1-37所示。
图1-37 添加多个image组件
知识链接
在微信小程序项目开发中，将多个页面应用于项目中几乎是必不可少的应用技能。编辑utils/app.json文件就可以实现首页设置、子页面添加等功能。
在每个子页面文件夹下，都存在.json、.js、.wxml、.wxss这4个文件。