小白教程

 找回密码
 立即注册

微信小程序 分包加载

发布者: 小白教程



注意事项

(1)关于 getApp()

与普通分包不同,独立分包运行时,App 并不一定被注册,因此 getApp() 也不一定可以获得 App 对象:

  • 当用户从独立分包页面启动小程序时,主包不存在,App也不存在,此时调用 getApp() 获取到的是 undefined。 当用户进入普通分包或主包内页面时,主包才会被下载,App 才会被注册。
  • 当用户是从普通分包或主包内页面跳转到独立分包页面时,主包已经存在,此时调用 getApp() 可以获取到真正的 App。

由于这一限制,开发者无法通过 App 对象实现独立分包和小程序其他部分的全局变量共享。

为了在独立分包中满足这一需求,基础库 2.2.4 版本开始 getApp支持 [allowDefault]参数,在 App 未定义时返回一个默认实现。当主包加载,App 被注册时,默认实现中定义的属性会被覆盖合并到真正的 App 中。

示例代码:

  • 独立分包中
const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}
  • app.js 中
App({
  data: 123,
  other: 'hello'
})

console.log(getApp()) // {global: {}, data: 456, other: 'hello'}

(2)关于 App 生命周期

当从独立分包启动小程序时,主包中 App 的 onLaunch 和首次 onShow 会在从独立分包页面首次进入主包或其他普通分包页面时调用。

由于独立分包中无法定义 App,小程序生命周期的监听可以使用 wx.onAppShow,wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError,wx.onPageNotFound 监听。

低版本兼容

在低于6.7.2版本的微信中运行时,独立分包视为普通分包处理,不具备独立运行的特性。

注意:在兼容模式下,主包中的 app.wxss 可能会对独立分包中的页面产生影响,因此应避免在独立分包页面中使用 app.wxss 中的样式。



3、分包预下载

基础库 2.3.0 开始支持,低版本需做兼容处理。 开发者工具请使用 1.02.1808300 及以上版本,可点此下载

开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。对于独立分包,也可以预下载主包。

分包预下载目前只支持通过配置方式使用,暂不支持通过调用API完成。

vConsole 里有preloadSubpackages开头的日志信息,可以用来验证预下载的情况。

配置方法

预下载分包行为在进入某个页面时触发,通过在 app.json 增加 preloadRule 配置来控制。

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:

字段类型必填默认值说明
packagesStringArray进入页面后预下载分包的 root 或 name__APP__ 表示主包。
networkStringwifi在指定网络下预下载,可选值为:
all: 不限网络
wifi: 仅wifi下预下载

限制

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

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

12
微信小程序教程
  1. 微信小程序 小程序简介

  2. 微信小程序 开始

  3. 小程序代码构成

  4. 小程序宿主环境

  5. 小程序协同工作和发布

  6. 配置小程序

  7. sitemap配置

  8. 微信小程序 场景值

  9. 微信小程序 注册小程序

  10. 微信小程序 注册页面

  11. 微信小程序 页面生命周期

  12. 微信小程序 页面路由

  13. 微信小程序 模块化

  14. 微信小程序 API

  15. 微信小程序 WXML

  16. 微信小程序 WXSS

  17. 微信小程序 WXS

  18. 微信小程序 事件系统

  19. 微信小程序 简单双向绑定

  20. 微信小程序 基础组件

  21. 微信小程序 获取界面上的节点信息

  22. 微信小程序 响应显示区域变化

  23. 微信小程序 动画

  24. 微信小程序 初始渲染缓存

  25. 微信小程序 运行环境

  26. 微信小程序 JavaScript支持情况

  27. 微信小程序 运行机制

  28. 微信小程序 更新机制

  29. 微信小程序 组件模板和样式

  30. 微信小程序 Component构造器

  31. 微信小程序 组件间通信与时间

  32. 微信小程序 组件生命周期

  33. 微信小程序 behaviors

  34. 微信小程序 组件间关系

  35. 微信小程序 数据监听器

  36. 微信小程序 纯数据字段

  37. 微信小程序 抽象节点

  38. 微信小程序 自定义组件扩展

  39. 微信小程序 开发第三方自定义组件

  40. 微信小程序 单元测试

  41. 微信小程序 开发插件

  42. 微信小程序 使用插件

  43. 微信小程序 插件调用API的限制

  44. 微信小程序 插件功能页

  45. 微信小程序 网络

  46. 微信小程序 文件系统

  47. 微信小程序 画布

  48. 微信小程序 分包加载

  49. 微信小程序 多线程Worker

  50. 微信小程序 服务端能力

  51. 微信小程序 自定义tabBar

  52. 微信小程序 周期性更新

  53. 微信小程序 数据预拉取

  54. 微信小程序 DarkMode适配指南

  55. 微信小程序 大屏适配指南

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2024-11-24 14:32 , Processed in 0.020751 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

返回顶部