uni-app开发微信小程序的报错[渲染层错误]排查及解决

一、报错信息

[渲染层错误] Framework nner error (expect FLOW INITIALCREATION end but get FLOW CREATE-NODE)

二、原因分析及解决方案

第一种

• 原因：基础库版本的原因导致的。

• 解决：
  1.修改调试基础库版本
  2.详情—>本地设置—>调试基础库，选择了最新的版本
  

第二种

• 原因：分包文件中引入了其他分包的组件
• 解决：
  1.把其他分包的组件重新复制过来一份
  2.把公用的其他分包的组件放到主包里

第三种

• 原因：主包的文件中引入了分包的组件
• 解决：
  1.在app.json中去掉 lazyCodeLoading: ‘requiredComponents’, 这个配置
  2.把公用的其他分包的组件放到主包里

三、问题扩展

1.按需注入

自基础库版本 2.11.1 起，小程序支持通过配置，有选择地注入必要的代码，以降低小程序的启动时间和运行时内存。

“lazyCodeLoading”: “requiredComponents”

• 通常情况下，在小程序启动时，启动页面依赖的所有代码包（主包、分包、插件包、扩展库等）的所有 JS 代码会全部合并注入，包括其他未访问的页面以及未用到自定义组件，同时所有页面和自定义组件的 JS 代码会被立刻执行。这造成很多没有使用的代码在小程序运行环境中注入执行，影响注入耗时和内存占用。

• 启用按需注入后，小程序仅注入当前访问页面所需的自定义组件和页面代码。未访问的页面、当前页面未声明的自定义组件不会被加载和初始化，对应代码文件将不被执行。请开发者修改配置后务必确认小程序的表现正常。

• 启用按需注入后，页面 JSON 配置中定义的所有组件和 app.json 中 usingComponents 配置的全局自定义组件，都会被视为页面的依赖并进行注入和加载。建议开发者及时移除 JSON 中未使用自定义组件的声明，并尽量避免在全局声明使用率低的自定义组件，否则可能会影响按需注入的效果。

2.分包异步化

在小程序中，不同的分包对应不同的下载单元；因此，除了非独立分包可以依赖主包外，分包之间不能互相使用自定义组件或进行 require。

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

一个分包使用其他分包的自定义组件时，由于其他分包还未下载或注入，其他分包的组件处于不可用的状态。通过为其他分包的自定义组件设置 占位组件，我们可以先渲染占位组件作为替代，在分包下载完成后再进行替换。

例如：

// 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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这个配置中，button 和 list 两个自定义组件是跨分包引用组件，其中 button 在渲染时会使用内置组件 view 作为替代，list 会使用当前分包内的自定义组件 simple-list 作为替代进行渲染；在这两个分包下载完成后，占位组件就会被替换为对应的跨分包组件。