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界面跳转

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

项目启动成功

我们点击按钮

套转也是非常顺利

相关推荐
2501_915918415 小时前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者85 小时前
iOS 上架 uni-app 流程全解析,从打包到发布的完整实践
android·ios·小程序·https·uni-app·iphone·webview
说私域6 小时前
“互联网 +”时代商业生态变革:以开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序为例
人工智能·小程序·开源
低代码布道师12 小时前
少儿舞蹈小程序(7)打造您的“活”名片:动态展示机构实力
低代码·小程序
软工的小白14 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
程序员陆通15 小时前
用 Cursor AI 快速开发你的第一个编程小程序
人工智能·小程序
鹧鸪云光伏与储能软件开发15 小时前
投资储能项目能赚多少钱?小程序帮你测算
运维·数据库·小程序·光伏·光伏设计软件·光伏设计
微三云-轩16 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
低代码布道师16 小时前
少儿舞蹈小程序(8)校区信息后台搭建
低代码·小程序
2501_9160088916 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview