javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 微信小程序分包流程

微信小程序分包流程步骤超详细讲解

作者:Brod_Roy

分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载,下面这篇文章主要给大家介绍了关于微信小程序分包流程步骤的相关资料,需要的朋友可以参考下

本文基于微信小程序的官方文档,对分包的概念以及具体的操作流程进行讲解。

一、为什么要使用分包?

主要原因就是微信小程序规定了主包大小不能超过 2M ,但我们随着开发的更新迭代,一个小程序往往是大于 2M 的。于是小程序提供了分包的解决方法,将一个完整的的小程序,在打包时分成不同功能或需求的分包,在用户使用时再加载对应的分包。

主包:使用分包后必须有一个主包,用于存放 TabBar 页面,以及一些公共的资源文件和JS脚本。

分包:从主包上拆分而来的文件,个人建议的的拆分方式:先根据 TabBar 页面拆分大的模块,再拆分每个 TabBar内具体的小功能模块,这样拆分管理起来也更加清晰明了。

目前小程序分包大小有以下限制:

二、使用分包

1、基本配置

我们先看看官方给出的目录结构和 app.josn 的配置:

2、demo 案例分析

下载 小程序示例(分包加载版)源码

为了看起来更清晰,我删除了部分重复文件,但保留了 demo 本身的目录结构。看 demo 不难看出无论是分包还是主包,都是放在 page 这个文件夹下面的,这说明分包所在位置并没有严格的要求,可以根据自身的需求配置路径放置。

此外我们还需要注意到,主包和分包的默认路径是从根目录开始的,分包的路径是以 root 内的设置的路径为起始。

3、打包原则

4、引用原则

省流:除了分包异步化可以请求不同包的 JS 文件,其他情况下的分包都只能访问自身的和主包的文件。

5、低版本兼容

由微信后台编译来处理旧版本客户端的兼容,后台会编译两份代码包,一份是分包后代码,另外一份是整包的兼容代码。 新客户端用分包,老客户端还是用的整包,完整包会把各个 subpackage 里面的路径放到 pages 中。

三、独立分包

版本支持:微信客户端 6.7.2,基础库 2.3.0 及以上版本开始支持。开发者工具请使用 1.02.1808300 及以上版本,可 点此下载

独立分包顾名思义就是可以独立于主包和其他分包运行的一种特殊分包。从独立分包页面进入小程序时无需下载主包,当用户进入普通分包或主包页面的时候才会下载主包资源。

我们在开发时,可以选择一些从公众号进入的页面,或是调用webview的页面配置到我们的独立分包。因为不用下载主包,可以很大程度上提高独立分包页面的启动速度。

一个小程序中可以有多个独立分包。

1、开启独立分包

开发者通过在app.jsonsubpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

{
  "root": "moduleB",
  "pages": [
    "pages/pear",
    "pages/pineapple"
  ],
  "independent": true
}

2、限制

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。

此外,使用独立分包时要注意:

3、注意事项

(1)关于 getApp()

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

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

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

示例代码:

const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}
App({
  data: 123,
  other: 'hello'
})
console.log(getApp()) // {global: {}, data: 456, other: 'hello'}

作为独立分包不依赖主包的情况下,默认独立分包为传参方,使用 getApp({allowDefault: true}) 方法后若打开主包,则会更新至 App 中。主包打开后便可以使用 getApp() 获取数据。

(2)关于 App 生命周期

从独立分包启动小程序时不会触发主包中的 App 的onLaunch 和首次 onShow ,直到用户第一次从独立分包的页面进入主包或其他分包页面的时候才会调用。

由于独立分包中无法定义 App,所以无法使用正常页面中的 onLoad 或是 onShow 等生命周期。独立分包想要实现小程序生命周期的监听可以使用 wx.onAppShowwx.onAppHide 完成。App 上的其他事件可以使用 wx.onErrorwx.onPageNotFound 监听。

4、低版本兼容

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

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

ase/app/app-event/wx.onPageNotFound.html) 监听。

4、低版本兼容

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

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

简单来说就是别样式重名🤣。

总结 

到此这篇关于微信小程序分包流程步骤的文章就介绍到这了,更多相关微信小程序分包流程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文