[發明專利]一種頁面組件添加方法及裝置

在審

• 申請號: 202210114453.1
• 申請日: 2022-01-30
• 公開（公告）號: CN114489649A
• 公開（公告）日: 2022-05-13
• 發明（設計）人: 黃軍斌
• 申請（專利權）人: 北京字節跳動網絡技術有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/34;G06F9/455
• 代理公司: 北京中知法苑知識產權代理有限公司 11226
• 代理人: 李明

本公開提供了一種頁面組件添加方法及裝置，該方法首先，展示頁面構建區域；然后，響應于針對第一目標組件的添加操作，將所述第一目標組件添加在所述頁面構建區域中；之后，在所述第一目標組件的屬性信息中存在目標屬性的情況下，加載與所述目標屬性匹配的組件編輯代碼；最后，響應于針對所述第一目標組件的編輯操作，執行所述組件編輯代碼中，與所述編輯操作對應的控制指令。本公開實施例通過為第一目標組件賦予目標屬性，使第一目標組件能夠被識別為目標類型，然后利用與目標屬性匹配的組件編輯代碼實現對第一目標組件的編輯，不需要開發人員再針對編輯場景編寫組件代碼，效率較高。

技術領域

本公開涉及計算機技術領域，具體而言，涉及一種頁面組件添加方法及裝置。

背景技術

在進行頁面搭建開發的過程中，經常需要使用容器，容器是搭建頁面中用來存放其他搭建元素的一個空間，搭建元素可以包括背景、圖片、按鈕、鏈接、文本等。

通常，搭建頁面的開發者需要為容器實現兩套組件方案，如Component.js以及Component editor.js，其中Component.js用于生產環境加載，供頁面搭建完成后的用戶使用，Component editor.js用于編輯環境加載，供搭建頁面的開發者使用，兩份組件方案都需要開發人員手動編寫，效率較低。

發明內容

本公開實施例至少提供一種頁面組件添加方法及裝置。

第一方面，本公開實施例提供了一種頁面組件添加方法，包括：

展示頁面構建區域；

響應于針對第一目標組件的添加操作，將所述第一目標組件添加在所述頁面構建區域中；

在所述第一目標組件的屬性信息中存在目標屬性的情況下，加載與所述目標屬性匹配的組件編輯代碼；

響應于針對所述第一目標組件的編輯操作，執行所述組件編輯代碼中，與所述編輯操作對應的控制指令。

一種可選的實施方式中，所述響應于針對所述第一目標組件的編輯操作，執行所述組件編輯代碼中，與所述編輯操作對應的控制指令，包括：

在所述編輯操作為選中操作的情況下，根據所述控制操作對應的控制指令，將所述第一目標組件設置為選中狀態，并展示針對所述第一目標組件的編輯控件。

一種可選的實施方式中，所述編輯控件包括多個布局模式控件；所述方法還包括：

響應于針對任一布局模式控件的選取操作，利用被選取的所述布局模式控件對應的布局模式，更新所述第一目標組件。

一種可選的實施方式中，所述加載與所述目標屬性匹配的組件編輯代碼，包括：

獲取所述第一目標組件的在所述頁面構建區域中的位置信息，以及所述第一目標組件的尺寸信息；

基于所述位置信息及所述尺寸信息，加載所述目標屬性匹配的組件編輯代碼。

一種可選的實施方式中，所述方法還包括：

響應于針對第二目標組件的添加操作，將所述第二目標組件添加在所述頁面構建區域中；

若所述第二目標組件添加于所述第一目標組件之內，則將所述第二目標組件設置為所述第一目標組件的子組件。

一種可選的實施方式中，所述方法還包括：

在所述第二目標組件為所述第一目標組件的子組件的情況下，響應于針對所述第二目標組件的數據繼承操作，獲取所述第一目標組件的可繼承數據；

在所述數據繼承操作指示的區域中展示與所述數據繼承操作匹配的可繼承數據。

一種可選的實施方式中，所述方法還包括：