微信小程序自定义tabbar、自定义导航、分包
自定义tabbar
在项目根目录下创建custom-tab-bar文件夹，在该文件夹下创建组件
自定义tabbar作为一个自定义组件进行构建。构建完毕后在app.json中的tabBar选项中配置custom，并配置完整的list选项。
"tabBar": {
"color": "#000",
"selectedColor": "#d8e106",
"list": [{
"pagePath": "pages/tabbar/index/index",
"selectedIconPath": "/pages/images/tabbar/index_selected.png",
"iconPath": "/pages/images/tabbar/index.png",
"text": "首页"
},
{
"pagePath": "pages/tabbar/cinema/cinema",
"selectedIconPath": "/pages/images/tabbar/cinema_selected.png",
"iconPath": "/pages/images/tabbar/cinema.png",
"text": "影院"
},
{
"pagePath": "pages/tabbar/film/film",
"selectedIconPath": "/pages/images/tabbar/film_selected.png",
"iconPath": "/pages/images/tabbar/film.png",
"text": "电影"
},
{
"pagePath": "pages/tabbar/mine/mine",
"selectedIconPath": "/pages/images/tabbar/mine_selected.png",
"iconPath": "/pages/images/tabbar/mine.png",
"text": "我的"
}
],
"custom": true
}
小程序会自动引入页面作为tabbar，不需要在wxml中手动书写custom-tab-bar组件。
当在app.json中开启lazyCoding时自定义tabbar在第一次渲染时不会注入自定义tabbar，看不到tabbar显示，需要在页面中手动书写组件。
自定义tababr使用fixed布局在底部，不会作为page内的元素。
使用自定义tabbar后，需要在每个使用tababr的页面中设置当前tababr的选中状态。当点击自定义tabbar时需要手动跳转到对应的页面。
自定义导航
自定义导航使用自定义组件进行自定义。需要在app.json中开启navigationStyle:custom并在usingComponent中引入导航组件。自定义导航需要在使用自定义组件的页面中手动书写组件，否则不显示。
"navigationStyle": "custom",
"nav": "/components/nav/nav"
如果自定义导航组件使用absolute定位在顶部，当页面高度超过可显示高度后，上滑页面导航也会上滑，如果自定义导航组件使用fixed定位在顶部，当页面高度超过可显示高度后，上滑页面导航会固定不动。
当自定义导航脱离文本流时，页面的顶部内容会被导航遮盖。需要设置page的padding-top或者使用空白元素占位。
自定义导航的高度是右上角的菜单胶囊的高度和其顶部的距离之和。
使用自定义导航和自定义tababr后可以把中间显示区域设置为固定的高度使用scroll-view进行滚动。
分包
微信小程序上传对包的大小有限制，每个包最大2mb，因此通过分包减小单独包的大小。
在app.json中配置subpackages字段。每个分包中都有pages文件夹
"subpackages": [{
"root": "packages/property", // 分包路径
"pages": [
"pages/property/property" // 分包中的页面的路径
]
},
{
"root": "packages/parking",
"pages": [
"parking/pages/car_number_pay/car_number_pay"
]
}
]
使用分包后可以使用分包预加载，在app.json中配置preloadRule字段。分包预下载是当进入某个页面时下载配置的packages中的分包。
"preloadRule": {
"pages/tabbar/index/index":{ // 进入的页面的路径
"network": "all",
"packages": ["packages/property"]
}
}