微信小程序 佔位組件

基礎庫 2.17.3 及以上版本支持，2.17.3 如下和未配置的效果相同

在使用如 分包異步化 或 用時注入 等特性時，自定義組件所引用的其餘自定義組件，在剛開始進行渲染時可能處於不可用的狀態。此時，爲了使渲染過程不被阻塞，不可用的自定義組件須要一個 「佔位組件」（Component placeholder）。基礎庫會用佔位組件替代不可用組件進行渲染，在該組件可用後再將佔位組件替換回該組件。

一個自定義組件的佔位組件能夠是另外一個自定義組件、或一個內置組件。

配置

頁面或自定義組件對應的 JSON 配置中的 componentPlaceholder 字段用於指定佔位組件，如：

{
  "usingComponents": {
    "comp-a": "../comp/compA",
    "comp-b": "../comp/compB",
    "comp-c": "../comp/compC"
  },
  "componentPlaceholder": {
    "comp-a": "view",
    "comp-b": "comp-c"
  }
}

該配置表示：

• 組件 comp-a 的佔位組件爲內置組件 view
• 組件 comp-b 的佔位組件爲自定義組件 comp-c（其路徑在 usingComponents 中配置）

假設該配置對應的模板以下：

<button ontap="onTap">顯示組件</button>
<comp-a wx-if="{{ visible }}">
  <comp-b prop="{{ p }}">text in slot</comp-b>
</comp-a>

小程序啓動時 visible 爲 false，那麼只有 button 會被渲染；點擊按鈕後，this.setData({ visible: true }) 被執行，此時若是 comp-a, comp-b 均不可用，則頁面將被渲染爲：

<button>顯示組件</button>
<view>
  <comp-c prop="{{ p }}">text in slot</comp-c>
</view>

comp-a 與 comp-b 準備完成後，頁面被替換爲：

<button>顯示組件</button>
<comp-a>
  <comp-b prop="{{ p }}">text in slot</comp-b>
</comp-a>

注意事項和說明

1. 當一個組件被指定爲佔位組件時（如上例中的 comp-c），爲其指定佔位組件是無效的。能夠理解爲若是一個組件須要做爲其餘組件的佔位組件，則它必須在一開始就是可用的；
2. 目前自定義組件不可用的狀況包括：
   • 使用分包異步化特性的狀況下，引用了其餘分包的組件，而對應分包還未下載；
   • 使用用時注入特性的狀況下，該組件還未注入；
3. 若是一個組件不可用，且其佔位組件不存在，則渲染時會報錯並拋出；
4. 若是一個組件不存在，但爲其指定了可用的佔位組件，則佔位組件能夠被正常渲染，但後續嘗試準備替換時會報錯並拋出。

附：有佔位組件參與的渲染流程

基礎庫嘗試渲染一個組件時，會首先遞歸檢查 usingComponents，收集其將使用到的全部組件的信息；在這個過程當中，若是某個被使用到的組件不可用，基礎庫會先檢查其是否有對應的佔位組件。若是沒有，基礎庫會中斷渲染並拋出錯誤；若是有，則會標記並在後續渲染流程中使用佔位組件替換該不可用的組件進行渲染。不可用的組件會在當前渲染流程結束後嘗試準備（下載分包或注入代碼等）；等到準備過程完成後，再嘗試渲染該組件（實際上也是在執行這個流程），並替換掉以前渲染的佔位組件。