百度智能小程序 組件面板

組件面板

此功能在 2.25.0 之后版本可用。

為了方便開發(fā)者快速找到需要的組件，并快速查看組件的屬性、事件、樣式、demo、文檔等信息，開發(fā)者工具集成了組件面板。

組件面板可通過編輯器右上角按鈕打開。

打開面板后可看到基礎組件和擴展組件列表。

基礎組件

基礎組件為智能小程序框架提供的組件。

在列表中選中組件后，下方會展示當前組件的二維碼，文檔入口信息。用百度 APP 掃碼可查看當前組件的 demo。

點擊查看文檔即可查看當前組件的文檔。

組件代碼插入

在編輯器中打開 swan 文件，點擊插入按鈕，即可插入組件的代碼。插入代碼位置為編輯器中光標所在位置，若光標在組件的標簽中，則會插入到光標所在組件的內(nèi)部。如果光標所在位置為自閉合組件，就在組件后插入代碼。

組件編輯

在編輯器中選中鼠標選中組件后，可在組件面板下方直接編輯組件?？删庉嫷膬?nèi)容有屬性，事件，樣式。在編輯面板中的修改會實時同步到編輯器中。

擴展組件

擴展組件為智能小程序官方提供的 smart-ui，是一套開發(fā)、設計風格統(tǒng)一的智能小程序擴展組件庫，由百度智能小程序官方設計團隊和智能小程序團隊為小程序量身設計，以增強開發(fā)者開發(fā)體驗。

組件通過 npm 管理，包名為 @smt-ui/component

擴展組件使用 npm 管理依賴，需要系統(tǒng)中裝有 Node.js 環(huán)境。并將編譯模式選擇為 依賴分析

首次插入擴展組件時，開發(fā)者工具會自動為小程序創(chuàng)建 package.json 文件，添加并安裝 @smt-ui/component 依賴。如果當前環(huán)境變量中無 npm 命令，則會安裝組件庫失敗。

圖標組件

開發(fā)者工具為擴展組件 smt-icon 提供了可視化編輯面板。方便用戶直接選擇圖標。如果你在小程序官方示例中看到了圖標，想使用又不知道圖標的名字，來這里找就可以了。