3.分包 - 独立分包
(1).什么是独立分包
独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而独立运行。
(2).独立分包和普通分包的区别
最主要的区别: 是否依赖于主包才能运行
- 普通分包必须依赖于主包才能运行
- 独立分包可以在不下载主包的情况下独立运行。
(3).独立分包的应用场景
开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因如下：
- 当小程序从普通的分包页面启动时，需要首先下载主包
- 而独立分包
不依赖主包即可运行，可以很大程度上提升分包页面的启动速度
注意: 一个程序种可以有多个独立分包
(4).独立分包的配置方法
是否有indepentdent为 true 这个节点。如果有的话，就是独立分包
将分包okgB转变为 独立分包
{ "root": "pkgB", "name": "p2", "pages": [ "pages/apple/apple" ], "independent": true }
(5).引用原则
独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源！
主包无法引用独立分包内的私有资源独立分包之间，不能相互引用私有资源独立分包和普通分包之间，不能相互引用私有资源- 特别注意：
独立分包中不能引用主包内的公共资源。普通分包是可以实现引用主包内的资源。
4.分包 - 分包预下载
(1).什么是分包预下载
分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。
比如 进入到 联系页面，可能要用到 cat 页面，我们就预下载 pack1 分包
(2).配置分包的预下载
预下载分包的行为，会在进入指定的页面时触发。在 app.json 中，使用 preloadRule 节点定义分包的预下载规则
"preloadRule": { "pages/contact/contact":{ "packages": ["pkgA"], "network": "all" } },
(3).分包预下载的限制
同一个分包中的页面享有共同的预下载大小限额2M，例如：
- 当小程序进入到主页面的时候，会下载他们所对应的分包（分包预下载），他们
共同的预下载不能超过 2兆
5.案列 - 自定义 tabBar
(1).本案列主要用到的知识点
- 自定义组件
- Vant组件库
- MobX数据共享
- 组件样式隔离
- 组件数据监听
- 组件的behaviors
- Vant样式覆盖
(2).实现步骤
自定义tabBar分为3大步骤
- 配置信息 (app.json)
- 添加tabBar代码文件
- 编写tabBar代码
(3).配置信息
- 在
app.json中的tabBar项指定custom字段，同时其余tabBar相关配置也补充完整。 - 所有
tab页的json里需声明usingComponents项，也可以在app.json全局开启。
- 为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。
"tabBar": { "custom": true, "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "images/index.png", "selectedIconPath": "images/index-active.png" }, { "pagePath": "pages/message/message", "text": "信息", "iconPath": "images/mail.png", "selectedIconPath": "images/mail-active.png" }, { "pagePath": "pages/contact/contact", "text": "电话", "iconPath": "images/phone.png", "selectedIconPath": "images/phone-active.png" } ] },
- 添加 tabBar 代码文件
在代码根目录下添加入口文件:
custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss
(4).添加tabBar代码文件
- 引入Vant做效果装饰
app.json
引用的是单个组件
"usingComponents": { "van-tabbar": "@vant/weapp/tabbar/index", "van-tabbar-item": "@vant/weapp/tabbar-item/index" }
- 自定义选中图标和未选中图标
<van-tabbar-item info="3"> <image slot="icon" src="/images/index.png" 选中的路径图片 mode="aspectFit" style="width: 30px; height: 18px;" /> <image slot="icon-active" src="/images/index-active.png" 未选中的路径图片 mode="aspectFit" style="width: 30px; height: 18px;" /> 首页 </van-tabbar-item>
<!--custom-tab-bar/index.wxml--> <van-tabbar active="{{ active }}" bind:change="onChange"> <van-tabbar-item info="3"> <image slot="icon" src="/images/index.png" mode="aspectFit" style="width: 30px; height: 18px;" /> <image slot="icon-active" src="/images/index-active.png" mode="aspectFit" style="width: 30px; height: 18px;" /> 首页 </van-tabbar-item> <van-tabbar-item icon="home-o">标签</van-tabbar-item> <van-tabbar-item icon="search">标签</van-tabbar-item> <van-tabbar-item icon="friends-o">标签</van-tabbar-item> <van-tabbar-item icon="setting-o">标签</van-tabbar-item> </van-tabbar>
- 循环遍历自定义图标
赋值app.json的tabBar的list数组到index.js的data区域中
对象其实也是 “” 引用的，只不过在data区域可以省略
"list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "/images/index.png", "selectedIconPath": "/images/index-active.png" }, { "pagePath": "pages/message/message", "text": "信息", "iconPath": "/images/mail.png", "selectedIconPath": "/images/mail-active.png" }, { "pagePath": "pages/contact/contact", "text": "电话", "iconPath": "/images/phone.png", "selectedIconPath": "/images/phone-active.png" } ]
index.wxml
<!--custom-tab-bar/index.wxml--> <van-tabbar active="{{ active }}" bind:change="onChange"> <van-tabbar-item wx:for="{{list}}" wx:key="index"> <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" /> <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" /> {{item.text}} </van-tabbar-item> </van-tabbar>
