UniApp项目处理小程序分包

目前 uniApp也成为一种 App端开发的大趋势
因为在目前跨端 uniApp可以说相当优秀

可以同时兼容 H5 PC 小程序 APP 的技术目前市场屈指可数
那么说到微信小程序自然就要处理分包因为微信小程序对应用大小限制非常铭感
限制在2MB 超过之后就会无法真机调试与打包

不过需要注意的是就算分包确保每个包都不大于 2MB的情况下如果主包加上其他包总和大于 20MB依旧会超过限制

不过不用担心图片建议放在服务器上别增加小程序的负担了然后一个包可以装非常多page页面然后 10个包一般的市场应用都能满足了

所以分包固然好但也不能为所欲为只能说将容纳度提高了

说回到项目目前所有的页面都在pages中
所以我们的主包自然就是我们整个项目页面的主包
在这里插入图片描述
我们先打开项目跟目录的 manifest.json
打开源码视图

我们在下面找到 mp-weixin 这就是微信相关的配置
我们在下面加上

"optimization":{"subPackages": true}

意思就是开启分包
在这里插入图片描述
然后我们右键项目跟目录多创建几个 page包

这里我创建了 pageA 和 pageB 两个包

然后我们在 pageA中创建一个 vue 文件

就叫list吧

list.vue 编写代码如下

<template>
	<view class="content">
		LIST组件
	</view>
</template>

<script>
</script>

<style>
</style>

pageB 中创建一个 map.vue
代码如下

<template>
	<view class="content">
		MAP组件
	</view>
</template>

<script>
</script>

<style>
</style>

这样整体的目录结构就是这样的
在这里插入图片描述
但现在 pageA 和 pageB都没有生效
我们打开 pages.json
在里面加个subPackages

"subPackages": [
	{
		"root": "pageA",
		"pages": [
			{
				"path": "list",
				"style": {
					"navigationBarTitleText": "列表"
				}
			}
		]
	},
	{
		"root": "pageB",
		"pages": [
			{
				"path": "map",
				"style": {
					"navigationBarTitleText": "集合"
				}
			}
		]
	}
],

我们配置了两个分包 pageA和pageB
然后声明了它们下面的page 分包是 pageA的list 和 pageB下的map
一个包下面可以有多个page例如这样

{
    "root": "pageA",
	"pages": [
		{
			"path": "list",
			"style": {
				"navigationBarTitleText": "列表"
			}
		},
		{
			"path": "map",
			"style": {
				"navigationBarTitleText": "集合"
			}
		}
	]
}

但我这里为了简单点两个包下面就都只写了一个界面
在这里插入图片描述
然后我们pages中的首页 index 编写代码如下

<template>
	<view class="content">
		<button @click="Jump()">跳转</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			
		},
		methods: {
			Jump() {
				uni.navigateTo({
				    url: "/pageA/list"
				})
			}
		}
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.content {
		height: 100vh;
		width: 100vw;
		position: relative;
	}
</style>