本节主要讲解分包机制，其他次级页面的开发。
# 小程序分包机制
每次打开小程序会发现有的小程序打开的很快，有些很慢，甚至白屏时间很长。原因是包代码量大小的问题。第一次进入小程序的时候，小程序会下载主包代码，如果我们的主包业务代码越多，那么白屏的时间也会越长。
小程序有个机制是在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。因此我们不能把所有代码都放在主页面里面。我们把次级页面放到分包里面。
在构建小程序分包项目时，通常会创建一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面 TabBar 页面，以及一些所有分包都需用到公共资源（css，js，image）；而分包则是根据开发者的配置进行划分。
某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。在 pages.json 我们需要 subPackages 管理次级页面的路由：
// pages.json
"pages": [],
"subPackages": [
{
"root": "pages/subpages/index", // 分包根目录
"pages": [{
"path": "album", // 配置页面路径
"style": {
"navigationBarTitleText": "歌单",
"app-plus": {
"titleNView": false
}
}
}]
}
],
分包里面的 pages 与主包的 pages 页面组成保持一致。对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。
因此像歌单这样的次级页面都会在分包中注册管理。
# 页面跳转与获取参数
关于页面跳转，在我们常识中就是浏览器对象窗口 location（url）属性的改变，可能我们第一印象是 a 标签，或者 location 对象的 href 属性进行页面的跳转。可是在 Uniapp 框架中怎么实现跳转呢？比如我要从首页跳转到歌单页？
在 Uniapp 中想要实现跳转，可以查看路由与页面跳转，由 uni.navigateTo, uni.redirectTo, uni.navigateBack, uni.switchTab, uni.reLaunch 五个 api 组成，比如从首页跳转到列表页：
// 跳转到歌单页面并传递参数 1
uni.navigateTo({
url: '/pages/subpages/index/album?id=1',
success: function () { // 成功时回调函数
console.log('跳转成功')
}
})
在 Uniapp 中也有类似的 a 标签元素 navigator。
由于 Uniapp 中并没有 a 标签以及 location 对象，页面跳转则要使用框架中的 api 来进行对象跳转。
像平常的页面跳转，我们使用页面标签即可，要是在事件回调中则使用 api 进行跳转，比如在首页的场景中的推荐歌单跳转歌单页面，附带传参数 id，可以在生命周期回调函数 onLoad 的参数值中获取到。
navigator 默认点击时的样式是有虚影状态的，我们需要设置 hover-class="none" ，设置成点击没有态效果。默认跳转方式 open-type="navigate"。
在 /pages/index/index.vue 首页
<!-- index.vue -->
<!-- 歌单分类块 -->
<view class="song-list">
<view class="tit-bar">
推荐歌单
<view class="more fr">歌单广场</view>
</view>
<scroll-view class="scroll-view" scroll-x>
<navigator class="item" v-for="(item, index) in recommendSongs" :key="index" hover-class="none" :url="'/pages/subpages/index/album?id='+ item.id">
<image class="img" :src="item.picUrl + $imgSuffix"></image>
<view class="desc ellipsis">{{ item.name }}</view>
<view class="count">{{ item.playCount }}</view>
</navigator>
</scroll-view>
</view>
