当前位置: 首页 > news >正文

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 节点接收一个数组,数组每一项都是应用的子包,其属性值如下:

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

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

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

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

3 创建分包

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

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

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

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

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

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

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

相关文章:

  • VRRP与BFD在冗余设计中的核心区别:从“备用网关”到“毫秒级故障检测”
  • [ACTF2020 新生赛]Upload
  • 大模型API密钥的环境变量配置(大模型API KEY管理)(将密钥存储在环境变量)(python-dotenv)(密钥管理)
  • 编译原理实验 之 Tiny C语言编译程序实验 语法分析
  • 李臻20242817_安全文件传输系统项目报告_第9周
  • w~嵌入式C语言~合集4
  • flask uri 怎么统一加前缀
  • 【Web API系列】深入解析 Web Service Worker 中的 WindowClient 接口:原理、实践与进阶应用
  • Spring框架的ObjectProvider用法
  • C#通过NTP服务器获取NTP时间
  • 鸿蒙版电影app设计开发
  • 鸿蒙NEXT开发正则工具类(ArkTs)
  • django admin 设置字段不可编辑
  • php安装swoole扩展
  • 【halcon】tuple_sort_index 和 select_obj 配合使用 详解
  • [特殊字符]实战:使用 Canal + MQ + ES + Redis + XXL-Job 打造高性能地理抢单系统
  • ASP.NET图片盗链防护指南
  • 总线位宽不变,有效数据位宽变化的缓存方案
  • 概率论与统计(不确定性分析)主要应用在什么方面?涉及到具体知识是什么?
  • 深入解析 npm 与 Yarn:Node.js 包管理工具对比与选型指南
  • 幸福航空取消“五一”前航班,财务人员透露“没钱飞了”
  • 马上评丨学生举报食堂饭菜有蛆,教育局应该护谁的犊子
  • 《沙尘暴》:用贴近生活的影像和表演拍摄悬疑剧
  • 从“网点适老化”到“社区嵌入式”,“金融为老上海模式”如何探索?
  • 可实时追踪血液中单个细胞的穿戴医疗设备问世
  • 常熟银行一季度净赚超10亿增逾13%,净息差较上年末下降0.1个百分点