微信小程序开发闭到眼睛创建分包和详细解释

news2024/12/26 11:52:16

一、普通分包创建

1.介绍

说明:微信小程序分包是指将小程序的代码和资源按照一定规则分成多个包,减少首次加载时间,提高用户体验。分包可以有效减少小程序包的总大小,提高启动速度,减少首次加载时间。分包可以根据业务场景进行区分,将不同的功能和页面分成不同的包,用户只需要下载所需的包,有效减少了用户的等待时间。分包的原则是需要被分包的代码和资源具有独立性,可以独立运行,不影响主包的运行。在小程序开发中,可以利用分包进行优化和提升用户体验。

总结:按需加载,类似与懒加载。

2.分包项目的构成

说明:主包和分包的构成。

  1. 主包:一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源。
  2. 分包:只包含和当前分包有关的页面和私有资源。

3.分包的体积限制

说明:整个小程序所有分包大小不超过16M(主包+所有分包),单个分包/主包大小不能超过2M。

4.配置分包

  说明:app.json文件中配置subPackages",属性值是一个数组(默认有提示)。

 

说明:root是必须写的属性名,属性值是命名的packageproduct分包文件夹。pages代表着里面有多少个对象就有多少个分包 。如果要创建多个分包,那么就再写一个对象,编译。

说明:点击编译

5. 为分包添加别名

说明:声明一个name属性,直接写属性值。

6.如何查看分包的体积

 

 

二、分包的注意事项 

1.分包打包的原则

  1. 小程序会按subpackages的配置进行分包,subpackages之外的目录将被打包到主包中
  2. 主包也可以有自己的pages(即最外层的pages字段)
  3. tabBar页面必须在主包内
  4. 分包之间不能互相嵌套 

2.引用原则

  1. 主包无法引用分包内的私有资源
  2. 分包之间不能相互引用私有资源
  3. 分包可以引用主包内的公共资源 

3.独立分包

说明:独立分包本质上也是分包,只不过它比较特殊,可以独立于主包和其他分包而单独运行。

4. 独立分包和普通分包的区别

  1. 普通分包必须依赖于主包才能运行
  2. 独立分包可以在不下载主包的情况下,独立运行

5.独立分包的应用场景

说明:开发者可以按需,将某些具有一定功能独立性的页面配置到独立分包中。原因如下:

  1. 当小程序从普通的分包页面启动时,需要首先下载主包
  2. 而独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度

三、独立分包

1.创建 

说明:"independent": true,直接将普通的分包变成独立的分包。

 

2.引用原则

  1. 主包无法引用独立分包内的私有资源
  2. 独立分包之间,不能相互引用私有资源
  3. 独立分包和普通分包之间,不能相互引用私有资源
  4. 特别注意:独立分包中不能引用主包内的公共资源

四、分包预下载

1.介绍

说明:分包预下载指的是:在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度。 

2.配置

说明:

  1. "pages/my/my"表示当前页面的路径(即my页面)。
  2. "packages": ["packageproduct"]表示当前页面所用到的分包,即该页面需要从名为"packageproduct"的分包中加载代码和资源。
  3. "network": "all"表示在网络良好的情况下可以预加载所有资源,包括图片、音视频等。
  "preloadRule": {
   " pages/my/my":{
      "packages": ["packageproduct"],
      "network": "all"
    }
  },

 

 3.分包的预下载的限制

说明:同一个分包中的页面享有共同的预下载大小限额2M。

五、跳转分包

1.路由导航

说明:因为出过一篇微信路由导航,这里就不展开描述了!

<navigator url="/packageproduct/pages/product/product">product分包</navigator>

说明:点击就会跳转 

 

 

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/767082.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

实现小程序商城首页【源码公开】

效果图 页面源码 <view class"index-container"><view class"header"><!--搜索框【仅样式&#xff0c;不做处理】 start--><van-search bindtap"clickSearch" disabled shape"round" background"#9c7bf0&q…

在idea中搭建微服务项目(22版),详细教程

1.创建新的项目 2.创建的项目类型为SpringBoot 选择创建后再选择新建项目 3. 将新建的项目中不需要的东西都给删了,只留下pom文件即可 修改pom文件的版本 <version>2.1.6.RELEASE</version> 导入所需要的jar包,将原来<dependencies>中的依赖覆盖掉 <!-- …

10 卷积网络 convolutional networks

卷积 如果将图片从 H ∗ W ∗ C H*W*C H∗W∗C 拉伸到 N ∗ 1 N*1 N∗1 的维度&#xff0c;而参数矩阵又是 N ∗ M N*M N∗M 的大小。N很大&#xff0c;M也很大。整个网络中的参数量会变得巨大。 卷积过程&#xff0c;使用一个filter 在整个图片上滑动。 当然输入的图象可…

普通人决策正确率如何提升

简洁回复&#xff1a;非常非常非常难&#xff0c;几乎不能。 举个简单例子&#xff1a; 高考报志愿&#xff0c;能走到高考这一步的并取得成绩的&#xff0c;从幼儿园到高中&#xff0c;3633&#xff0c;这个赛道奔跑了15年。 大部分人这里指的是考生自己&#xff0c;花费在填…

Unity LayerMask原理和判断包含关系

在本文之前&#xff0c;请先了解全部位操作的含义&#xff0c;否则继续下去会很困难。 本质&#xff1a;32位整数的每一位表示一个层 LayerMask本质上是一个32位的整数(Int32 ,int)&#xff0c;每个位代表一个图层&#xff0c;因此LayerMask最多可以表示32个图层&#xff08;0…

Vue3组件间的通信方式

目录 1.props父向子组件通信 2.自定义事件 子向父组件通信 3.全局事件总线 4.v-model组件通信&#xff08;父子组件数据同步&#xff09; 绑定单个数据同步 绑定多个数据同步 5.useAttrs组件通信 6.ref与$parent ref获取子组件实例对象 $parent获取父组件实例对象 7.p…

大采购,助力提升国有企业采购供应链管理水平

2023年7月11日-12日&#xff0c;由中国物流与采购联合会主办、北京筑龙承办的主题为“数智赋能创新发展”的“第四届国有企业数智化采购与智慧供应链论坛”在北京盛大举行。来自中央企业、地方国企采购与供应链部门相关负责人、业界专家、行业媒体代表等齐聚一堂、共襄盛会。北…

HCIP第十二天

题目 拓扑图 sw1、sw2、sw3分别创建VLAN、划分接口&#xff0c;配置干道 VLAN间路由 所有PC通过DHCP获取IP地址 PC1/3可以正常访问PC2/4/5/6

【学会动态规划】解码方法(4)

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…

国内流行的数据可视化软件工具

在信息爆炸的时代&#xff0c;越来越多的数据堆积如山。但是&#xff0c;这些密集的数据没有重点且可读性较差。因此&#xff0c;我们需要数据可视化来帮助数据易于理解和接受。相比之下&#xff0c;可视化更直观、更有意义&#xff0c;使用适当的数据可视化工具来可视化数据非…

C++入门 - 1(几分钟让你快速入门C++)

c入门 1. C关键字(C98)2. 命名空间2.1 命名空间定义2.2 命名空间使用 3. C输入&输出4.缺省参数4.1 缺省参数概念4.2 缺省参数分类 5. 函数重载5.1 函数重载概念5.2 C支持函数重载的原理--名字修饰(name Mangling)提问&#xff1a;C语言中为什么没有函数重载呢&#xff1f; …

常见的网络拓扑结构,你都看懂吗

常见的网络拓扑结构有以下6种&#xff1a;1.总线型网络拓扑结构&#xff1b;2.星型网络拓扑结构&#xff1b;3.环形网络拓扑结构&#xff1b;4.树型网络拓扑结构&#xff1b;5.网状网络拓扑结构&#xff1b;6.混合网络型拓扑结构。其中&#xff0c;“总线型网络拓扑结构”是所有…

Redis学习(三)持久化机制、分布式缓存、多级缓存、Redis实战经验

文章目录 分布式缓存Redis持久化RDB持久化AOF持久化 Redis主从Redis数据同步原理全量同步增量同步 Redis哨兵哨兵的作用和原理sentinel&#xff08;哨兵&#xff09;的三个作用是什么&#xff1f;sentinel如何判断一个Redis实例是否健康&#xff1f;master出现故障后&#xff0…

QT中级(7)- 串口工具

QT中级&#xff08;7&#xff09;- 串口工具 1 串口通信的基础知识2 需要准备的工具3 Qt中的串口编程3.1 引入QSerialPort3.2 设置参数3.3 读取数据3.4 发送数据 4 源码 1 串口通信的基础知识 串行与并行&#xff1a;串口通信是一种串行通信方式。这意味着数据一位一位地通过通…

面试中关于自动化测试的认识

目录 一、什么是自动化测试&#xff0c;自动化测试的优势是什么&#xff1f; 二、什么样的项目比较适合做自动化测试&#xff0c;什么样的不适合做自动化测试&#xff1f; 三、在制定自动化测试计划的时候一般要考虑哪些点&#xff1f; 四、编写自动化脚本时的一些规范&…

02. 第一个Docker部署应用

目录 1、前言 2、Docker部署Nginx 3、修改镜像存储路径 3.1、默认存储路径 3.2、自定义存储路径 3.2.1、创建自定义的镜像存储路径 3.2.2、创建Docker守护进程的配置文件 3.2.3、重启docker服务 3.2.4、重新查看docker路径 4、配置镜像加速 4.1、配置阿里镜像加速器…

Unity 之 安卓平台上架隐私问题解决方案

Unity 之 助力游戏增长 -- 解决隐私问题 一&#xff0c;平台测试隐私问题二&#xff0c;解决方式一2.1 勾选自定义Mainifest2.2 修改自定义Mainifest2.3 隐私协议弹窗逻辑 三&#xff0c;解决方式二3.1 导出安卓工程3.2 创建上层Activity3.3 配置AndroidManifest 四&#xff0…

SOMEIP协议----第一节(概述)

SOMEIP协议 概述 1.什么是SOME/IP? SOME/IP: 如上图所述,连起来就是基于车载以太网技术的面向服务的可扩展中间件 汽车某ECU软件算法如果需要和其他ECU交互,大部分都通过跨ECU之间的服务来实现,即可以通过车载以太网异步调用其他ECU上的服务,应用开发者只需要关注服务…

携带时间戳主动写入数据到prometheus service

使用到的github公开项目 https://github.com/castai/promwrite 拉下来装依赖&#xff0c;然后使用 client_test.go t.Run(“write with custom options”, func(t *testing.T) 这个测试用例里面&#xff0c;删掉srv初始化的部分&#xff0c;这个是模拟一个客户端&#xff0c;直…

MySQL数据备份与恢复

目录 ​编辑 一、数据备份 1.1物理备份 1.1.1冷备份 1.1.2热备份 1.1.3温备份 二、逻辑分区 2.1完全分区 2.2差异分区 2.3增量备份 三、数据备份恢复实验 3.1做一个数据 3.2物理冷备份与恢复 3.3mysqldump 备份与恢复&#xff08;温备份&#xff09; 3.4Mysql数据…