

首页  思维导图  详情



小程序分包

2024-09-23 20:42:25   0  举报





仅支持查看

AI智能生成

分包梳理

小程序

模版推荐

作者其他创作

大纲/内容

分包方式

普通分包

说明

将某些特定页面或功能模块分离出来，在用户首次访问这些页面时才会下载对应的分包资源。

依赖主包。从普通分包的页面进入小程序，需要下载主包

使用场景

微信小程序的主包大小限制为 2MB，如果主包体积超过这个限制，必须进行分包处理。

对用户首次加载时的体验流畅有要求的

例如，访问频率不高的页面，可以放到普通分包中

原生小程序配置方法

子主题

访问流程

1.加载主包

用户打开小程序时，微信首先会下载并加载主包（必须的）

2.进入普通分包页面

用户访问普通分包中的某个页面时，才会下载对应的子包资源，主包已经下载的内容不会被重新下载

3.子包加载

子包资源在用户首次访问子包内的页面时下载，之后的访问会直接读取缓存，不再重复下载

开发注意事项

subPackages 的根目录不能是另外一个 subPackages 内的子目录

tabBar 页面必须在主包内<br>

引用原则：只有包加载完成才可以引用，否则会有问题

无特殊配置下【分包异步化】，子包之间不要相互引用资源

子包可以引用主包内的资源

微信客户端 6.6.0，基础库 1.7.3 及以上版本开始支持

独立分包

说明

独立于主包和其他分包运行

不依赖主包。从独立分包中页面进入小程序时，不需要下载主包

使用场景

当某些模块或页面需要通过直接分享链接独立访问，且不依赖于小程序的其他部分时，考虑使用独立分包

配置

开发注意事项

独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用分包异步化时 js 文件、自定义组件、插件不受此条限制）<br>

主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；<br>

App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；<br>

独立分包中暂时不支持使用插件

getApp()

App 生命周期

微信客户端 6.7.2，基础库 2.3.0 及以上版本开始支持

包加载方式

默认加载

不做任何配置，访问页面时，下载对应的子包/主包

分包预加载

说明

通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

使用场景

高访问频率的页面所对应的包，考虑预加载，以提升用户体验

配置

开发注意事项

预下载大小限额 2M

同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验

例如，页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B中最多只能预下载总大小 1.5M 的分包

基础库 2.3.0 开始支持

分包异步化

说明

子包之间不能相互引用资源，「分包异步化」特性将允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制。

配置

跨分包自定义组件引用

跨分包 JS 代码引用

开发注意事项

基础库版本 2.11.2 或以上

 Collect

Get Started

招聘程序

 Collect

Get Started

微信小程序架构图，技术架构图，功能架构，网络部署架构，整体架构，拓展图

 Collect

Get Started

微信小程序初步了解

 Collect

Get Started

星巴克小程序





0 条评论

下一页