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

微信小程序开发6

一、分包-基础概念

1.1、什么是分包

分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。

1.2、分包的好处

 对小程序进行分包的好处主要有以下两点:
可以优化小程序首次启动的下载时间
在多团队共同开发时可以更好的解耦协作

1.3、分包前项目的构成

 分包前,小程序项目中所有的页面和资源都被打包到了一起,导致整个项目体积过大,影响小程序首次启动的下载时间

1.4、分包后项目的构成

分包后,小程序项目由1个主包+多个分包组成:
主包:一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源
分包:只包含和当前分包有关的页面和私有资源

1.5、分包的加载规则

在小程序启动时,默认会下载主包并启动主包内页面,tabBar页面需要放到主包中。
当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示,非tabBar页面可以按照功能的不同,划分为不同的分包之后,进行按需下载。

1.6、分包的体积限制

目前,小程序分包的大小有以下两个限制:
整个小程序所有分包大小不超过16M(主包+所有分包)
单个分包/主包大小不能超过2M

二、分包-使用分包

2.1、配置方法

小程序的目录结构
app.js  app.json  app.wxss  pages(主包的所有页面)  packageA(第一个分包)        packageA(第二个分包)  utilsindex  logs           pages(分包的所有页面)      pagescat  dog                 apple  banana
在app.json的subpackages节点中声明分包的结构
{"pages":[   // 主包的所有页面"pages/index","pages/logs"],"subpackages":[ // 通过subpackages节点,声明分包的结构{"root":"packageA",  // 第一个分包的根目录"pages":[   // 当前分包下,所有页面的相对存放路径"pages/cat","pages/dog"]},{"root":"packageB",  // 第二个分包的根目录"name":"pack2", // 分包的别名"pages":[   // 当前分包下,所有页面的相对存放路径"pages/apple","pages/banana"]},]
}

2.2、打包原则

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

2.3、引用原则

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

三、分包-独立分包

3.1、什么是独立分包

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

3.2、独立分包和普通分包的区别

最主要的区别:是否依赖于主包才能运行
普通分包必须依赖于主包才能运行
独立分包可以在不下载主包的情况下,独立运行

3.3、独立分包的应用场景

开发者可以按需,将某些具有一定功能性的页面配置到独立分包中,原因如下:
当小程序从普通的分包页面启动时,需要首先下载主包
而独立分包不依赖于主包即可运行,可以很大程度上提升分包页面的启动速度
注意:一个小程序中可以有多个独立分包

3.4、独立分包的配置方法

小程序的目录结构
app.js  app.json  app.wxss  pages(主包的所有页面)  moduleA(普通分包)  muduleB(独立分包)  urilsindex  logs         pages           pagesrabbit  squirrel  pear  pineapple
通过independent声明独立分包
{"pages":["pages/index","pages/logs"],"subpackages":[{"root":"moduleA",   // moduleA为普通分包"pages":["pages/rabbit","pages/squirrel"]},{"root":"moduleB","pages":["pages/pear","pages/pineapple"],"independent":true  // 通过此节点,声明当前moduleB分包为”独立分包“}]
}

3.5、引用原则

独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源,例如:
1 主包无法引用独立分包内的私有资源
2 独立分包之间,不能相互引用私有资源
3 独立分包和普通分包之间,不能相互引用私有资源
4 特别注意:独立分包中不能引用主包内的公共资源

四、分包-分包预下载

4.1、什么是分包预下载

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

4.2、配置分包的预下载

预下载分包的行为,会在进入指定的页面时触发,在app.json中,使用preloadRule节点定义分包的预下载
规则,示例代码如下:
{"preloadRule":{ // 分包预下载的规则"pages/contact/contact":{   // 触发分包预下载的页面路径// network表示在指定的网络模式下进行预下载// 可选值为:all(不限网络)和wifi(仅wifi模式下进行预下载)// 默认值为:wifi"network":"all",// packages表示进入页面后,预下载哪些分包// 可以通过root和name指定预下载哪些分包"packages":["pkgA"]}}
}

4.3、分包预下载的限制

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

相关文章:

微信小程序开发6

一、分包-基础概念 1.1、什么是分包 分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。 1.2、分包的好处 对小程序进行分包的好处主要有以下两点: 可以优化小程序…...

JS 根据身份证号获取年龄、性别、出生日期

先说一代身份证和二代身份证的区别: 1.编号位数不同,第一代身份证为15位号码,第二代证是18位号码 2.编码规则不同,第一代身份证在前6位号码后没有完整出生年份,而二代的有完整的出生年份,一代身份证将年份前二位省略…...

Python+Mongo+LSTM(GTP生成)

下面是一个简单的示例来展示如何使用Python和MongoDB来生成LSTM预测算法。 首先,我们需要安装pymongo和tensorflow库,可以使用以下命令进行安装: pip install pymongo tensorflow接下来,我们连接到MongoDB数据库并获取需要进行预…...

关于idea如何成功运行web项目

导入项目 如图 依次选择 file - new - Project from Existing Sources 选择存放的项目目录地址 如图 导入完成 点击ok 如图 依次选择 Create project from existing sources 点击next如图 ,此处默认即可 点击 next如图 点击next有该提示 是因为之前导入过…...

python读取json文件

import json# 文件路径(同目录文件名即可,不同目录需要绝对路径) path 1.json# 读取JSON文件 with open(path, r, encodingutf-8) as file:data json.load(file)#data为字典 print(data) print(type(data))...

迁移学习、微调、计算机视觉理论(第十一次组会ppt)

@TOC 数据增广 迁移学习 微调 目标检测和边界框 区域卷积神经网络R—CNN...

特殊矩阵的压缩存储

1 数组的存储结构 1.1 一维数组 各数组元素大小相同,且物理上连续存放。第i个元素的地址位置是:a[i] LOC i*sizeof(ElemType) (LOC为起始地址) 1.2 二维数组 对于多维数组有行优先、列优先的存储方法 行优先:先行后列,先存储…...

【网络原理】 (1) (应用层 传输层 UDP协议 TCP协议 TCP协议段格式 TCP内部工作机制 确认应答 超时重传 连接管理)

文章目录 应用层传输层UDP协议TCP协议TCP协议段格式TCP内部工作机制确认应答超时重传 网络原理部分我们主要学习TCP/IP协议栈这里的关键协议(TCP 和 IP),按照四层分别介绍.(物理层,我们不涉及). 应用层 我们需要学会自定义一个应用层协议. 自定义协议的原因? 当前的软件(应用…...

【SQL语句】

目录 一、SQL语句类型 1.DDL 2.DML 3.DLL 4.DQL 二、数据库操作 1.查看 2.创建 2.1 默认字符集 2.2 指定字符集 3.进入 4.删除 5.更改 5.1 库名称 5.2 字符集 三、数据表操作 1.数据类型 1.1 数值类型(常见,下同) 1.1.1 T…...

自动驾驶和机器人学习和总结专栏汇总

汇总如下: 一. 器件选型心得(系统设计)--1_goldqiu的博客-CSDN博客 一. 器件选型心得(系统设计)--2_goldqiu的博客-CSDN博客 二. 多传感器时间同步方案(时序闭环)--1 三. 多传感器标定方案&…...

【C++初阶】C++基础(下)——引用、内联函数、auto关键字、基于范围的for循环、指针空值nullptr

目录 1. 引用 1.1 引用概念 1.2 引用特性 1.3 常引用 1.4 使用场景 1.5 传值、传引用效率比较 1.6 引用和指针的区别 2. 内联函数 2.1 概念 2.2 特性 3.auto关键字(C11) 3.1 类型别名思考 3.2 auto简介 3.3 auto的使用细则 3.4 auto不能推…...

OSI 7层模型 TCPIP四层模型

》Ref: 1. 这个写的嘎嘎好,解释了为啥4层7层5层,还有数据包封装的问题:数据包在网络中的传输过程详解_数据包传输_张孟浩_jay的博客-CSDN博客 2. HTTP协议 与 TCP协议 的区别,作为web程序员必须要懂 - 知乎 (zhihu.com) 3. 数据…...

iOS-持久化

目的 1.快速展示,提升体验 已经加载过的数据,用户下次查看时,不需要再次从网络(磁盘)加载,直接展示给用户 2.节省用户流量(节省服务器资源) 对于较大的资源数据进行缓存&#xf…...

PC音频框架学习

1.整体链路 下行播放: App下发音源→CPU Audio Engine 信号处理→DSP数字信号处理→Codec DAC→PA→SPK 上行录音: MIC拾音→集成运放→Codec ADC→DSP数字信号处理→CPU Audio Engine 信号处理→App 2.硬件 CPU PCH DSP(可选) Codec PA SPKbox MIC…...

机器学习:提取问题答案

模型BERT 任务:提取问题和答案 问题的起始位置和结束位置。 数据集 数据集 DRCDODSQA 先分词,然后tokenize 文章长度是不同的,bert的token的长度有限制,一般是512, self-attention的计算量是 O ( n 2 ) O(n^2) O(n…...

【Ansible】

目录 一、Ansible简介二、ansible 环境安装部署1、管理端安装 ansible 三、ansible 命令行模块(重点)1.command 模块2.shell 模块3、cron 模块4.user 模块5.group 模块6.copy 模块(重…...

分布式版本控制系统git详解

git 是目前世界上最先进的分布式版本控制系统 补充说明 git命令 很多人都知道,Linus在1991年创建了开源的Linux,从此,Linux系统不断发展,已经成为最大的服务器系统软件了。 Linus虽然创建了Linux,但Linux的壮大是靠…...

如何使用Python进行数据挖掘?

使用Python进行数据挖掘需要掌握以下几个关键步骤: 数据收集:首先,你需要获取你要进行数据挖掘的数据。可以从公共数据集、API、数据库等各种来源收集数据。 数据清洗:清洗数据是一个重要的步骤,它包括去除重复数据、…...

若依-前台无法正常启动,npm run dev失败

问题场景: 使用若依Vue前端分离版-基于SpringBoot的权限管理系统进行实战。 问题描述与解决 拉取若依项目后,根据官方开发文档(项目readme文档)进行依赖下载安装后,启动失败。 出现以下几个问题: 运行n…...

Spring之IoC源码分析及设计思想(一)——BeanFactory

关于Spring的IOC Spring 是一个开源的 Java 平台,它提供了一种简化应用程序开发的框架。它是一个分层的框架,包括两个主要的内核:控制反转(IOC)和面向切面编程(AOP)。IOC 允许应用程序将组件之…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...