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 ,手动做一次也可以

相关推荐
子兮曰2 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰2 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万2 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝2 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋2 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95273 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端