分包后项目构成

分包后小程序由1个主包和多个分包组成

主包：一般只包含项目的启动页面或Tabbar页面

分包：只包含和当前分包有关的页面和资源

分包体积限制

整个小程序所有包大小不超过16M（主包+分包）

单个分包/主包大小不能超过2M

app.json中声明分包结构

//声明分包的结构
"subPackages": [{"root":"packageA",   //第一个分包的根目录"pages": [   //分包下所有页面的存放路径"pages/detail/detail"]},{"root":"packageB","pages": ["pages/goods/goods"]}],

自定义tabBar

根目录下自定义组件新建custom-tab-bar/index

把点击的active定义为共享的数据

store.js

// 创建store实例
export  const store = observable({// 定义共享数据  数据字段activeTabBarIndex:0,   //点击的下标updateActiveIndex:action(function(index){this.activeTabBarIndex = index})
})

wxml中

<van-tabbar active="{{ active }}" bind:change="onChange"><van-tabbar-item  info="{{item.info?item.info:''}}" wx:for="{{list}}" wx:key="index"><image slot="icon" src="{{item.iconPath}}" style="width: 25px; height: 25px;"  mode="aspectFit"></image><image slot="icon-active" src="{{item.selectedIconPath}}" style="width: 25px; height: 25px;"  mode="aspectFit"></image>{{item.text}}</van-tabbar-item>
</van-tabbar>

js中

import {storeBindingsBehavior} from  "mobx-miniprogram-bindings"
import {store} from '../store'Component({behaviors:[storeBindingsBehavior],storeBindings:{store,fields:{sum:'sum',active:'activeTabBarIndex'},actions:{updateActive:"updateActiveIndex"}},observers:{'sum':function(val){this.setData({'list[1].info':val})}},/*** 组件的初始数据*/data: {"list": [{"pagePath": "/pages/home/home","text": "首页","iconPath": "/images/tabs/home.png","selectedIconPath": "/images/tabs/home-active.png"},{"pagePath": "/pages/message/message","text": "消息","iconPath": "/images/tabs/message.png","selectedIconPath": "/images/tabs/message-active.png","info":1},{"pagePath": "/pages/contact/contact","text": "联系我们","iconPath": "/images/tabs/contact.png","selectedIconPath": "/images/tabs/contact-active.png"},{"pagePath": "/pages/contact/contact","text": "联系我们","iconPath": "/images/tabs/contact.png","selectedIconPath": "/images/tabs/contact-active.png"}]},/*** 组件的方法列表*/methods: {onChange(event) {// event.detail 的值为当前选中项的索引// this.setData({ active: event.detail });this.updateActive(event.detail)wx.switchTab({url: this.data.list[event.detail].pagePath,})},}
})

配置信息

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启

这一段在官网也有解释

"tabBar":{"custom":true,"list":[]
}

分包和自定义tabBar相关推荐

微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
文章目录一.自定义组件 1.创建组件 2.引用组件 3.组件和页面区别 4.组件样式 5.data.methods.properties 6.小程序的 data 和 properties 区别 7. ...
微信小程序五 npm 包、安装 vant组件、promise组件、全局数据共享、分包！！！、自定义 tabBar 案例
总结能够知道如何安装和配置 vant-weapp 组件库参考 Vant 的官方文档能够知道如何使用 MobX 实现全局数据共享安装包.创建 Store.参考官方文档进行使用能够知道如何对小程 ...
微信小程序自定义tabbar、自定义导航、分包
自定义tabbar 在项目根目录下创建custom-tab-bar文件夹,在该文件夹下创建组件自定义tabbar作为一个自定义组件进行构建.构建完毕后在app.json中的tabBar选项中配置cu ...
前置机上如何地址转换_canvas原生层级较高，遮盖自定义tabbar，转换为图片解决...
本文章基于wepy编写 (1)问题描述: 微信小程序用echarts画统计图:在微信调试工具中,无问题:真机上出现统计图浮在底部自定义tabbar上,并且小程序中使用的第三方dropmenu的遮盖层也 ...
React Native ScrollableTabView的自定义tabBar
react-native-scrollable-tab-view是一个非常好用的TabBar组件,支持滑动,可以实现标签超过屏幕宽度的情况.但是有时会需要实现比如提示未读个数.定制样式这些需求,那么已 ...
微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
从0开始架构一个IOS程序 ——04— UITabBarController和自定义TabBar 搭建主页面
从0开始架构一个IOS程序 04 UITabBarController 搭建主页面 Mac OSX 10.11 之后效果 1 首先创建自定义TabBar 1.1 WISHomeTabBarView. ...
微信小程序自定义tabBar
在app.json文件中tabBar节点"custom": true "tabBar": {"custom": true, //开启自定义t ...
小程序自定义tabbar custom-tab-bar 6s出不来解决方案，cover-view不兼容
小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容参考文章: (1)小程序自定义tabbar custom-tab-bar 6s出不来解决方案,c ...

分包和自定义tabBar