微信小程序分包及案例

5. 分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用
时按需进行加载。

• 可以优化小程序首次启动的下载时间
• 在多团队共同开发时可以更好的解耦协作

分包后，小程序项目由1个主包+多个分包组成：

• 主包：一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源
• 分包：只包含和当前分包有关的页面和私有资源

目前，小程序分包的大小有以下两个限制：

• 整个小程序所有分包大小不超过16M（主包+所有分包)
• 单个分包/主包大小不能超过2M

// 小程序的目绿结构
- app.js
- app.]son
- app.wxss 
- pages // 主包的所有页面
	- index
	- logs
- packageA // 第一个分包
	- pages// 第一个分包的所有页面
		- cat
		- dog
- packageB // 第二个分包
	- pages// 第二个分包的所有页面
		- apple
		- banana
- utils

// app.json
"pages":[							//主包的所有页面
	"pages/index",
	"pages/logs"
],
"subpackages":[						// 通过subpackages节点，声明分包的结构
    {
        "root":"packageA”,			// 第一个分包的根目录
        "pages":[					// 当前分包下，所有页面的相对存放路径
            "pages/cat",
            "pages/dog"
        ]
    },{
        "root":"packageB”,			// 第二个分包的根目录
        "name":"pack2",				// 分包的别名
        "pages”:[					// 当前分包下，所有页面的相对存放路径
            "pages/apple",
            "pages/banana"
        ]
       }
 ]

打包原则

1. 小程序会按subpackages的配置进行分包，subpackages之外的目录将被打包到主包中
2. 主包也可以有自己的pages(即最外层的pages字段)
3. tabBar页面必须在主包内
4. 分包之间不能互相嵌套

引用原则

1. 主包无法引用分包内的私有资源
2. 分包之间不能相互引用私有资源
3. 分包可以引用主包内的公共资源

6. 独立分包

独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。

独立分包和普通分包的区别：最主要的区别是否依赖于主包才能运行

• 普通分包必须依赖于主包才能运行
• 独立分包可以在不下载主包的情况下，独立运行

开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因如下：

• 当小程序从普通的分包页面启动时，需要首先下载主包
• 而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度

// app.json
 "independent": true // 配置后即可独立分包

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源！

7. 分包预下载

分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包
页面时的启动速度。

预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用preloadRule节点定义分包的预下载
规则，示例代码如下：

{
    "preloadRule":{					//分包预下载的规则
        "pages/contact/contact":{	//触发分包预下载的页面路径
            //network表示在指定的网路模式下进行预下载，
            //可选值为：a11(不限网路)和wifi(仅wifi模式下进行预下载)
            //默认值为：wifi
            "network":"all",
            //packages表示进入页面后，预下载厚些分包
            //可以通过root或name指定预下载系些分包
            "packages":["pkgA"]
   		 }
    }
}

同一个分包中的页面享有共同的预下载大小限额2M

!

8. 案例-自定义tabbar

自定义 tabBar | 微信开放文档 (qq.com)

<!--custom-tab-bar/index.wxml-->

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

MobX | 微信开放文档 (qq.com)

// custom-tab-bar/index.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../store/store'

Component({
  // vat tabbar图标与文字的margin去掉
  options: {
    styleIsolation: 'shared'
  },
  behaviors: [storeBindingsBehavior],
  properties: {
  },
  storeBindings: {
    store,
    fields: {
      sum: 'sum',
      active:'activeTabBarIndex'
    },
    actions: {
      updateActive:'updateActiveTabBarIndex'
    }
  },
  observers:{
     // 信息tab的微标与 store里面的sum绑定
    'sum':function(val){
      console.log(val)
      this.setData({
        'list[1].info':val
      })
    }
  },
  data: {
    "list": [
      {
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home_act.png"
      },
      {
        "pagePath": "/pages/message/message",
        "text": "信息",
        "iconPath": "/images/message.png",
        "selectedIconPath": "/images/message_act.png",
        info: 2
      },
      {
        "pagePath": "/pages/contact/contact",
        "text": "联系人",
        "iconPath": "/images/contact.png",
        "selectedIconPath": "/images/contact_act.png"
      }
    ]
  },

  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      // this.setData({ active: event.detail })
      this.updateActive(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }
})

/* custom-tab-bar/index.wxss */
.van-tabbar-item{
  --tabbar-item-text-color:1
}

// store/stroe.js
// es6按需导入
import { action, observable } from 'mobx-miniprogram'
// es6按需导出
export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  activeTabBarIndex: 0,
  //计算属性
  get sum() {
    return this.numA + this.numB
  },
  // actions 方法，用来修改store 找那个的数据
  updateNum1: action(function (step) {
    this.numA += step
  }),
  updateNum2: action(function (step) {
    this.numA += step
  }),
  updateActiveTabBarIndex: action(function (index) {
    this.activeTabBarIndex = index
  })
})

以上案例知识点：组件间通信、组件behaviors、全局数据共享的知识