每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync 对本地缓存进行读写和清理。
同一个微信用户，同一个微信小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同微信小程序之间也无法互相读写数据。
插件隔离策略
本地缓存的清理时机跟代码包一样，只有在代码包被清理的时候本地缓存才会被清理。
文件系统是微信小程序提供的一套以微信小程序和用户维度隔离的存储以及一套相应的管理接口。通过 wx.getFileSystemManager() 可以获取到全局唯一的文件系统管理器，所有文件系统的管理操作通过 FileSystemManager 来调用。
var fs = wx.getFileSystemManager()
文件主要分为两大类：
其中本地文件又分为三种：
由于代码包文件大小限制，代码包文件适用于放置首次加载时需要的文件，对于内容较大或需要动态替换的文件，不推荐用添加到代码包中，推荐在小游戏启动之后再用下载接口下载到本地。
代码包文件的访问方式是从项目根目录开始写文件路径，不支持相对路径的写法。如：/a/b/c、a/b/c 都是合法的，./a/b/c ../a/b/c 则不合法。
代码包内的文件无法在运行后动态修改或删除，修改代码包文件需要重新发布版本。
本地文件指的是微信小程序被用户添加到手机后，会有一块独立的文件存储区域，以用户维度隔离。即同一台手机，每个微信用户不能访问到其他登录用户的文件，同一个用户不同 appId 之间的文件也不能互相访问。
本地文件的文件路径均为以下格式：
{{协议名}}://文件路径
其中，协议名在 iOS/Android 客户端为
"wxfile"，在开发者工具上为"http"，开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。
本地临时文件只能通过调用特定接口产生，不能直接写入内容。本地临时文件产生后，仅在当前生命周期内保证有效，重启之后不一定可用。如果需要保证在下次启动时无需下载，可通过 FileSystemManager.saveFile() 或 FileSystemManager.copyFile() 接口把本地临时文件转换成本地缓存文件或本地用户文件。
临时文件的清理策略为：微信小程序退出后系统会检查该微信小程序的临时文件占用，若不超过2GB则不进行清理，超过上限则以文件为维度按照最近使用时间从远到近进行清理。同时也会检查所有微信小程序的临时文件占用，若超过6GB则以微信小程序为维度进行清理。
因此，开发者在下载临时文件时，可先通过FileSystemManager.access()检查该文件是否存在，减少重复文件下载，提升用户体验。
wx.chooseImage({
success: function (res) {
var tempFilePaths = res.tempFilePaths // tempFilePaths 的每一项是一个本地临时文件路径
}
})
本地缓存文件只能通过调用特定接口产生，不能直接写入内容。本地缓存文件产生后，重启之后仍可用。本地缓存文件只能通过 FileSystemManager.saveFile() 接口将本地临时文件保存获得。
fs.saveFile({
tempFilePath: '', // 传入一个本地临时文件路径
success(res) {
console.log(res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径
}
})
注意：本地缓存文件是最初的设计，1.7.0 版本开始，提供了功能更完整的本地用户文件，可以完全覆盖本地缓存文件的功能，如果不需要兼容低于 1.7.0 版本，可以不使用本地缓存文件。
本地用户文件是从 1.7.0 版本开始新增的概念。我们提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。
// 在本地用户文件目录下创建一个文件 hello.txt，写入内容 "hello, world"
const fs = wx.getFileSystemManager()
fs.writeFileSync(`${wx.env.USER_DATA_PATH}/hello.txt`, 'hello, world', 'utf8')
| 接口、组件 | 读 | 写 |
|---|---|---|
| 代码包文件 | 有 | 无 |
| 本地临时文件 | 有 | 无 |
| 本地缓存文件 | 有 | 无 |
| 本地用户文件 | 有 | 有 |
canvas 组件 提供了绘制界面，可以在之上进行任意绘制
<!-- 2d 类型的 canvas -->
<canvas id="myCanvas" type="2d" style="border: 1px solid; width: 300px; height: 150px;" />
首先需要在 WXML 中添加 canvas 组件。
指定 id="myCanvas" 唯一标识一个 canvas，用于后续获取 Canvas 对象。
指定 type 用于定义画布类型，本例子使用 type="2d" 示例。
this.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext('2d')
})
通过 SelectorQuery 选择上一步的 canvas，可以获取到 Canvas 对象。
再通过 Canvas.getContext，我们可以获取到 渲染上下文 RenderingContext。
后续的画布操作与渲染操作，都需要通过这两个对象来实现。
this.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext('2d')
// Canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
})
canvas 的宽高分为渲染宽高和逻辑宽高：
300 * 150。不同的设备上，存在物理像素和逻辑像素不相等的情况，所以一般我们需要用 wx.getWindowInfo 获取设备的像素比，乘上 canvas 的渲染大小，作为画布的逻辑大小。
在开发者工具中预览效果
// 省略上面初始化步骤，已经获取到 canvas 对象和 ctx 渲染上下文
// 清空画布
ctx.clearRect(0, 0, width, height)
// 绘制红色正方形
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
// 绘制蓝色半透明正方形
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
通过 渲染上下文 上的绘图 api，我们可以在画布上进行任意的绘制。
在开发者工具中预览效果
// 省略上面初始化步骤，已经获取到 canvas 对象和 ctx 渲染上下文
// 图片对象
const image = canvas.createImage()
// 图片加载完成回调
image.onload = () => {
// 将图片绘制到 canvas 上
ctx.drawImage(image, 0, 0)
}
// 设置图片src
image.src = 'https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png'
通过 Canvas.createImage 我们可以创建图片对象并加载图片。当图片加载完成触发 onload 回调之后，使用 ctx.drawImage 即可将图片绘制到 canvas 上。
在开发者工具中预览效果
// 省略上面初始化步骤，已经获取到 canvas 对象和 ctx 渲染上下文
// 绘制红色正方形
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
// 绘制蓝色半透明正方形
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
// 生成图片
wx.canvasToTempFilePath({
canvas,
success: res => {
// 生成的图片临时文件路径
const tempFilePath = res.tempFilePath
},
})
通过 wx.canvasToTempFilePath 接口，可以将 canvas 上的内容生成图片临时文件。
在开发者工具中预览效果
// 省略上面初始化步骤，已经获取到 canvas 对象和 ctx 渲染上下文
const startTime = Date.now()
// 帧渲染回调
const draw = () => {
const time = Date.now()
// 计算经过的时间
const elapsed = time - startTime
// 计算动画位置
const n = Math.floor(elapsed / 3000)
const m = elapsed % 3000
const dx = (n % 2 ? 0 : 1) + (n % 2 ? 1 : -1) * (m < 2500 ? easeOutBounce(m / 2500) : 1)
const x = (width - 50) * dx
// 渲染
ctx.clearRect(0, 0, width, height)
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(x, height / 2 - 25, 50, 50);
// 注册下一帧渲染
canvas.requestAnimationFrame(draw)
}
draw()
通过 Canvas.requestAnimationFrame 可以注册动画帧回调，在回调内进行动画的逐帧绘制。
通过 wx.loadFontFace 可以为 Canvas 加载自定义字体。
在开发者工具中预览效果
通过 MediaRecorder 可以将 Canvas 内容录制为视频并保存。
在开发者工具中预览效果
在开发者工具中预览效果
<canvas type="webgl" id="myCanvas" />
// 省略上面初始化步骤，已经获取到 canvas 对象
const gl = canvas.getContext('webgl') // 获取 webgl 渲染上下文
微信小程序的 旧版 canvas 接口 已经不再维护，本指南将指引如何迁移至新版 Canvas 2D 接口。
| 旧版 canvas 接口 | Canvas 2D 接口 | |
|---|---|---|
| 同层渲染 | 不支持 | 支持 |
| api支持 | 部分支持 | 支持全部 Web 标准 |
| 绘制 | 异步绘制 | 同步绘制 |
| 性能 | 低 | 高 |
<canvas canvas-id="myCanvas" />
<!-- 修改为以下 -->
<canvas id="myCanvas" type="2d" />
旧版 canvas 接口使用 canvas-id 属性唯一标识 canvas；新版 Canvas 2D 可直接使用 id 标识。
另外需要给 canvas 添加 type="2d" 属性标识为新版 Canvas 2D 接口。
const context = wx.createCanvasContext('myCanvas')
//
// 修改为以下
//
this.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.node(({ node: canvas }) => {
const context = canvas.getContext('2d')
})
.exec()
旧版 canvas 接口使用 wx.createCanvasContext 同步获取 CanvasContext。
新版 Canvas 2D 接口需要先通过 SelectorQuery 异步获取 Canvas 对象，再通过 Canvas.getContext 获取渲染上下文 RenderingContext。
// 旧版 canvas 不能修改宽高
this.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// Canvas 画布的实际绘制宽高
const renderWidth = res[0].width
const renderHeight = res[0].height
// Canvas 绘制上下文
const ctx = canvas.getContext('2d')
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = renderWidth * dpr
canvas.height = renderHeight * dpr
ctx.scale(dpr, dpr)
})
旧版 canvas 接口的画布大小是根据实际渲染宽度决定的，开发者无法修改。
新版 Canvas 2D 接口允许开发者自由修改画布的逻辑大小，默认宽高为 300*150。
不同的设备上，存在物理像素和逻辑像素不相等的情况，所以一般我们需要用 wx.getWindowInfo 获取设备的像素比，乘上 canvas 的实际大小。
// 若干绘制调用
context.fillRect(0, 0, 50, 50)
context.fillRect(20, 20, 50, 50)
context.draw(false, () => {
// 这里绘制完成
console.log('draw done')
})
//
// 修改为以下
//
// 绘制前清空画布
context.clearRect(0, 0, canvas.width, canvas.height)
// 若干绘制调用
context.fillRect(0, 0, 50, 50)
context.fillRect(20, 20, 50, 50)
// 这里绘制完成
console.log('draw done')
旧版 canvas 接口绘制需要调用 CanvasContext.draw 才会进行绘制，并且绘制过程是异步的，需要等待绘制完成回调才能进行下一步操作。
新版 Canvas 2D 接口不再需要调用 draw 函数，所有绘制方法都会同步绘制到画布上。
需要注意的是 CanvasContext.draw 函数第一个参数控制在绘制前是否保留上一次绘制（默认值为 false，即不保留），若设置为 false，则迁移至新接口后，需要在绘制前通过 clearRect 清空画布。
context.drawImage(
'https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png',
0,
0,
150,
100,
)
//
// 修改为以下
//
const image = canvas.createImage()
image.onload = () => {
context.drawImage(
image,
0,
0,
150,
100,
)
}
image.src = 'https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png'
旧版 canvas 接口 CanvasContext.drawImage 直接传入图片 url 进行绘制。
新版 Canvas 2D 接口需要先通过 Canvas.createImage 创建图片对象，onload 图片加载完成回调触发后，再将图片对象传入 context.drawImage 进行绘制。
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success(res) {
//
}
})
//
// 修改为以下
//
wx.canvasToTempFilePath({
canvas: canvas,
success(res) {
//
}
})
旧版 canvas 接口传入 canvas-id。
新版 Canvas 2D 接口需要直接传入 Canvas 实例
wx.canvasPutImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 1,
height: 1,
data: data,
success (res) {
// after put image data
}
})
//
// 修改为以下
//
const context = canvas.getContext('2d')
context.putImageData(data, 0, 0, 0, 0, 1, 1)
// after put image data
新版 canvas 不支持 wx.canvasPutImageData，应使用 context.putImageData 代替。
wx.canvasGetImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 100,
height: 100,
success(res) {
console.log(res.width) // 100
console.log(res.height) // 100
console.log(res.data instanceof Uint8ClampedArray) // true
console.log(res.data.length) // 100 * 100 * 4
}
})
//
// 修改为以下
//
const context = canvas.getContext('2d')
const imageData = context.getImageData(0, 0, 100, 100)
console.log(imageData.width) // 100
console.log(imageData.height) // 100
console.log(imageData.data instanceof Uint8ClampedArray) // true
console.log(imageData.data.length) // 100 * 100 * 4
新版 canvas 不支持 wx.canvasGetImageData，应使用 context.getImageData 代替。
wx.loadFontFace({
family: 'Bitstream Vera Serif Bold',
source: 'url("https://sungd.github.io/Pacifico.ttf")',
success: console.log
})
//
// 修改为以下
//
wx.loadFontFace({
family: 'Bitstream Vera Serif Bold',
source: 'url("https://sungd.github.io/Pacifico.ttf")',
scopes: ['webview', 'native'],
success: console.log
})
新版 Canvas 2D 接口需要为 scopes 设置 native。
微信客户端 6.6.0，基础库 1.7.3 及以上版本开始支持。开发者工具请使用 1.01.1712150 及以上版本，可点此下载。
某些情况下，开发者需要将微信小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
在构建微信小程序分包项目时，构建会输出一个或多个分包。每个使用分包的微信小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到的公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。
在微信小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。
目前微信小程序分包大小有以下限制：
对微信小程序进行分包，可以优化微信小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。
具体使用方法请参考：
假设支持分包的微信小程序目录结构如下：
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
开发者通过在 app.json 的 subPackages 字段中声明微信小程序的项目分包结构：
写成
subpackages也是支持的。
{
"pages":[
"pages/index",
"pages/logs"
],
"subPackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
],
"entry": "index.js"
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
在 subPackages 中，每个分包的配置包含以下几项：
| 字段 | 类型 | 说明 |
|---|---|---|
| root | String | 分包根目录 |
| name | String | 分包别名，在分包预下载时可以使用 |
| pages | StringArray | 分包页面路径，相对于分包根目录 |
| independent | Boolean | 分包是否是独立分包 |
| entry | String | 分包入口文件 |
subPackages 后，会按照 subPackages 配置的路径进行打包，subPackages 配置路径之外的目录会被打包到主包中subPackages 的根目录不能是另一个 subPackages 内的子目录tabBar 页面必须在主包内packageA 无法引用 packageB 的 JS 文件，但可以引用主包和 packageA 内的 JS 文件；使用分包异步化时不受此限制packageA 无法导入 packageB 的 template，但可以引用主包和 packageA 内的 templatepackageA 无法使用 packageB 的资源，但可以使用主包和 packageA 内的资源每个分包的配置中，entry 字段可以指定该分包中的任意一个 JS 文件作为入口文件，这个文件会在分包注入时首先被执行。
指定的 JS 文件应该填写相对于分包根目录的路径，例如需要指定 /path/to/subPackage/src/index.js 作为分包 /path/to/subPackage 的入口文件时，应填写 src/index.js。
调试这个功能需要 1.06.2406242 或以上版本的微信开发者工具，正式环境没有版本要求。
在开发者工具中预览效果
下载 微信小程序示例（分包加载版）源码
微信客户端 6.7.2，基础库 2.3.0 及以上版本开始支持。开发者工具请使用 1.02.1808300 及以上版本，可 点此下载。
独立分包是微信小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入微信小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。
开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当微信小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。
一个微信小程序中可以有多个独立分包。
小游戏在基础库 v2.12.2 开始支持独立分包，详见 小游戏独立分包指南。
假设微信小程序目录结构如下：
├── app.js
├── app.json
├── app.wxss
├── moduleA
│ └── pages
│ ├── rabbit
│ └── squirrel
├── moduleB
│ └── pages
│ ├── pear
│ └── pineapple
├── pages
│ ├── index
│ └── logs
└── utils
开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。
{
"pages": [
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "moduleA",
"pages": [
"pages/rabbit",
"pages/squirrel"
]
}, {
"root": "moduleB",
"pages": [
"pages/pear",
"pages/pineapple"
],
"independent": true
}
]
}
独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。
此外，使用独立分包时要注意：
app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；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({
data: 123,
other: 'hello'
})
console.log(getApp()) // {global: {}, data: 456, other: 'hello'}
App 生命周期当从独立分包启动微信小程序时，主包中 App 的 onLaunch 和首次 onShow 会在从独立分包页面首次进入主包或其他普通分包页面时调用。
由于独立分包中无法定义 App，微信小程序生命周期的监听可以使用 wx.onAppShow，wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError，wx.onPageNotFound 监听。
在低于 6.7.2 版本的微信中运行时，独立分包视为普通分包处理，不具备独立运行的特性。
注意：在兼容模式下，主包中的 app.wxss 可能会对独立分包中的页面产生影响，因此应避免在独立分包页面中使用 app.wxss 中的样式。
基础库 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 是进入此页面的预下载配置，每个配置有以下几项：
| 字段 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| packages | StringArray | 是 | 无 | 进入页面后预下载分包的 root 或 name。__APP__ 表示主包。 |
| network | String | 否 | wifi | 在指定网络下预下载，可选值为：all: 不限网络 wifi: 仅wifi下预下载 |
同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。
如，页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B中最多只能预下载总大小 1.5M 的分包。
在微信小程序中，不同的分包对应不同的下载单元；因此，除了非独立分包可以依赖主包外，分包之间不能互相使用自定义组件或进行 require。「分包异步化」特性将允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制。
在开发者工具中预览效果
该特性需要基础库版本 2.11.2 或以上，使用该特性的微信小程序在 2.11.2 以下的基础库上可能无法工作，如果发布正式版本，可以考虑将最低基础库版本设置为 2.11.2 或以上。
一个分包使用其他分包的自定义组件时，由于其他分包还未下载或注入，其他分包的组件处于不可用的状态。通过为其他分包的自定义组件设置 占位组件，我们可以先渲染占位组件作为替代，在分包下载完成后再进行替换。例如：
// subPackageA/pages/index.json
{
"usingComponents": {
"button": "../../commonPackage/components/button",
"list": "../../subPackageB/components/full-list",
"simple-list": "../components/simple-list",
"plugin-comp": "plugin://pluginInSubPackageB/comp"
},
"componentPlaceholder": {
"button": "view",
"list": "simple-list",
"plugin-comp": "view"
}
}
在这个配置中，button 和 list 两个自定义组件是跨分包引用组件，其中 button 在渲染时会使用内置组件 view 作为替代，list 会使用当前分包内的自定义组件 simple-list 作为替代进行渲染；在这两个分包下载完成后，占位组件就会被替换为对应的跨分包组件。
在基础库 2.24.3 之后，可以使用 wx.onLazyLoadError 监听加载事件。
一个分包中的代码引用其它分包的代码时，为了不让下载阻塞代码运行，我们需要异步获取引用的结果。如：
// subPackageA/index.js
// 使用回调函数风格的调用
require('../subPackageB/utils.js', utils => {
console.log(utils.whoami) // Wechat MiniProgram
}, ({mod, errMsg}) => {
console.error(`path: ${mod}, ${errMsg}`)
})
// 或者使用 Promise 风格的调用
require.async('../commonPackage/index.js').then(pkg => {
pkg.getPackageName() // 'common'
}).catch(({mod, errMsg}) => {
console.error(`path: ${mod}, ${errMsg}`)
})
在其它分包中的插件也可以通过类似的方法调用：
// 使用回调函数风格的调用
requirePlugin('live-player-plugin', livePlayer => {
console.log(livePlayer.getPluginVersion())
}, ({mod, errMsg}) => {
console.error(`path: ${mod}, ${errMsg}`)
})
// 或者使用 Promise 风格的调用
requirePlugin.async('live-player-plugin').then(livePlayer => {
console.log(livePlayer.getPluginVersion())
}).catch(({mod, errMsg}) => {
console.error(`path: ${mod}, ${errMsg}`)
})
详情可参考 require 文档
在微信小程序启动的过程中，除了代码包下载以外，代码注入也是一个主要的耗时环节。注入代码量的大小与内存占用与注入耗时正相关。
利用「按需注入」和「用时注入」的特性，可以优化代码注入环节的耗时和内存占用。
基础库 2.11.1 及以上版本支持，2.11.1 以下兼容但无优化效果。 工具调试请使用 1.05.2111300 及以上版本，基础库选 2.20.1 及以上版本。
通常情况下，在微信小程序启动时，启动页面依赖的所有代码包（主包、分包、插件包、扩展库等）的所有 JS 代码会全部合并注入，包括其他未访问的页面以及未用到自定义组件，同时所有页面和自定义组件的 JS 代码会被立刻执行。这造成很多没有使用的代码在微信小程序运行环境中注入执行，影响注入耗时和内存占用。
自基础库版本 2.11.1 起，微信小程序支持通过配置，有选择地注入必要的代码，以降低微信小程序的启动时间和运行时内存。
{
"lazyCodeLoading": "requiredComponents"
}
app.json 中 usingComponents 配置的全局自定义组件，都会被视为页面的依赖并进行注入和加载。建议开发者及时移除 JSON 中未使用自定义组件的声明，并尽量避免在全局声明使用率低的自定义组件，否则可能会影响按需注入的效果。基础库 2.11.2 及以上版本支持，2.11.2 以下和未配置的效果相同。 工具调试请使用 1.05.2111300 及以上版本，基础库选 2.20.1 及以上版本。
在开启「按需注入」特性的前提下，「用时注入」可以指定一部分自定义组件不在微信小程序启动时注入，而是在真正渲染的时候才进行注入。
在已经指定 lazyCodeLoading 为 requiredComponents 的情况下，为自定义组件配置 占位组件，组件就会自动被视为用时注入组件：