UniApp项目处理小程序分包

目前 uniApp也成为一种 App端开发的大趋势

因为在目前跨端 uniApp可以说相当优秀

可以同时兼容 H5 PC 小程序 APP 的技术目前市场屈指可数

那么说到微信小程序自然就要处理分包因为微信小程序对应用大小限制非常铭感

限制在2MB 超过之后就会无法真机调试与打包

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

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

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

说回到项目目前所有的页面都在pages中

所以我们的主包自然就是我们整个项目页面的主包

我们先打开项目跟目录的 manifest.json

打开源码视图

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

我们在下面加上

javascript 复制代码

"optimization":{"subPackages": true}

意思就是开启分包

然后我们右键项目跟目录多创建几个 page包

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

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

就叫list吧

list.vue 编写代码如下

html 复制代码

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

<script>
</script>

<style>
</style>

pageB 中创建一个 map.vue

代码如下

html 复制代码

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

<script>
</script>

<style>
</style>

这样整体的目录结构就是这样的

但现在 pageA 和 pageB都没有生效

我们打开 pages.json

在里面加个subPackages

javascript 复制代码

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

我们配置了两个分包 pageA和pageB

然后声明了它们下面的page 分包是 pageA的list 和 pageB下的map

一个包下面可以有多个page例如这样

javascript 复制代码

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

但我这里为了简单点两个包下面就都只写了一个界面

然后我们pages中的首页 index 编写代码如下

html 复制代码

<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>

设置button按钮然后点击事件尝试向 pageA下的list界面跳转

我们尝试微信开发者工具运行

项目启动成功

我们点击按钮

套转也是非常顺利