uniapp-商城-42-shop 后台管理 分包

在uniapp 的全局文件中,讲了分包

pages.json 页面路由 | uni-app官网

主要是用于小程序的打包。超高两M就不能上传的。

看看官网上是怎么说的。

1 subPackages

分包加载配置,此配置为小程序的分包加载机制。

因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。

所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据pages.json的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。

App默认为整包。从uni-app 2.7.12+ 开始,vue2模式也兼容了小程序的分包配置。其目的不用于下载提速,而用于首页是vue时的启动提速。App下开启分包,除在pages.json中配置分包规则外,还需要在manifest中设置在app端开启分包设置,详见:manifest.json 应用配置 | uni-app官网

subPackages 节点接收一个数组,数组每一项都是应用的子包,其属性值如下:

属性 类型 是否必填 描述
root String 子包的根目录
pages Array 子包由哪些页面组成,参数同 pages

2 pages 不能超过2M,所以说把第一次加载的页面放到主包里面。

把一些其他的功能页面 等 放到多个小包里面 ubPackages

其中 主包和分包加起来不能超过20M

3 创建分包

1、在项目文件夹下,创一个文件夹 我们这里写的是pages_mange

2 在pages.json中,完成subpackages的添加

如上图,格式为:包含root 路由 和 pages路由

root 其实就是相对于项目目录的文件夹

pages 就是不同页面的信息数组,每一个数组元素 又是一个 字典。

每个数组元素字典包含path 和 style

javascript 复制代码
"subPackages": [{
			"root": "pages_manage", //管理
			"pages": [{
					"path": "index/index",
					"style": {
						"navigationBarTitleText": "后台管理首页"
						// "navigationBarBackgroundColor":""
					}
				},
				{
					"path": "category/category",
					"style": {
						"navigationBarTitleText": "分类管理"
					}
				},
				{
					"path" : "goods/list",
					"style" : 
					{
						"navigationBarTitleText" : "商品列表"
					}
				},
				{
					"path" : "goods/add",
					"style" : 
					{
						"navigationBarTitleText" : "添加商品"
					}
				},
				{
					"path" : "brand/brand",
					"style" : 
					{
						"navigationBarTitleText" : "商户信息"
					}
				}
			]
		}]

3、然后添加分包中的页面

这里可以不注册到pages.json ,手动做一次也可以

相关推荐
加班是不可能的,除非双倍日工资1 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi2 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip2 小时前
vite和webpack打包结构控制
前端·javascript
excel2 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
阿华的代码王国3 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼3 小时前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin
Jimmy3 小时前
AI 代理是什么,其有助于我们实现更智能编程
前端·后端·ai编程
ZXT3 小时前
promise & async await总结
前端
Jerry说前后端3 小时前
RecyclerView 性能优化:从原理到实践的深度优化方案
android·前端·性能优化
画个太阳作晴天3 小时前
A12预装app
linux·服务器·前端