随笔集：uniapp的分包

uniapp的分包

由于微信小程序的代码体积打包压缩后不能超过2M，但就一般小程序而言其实就相当于一个阉割版的app，功能上哪怕阉割再多，只要形成一定的玩法规则体系，非常容易就超过这个限制。因此官方提出了分包的概念。就是将一个大的代码包分成若干个更小的小代码包。但是每个分包和主包也不能单个超过2M的限制且整个小程序所有分包大小不超过 8M。

分包的实现也十分简单，这边我以uniapp为例。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom",
				"navigationBarTextStyle": "white",
				"backgroundColor": "#f7f7f7",
				"enablePullDownRefresh":true
			}
		},
		{
			"path": "pages/service/service",
			"style": {
				"navigationStyle": "custom",
				"navigationBarBackgroundColor": "#fff",
				"backgroundColor": "#f7f7f7",
				"enablePullDownRefresh": true
	
			}
		},
		{
			"path": "pages/active/active",
			"style": {
				"navigationStyle": "custom",
				"backgroundColor": "#f7f7f7",
				"enablePullDownRefresh": true
	
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationStyle": "custom",
				"navigationBarTextStyle": "white",
				"backgroundColor": "#f7f7f7",
				"enablePullDownRefresh": true
			}
		}
    ],
	"subPackages": [{
		"root": "pages/community",
		"pages": [{
			"path": "chooseCommunity",
			"style": {
				"navigationStyle": "custom",
				"backgroundColor": "#f7f7f7",
				"onReachBottom": true,
				"disableSwipeBack": false
			}
		}]
	},{
		"root": "pages/orderList",
		"pages": [{
			"path": "orderList",
			"style": {
				"navigationBarBackgroundColor": "#fff",
				"navigationBarTitleText": "订单列表",
				"navigationBarTextStyle": "black",
				"enablePullDownRefresh": true
			}
		},{
			"path": "orderInfo",
			"style": {
				"navigationBarBackgroundColor": "#fff",
				"navigationBarTitleText": "订单详情",
				"navigationBarTextStyle": "black",
				"enablePullDownRefresh": true
			}
		}]
	},{
		"root": "pages/active/activeInfo",
		"pages": [{
			"path": "activeInfo",
			"style": {
				"navigationStyle": "custom",
				"backgroundColor": "#f7f7f7",
				"enablePullDownRefresh": true
			}
		}]
	}
	],

	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#808080",
		"selectedColor": "#ff5032",
		"borderStyle": "black",
		"backgroundColor": "#f7f7f7",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/nav/index_home.png",
				"selectedIconPath": "static/nav/index_home_active.png",
				"text": "首页" 
			},
			{
				"pagePath": "pages/service/service",
				"iconPath": "static/nav/index_sort.png",
				"selectedIconPath": "static/nav/index_sort_active.png",
				"text": "服务"
			},
			{
				"pagePath": "pages/active/active",
				"iconPath": "static/nav/index_cart.png",
				"selectedIconPath": "static/nav/index_cart_active.png",
				"text": "活动"
			},
			{
				"pagePath": "pages/my/my",
				"iconPath": "static/nav/index_user.png",
				"selectedIconPath": "static/nav/index_user_active.png",
				"text": "我的"
			}
		]
	},
	"permission": {
	  "scope.userLocation": {
	    "desc": "你的位置信息将用于小程序位置接口的效果展示"
	  }
	}
}

就是在page下面再创建一个subPackages，page里面的叫做主包，subPackages里面的每一个以root开头的配置项都是小程序的一个分包，root后面的目录为分包的根目录，下面pages里面的为该分包目录包含的页面。

注意：如果是使用默认的底部导航栏，则导航栏的页面不能在分包里否则会报错。分包后，分包A 是无法使用分包B的JS 文件、template和资源文件的