頁面搭建方法、裝置和電子終端與流程

本發明涉及計算機技術領域，具體而言，涉及一種頁面搭建方法、裝置和電子終端。

背景技術：

經發明人研究發現，現有的androidpro版的首頁推薦頁在搭建過程中存在諸多問題，比如邏輯流程復雜，后期重構、維護難度高等，因此，如何解決上述問題成為本領域技術人員急需解決的技術問題。

技術實現要素：

有鑒于此，本發明提供一種基于reactnative平臺實現的頁面搭建方法、裝置和電子終端，能夠有效簡化頁面搭建流程，降低后期重構、維護的難度。

本發明較佳實施例提供一種頁面搭建方法，應用于基于reactnative平臺的電子終端，所述電子終端包括頁面渲染組件，所述方法包括：

通過運行構造函數constructor對頁面架構實現初始化；

執行頁面渲染組件函數render對初始化后的所述頁面架構進行渲染，以在該頁面架構中創建房間和滑動頁；

對創建的所述房間和所述滑動頁加載對應的頁面數據；

執行componentdidmount函數以完成所述頁面的搭建。

進一步地，所述房間為多個，創建所述房間的步驟包括：

獲取用于創建多個所述房間的參數值和背景圖像，發送該參數值和背景圖像給所述頁面架構以在該頁面架構上形成用于表征多個房間的第一布局；

獲取與多個所述房間對應的點擊事件并添加至所述第一布局上的各房間；

獲取與多個所述房間對應的邊緣屬性并根據所述邊緣屬性對所述第一布局上的各房間進行設置。

進一步地，創建所述滑動頁的步驟包括：

獲取初始圖片并發送給所述頁面架構以在該頁面架構上形成表征滑動圖片的第二布局；

獲取所述初始圖片的參數值以對所述第二布局上的各初始圖片進行設置；

對設置完成的各所述初始圖片添加滑動屬性和可點擊性，以得到滑動圖片；

將各所述滑動圖片鏈接至對應的房間以完成所述滑動頁的創建。

進一步地，所述初始圖片的參數值包括圖片數量和圖片尺寸，所述獲取所述初始圖片參數值以對所述第二布局上的各初始圖片進行設置的步驟，包括：

獲取所述圖片數量并根據所述圖片數量對各圖片進行頁面賦值；

獲取所述圖片尺寸以根據該圖片尺寸對賦值后的各圖片進行尺寸設置。

進一步地，所述對創建的所述房間和滑動頁加載頁面數據的步驟包括：

獲取與所述滑動頁對應的頁面數據，并通過第一api接口加載至所述滑動頁；

獲取與所述房間對應的頁面數據，并通過第二api接口加載至所述房間。

本發明較佳實施例還提供一種頁面搭建裝置，應用于基于reactnative平臺的電子終端，所述電子終端包括頁面渲染組件，所述裝置包括：

初始化模塊，用于通過運行構造函數constructor對頁面架構實現初始化；

第一執行模塊，用于執行頁面渲染組件函數render對初始化后的所述頁面架構進行渲染，以在該頁面架構中創建房間和滑動頁；

數據加載模塊，用于對創建的所述房間和所述滑動頁加載對應的頁面數據；

第二執行模塊，用于執行componentdidmount函數以完成所述頁面地搭建。

進一步地，所述房間為多個，所述第一執行模塊包括：

房間參數獲取單元，用于獲取用于創建多個房間的參數值和背景圖像，發送該參數值和背景圖像給所述頁面架構以在該頁面架構上形成用于表征多個房間的第一布局；

點擊事件添加單元，用于獲取與多個所述房間對應的點擊事件并添加至所述第一布局上的各房間；

房間創建單元，用于獲取與多個所述房間對應的邊緣屬性并根據所述邊緣屬性對所述第一布局上的各房間進行設置以完成所述多個房間的創建。

進一步地，所述數據加載模塊包括：

第一加載單元，用于獲取與所述滑動頁對應的頁面數據，并通過第一api接口加載至所述滑動頁；

第二加載單元，用于獲取與所述房間對應的頁面數據，并通過第二api接口加載至所述房間。

本發明較佳實施例還提供一種電子終端，基于reactnative平臺實現，所述電子終端包括存儲器、處理器及上述的頁面搭建裝置，所述頁面搭建裝置安裝于所述存儲器并包括一個或多個由所述處理器執行的軟件功能模塊。

本發明較佳實施例還提供一種計算機可讀存儲介質，其上存儲有計算機程序，所述計算機程序在執行時實現上述的頁面搭建方法中的步驟。

與現有技術相比，本發明實施例提供的基于reactnative平臺實現的頁面搭建方法、裝置和電子終端，能夠有效簡化頁面搭建流程，降低對頁面后期重構、維護的難度，且頁面顯示更加明了。

附圖說明

為了更清楚地說明本發明實施例的技術方案，下面將對實施例中所需要使用的附圖作簡單地介紹，應當理解，以下附圖僅示出了本發明的某些實施例，因此不應被看作是對范圍的限定，對于本領域普通技術人員來講，在不付出創造性勞動的前提下，還可以根據這些附圖獲得其他相關的附圖。

圖1為本發明實施例提供的頁面搭建裝置的應用場景示意圖。

圖2為本發明實施例提供的頁面搭建方法的流程示意圖。

圖3為圖2中所示的步驟s104的子流程示意圖。

圖4為圖2中所示的步驟s104的另一子流程示意圖。

圖5為圖2中所示的步驟s106的子流程示意圖。

圖6為本發明實施例提供的頁面搭建裝置的方框結構示意圖。

圖7為圖6中所示的第一執行模塊的方框結構示意圖。

圖標：10-電子終端；100-頁面搭建裝置；102-初始化模塊；104-第一執行模塊；1040-房間參數獲取單元；1042-點擊事件添加單元；1044-房間創建單元；106-數據加載模塊；1060-第一加載單元；1062-第二加載單元；108-第二執行模塊；200-存儲器；300-存儲控制器；400-處理器。

具體實施方式

為使本發明實施例的目的、技術方案和優點更加清楚，下面將結合本發明實施例中的附圖，對本發明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例是本發明一部分實施例，而不是全部的實施例。通常在此處附圖中描述和示出的本發明實施例的組件可以以各種不同的配置來布置和設計。

因此，以下對在附圖中提供的本發明的實施例的詳細描述并非旨在限制要求保護的本發明的范圍，而是僅僅表示本發明的選定實施例。基于本發明中的實施例，本領域普通技術人員在沒有作出創造性勞動前提下所獲得的所有其他實施例，都屬于本發明保護的范圍。

應注意到：相似的標號和字母在下面的附圖中表示類似項，因此，一旦某一項在一個附圖中被定義，則在隨后的附圖中不需要對其進行進一步定義和解釋。

如圖1所示，為本發明實施例提供的頁面搭建裝置100的應用場景示意圖。其中，電子終端10包括頁面搭建裝置100、存儲器200、存儲控制器300以及處理器400。其中，所述電子終端10可以是，但不限于，電腦、移動上網設備(mobileinternetdevice，mid)等具有處理功能的電子設備，還可以是服務器等。

可選地，所述存儲器200、存儲控制器300、處理器400各元件相互之間直接或間接地電性連接，以實現數據的傳輸或交互。例如，這些元件之間通過一條或多條通訊總線或信號線實現電性連接。所述頁面搭建裝置100包括至少一個可以軟件或固件的形式存儲于所述存儲器200中或固化在所述電子終端10的操作系統中的軟件功能模塊。所述處理器400在所述存儲控制器300的控制下訪問所述存儲器200，以用于執行所述存儲器200中存儲的可執行模塊，例如所述頁面搭建裝置100所包括的軟件功能模塊及計算機程序等。

可以理解，圖1所示的結構僅為示意，所述電子終端10還可包括比圖1中所示更多或者更少的組件，或者具有與圖1所示不同的配置。圖1中所示的各組件可以采用硬件、軟件或其組合實現。

進一步地，請結合參閱圖2，本發明實施例還提供一種可應用于所述頁面搭建裝置100的頁面搭建方法，其中，下面將以斗魚reactnativepro版app首頁推薦頁的頁面搭建過程為例，對圖2所示的具體流程進行詳細闡述。所應說明的是，本發明所述的頁面搭建方法并不以圖2以及以下所述的具體順序為限制。應當理解，本發明所述的頁面搭建方法其中部分步驟的順序可以根據實際需要相互交換，或者其中的部分步驟也可以省略或刪除。

步驟s102，通過運行構造函數constructor對頁面架構實現初始化。

本實施例中，根據reactnative的生命周期，運行構造函數constructor構建狀態機，以對頁面渲染組件中的涉及到的變量實現初始化，即在進行頁面搭建時先對頁面架構實現初始化。

步驟s104，執行頁面渲染組件函數render對初始化后的所述頁面架構進行渲染，以在該頁面架構中創建房間和滑動頁。

本實施例中，以斗魚rnpro版app中的首頁推薦頁為例，該頁面主要由位于頂部的滑動頁部分和可通過點擊直接進入對應直播間的房間列表構成。因此，在對所述頁面架構實現初始化后，需順序執行頁面渲染組件函數render對所述頁面架構進行渲染，以在該頁面架構中創建房間和滑動頁。其中，render函數中包括多個用于實現頁面渲染的子函數。

需要說明的是，render是一個組件必須有的方法，以函數的形式體現，用以渲染界面，并返回jsx或其他組件來構成dom，和android的xml布局、wpf的xaml布局類似，只能返回一個頂級元素。

具體地，如圖3所示，本實施例中，首先在初始化后的所述頁面架構上進行房間創建，所述房間可以為多個，具體創建過程包括以下步驟。

步驟s1040，獲取用于創建多個所述房間的參數值和背景圖像，發送該參數值和背景圖像給所述頁面架構以在該頁面架構上形成用于表征多個房間的第一布局。

本實施例中，所述參數值可以是房間數量、id、大小等用以在所述頁面架構上形成房間布局的任意參數。實際實施時，可通過render函數中的子函數_renderrow函數實現，首先通過調用_renderroom函數定義房間的rowdata,、rowid，再通過定義marginstyle的值來定義多個所述房間的間距，然后返回roomholder函數定義房間id，從而實現對第一布局的創建。應理解，房間參數值的設定、傳遞不限于上述方式。

步驟s1042，獲取與多個所述房間對應的點擊事件并添加至所述第一布局上的各房間。

本實施例中，通過在所述房間上添加點擊事件實現在用戶點擊該房間時直接跳轉至對應的直播間，實際實施時，可通過{this._onroompress}定義房間的可點擊性，使房間加入點擊事件。

步驟s1044，獲取與多個所述房間對應的邊緣屬性并根據所述邊緣屬性對所述第一布局上的各房間進行設置。

本實施例中，在完成步驟s1040和步驟s1042之后，還需對房間的寬度等邊緣屬性進行設置。具體地，可通過使用(layoututils.screen_width-21)/2設置房間的寬度，然后通過margin＝{marginstyle}語句，將設置好的marginstyle賦值給margin，從而完成整個_renderroom函數的主要功能。應理解，在完成多個所述房間的創建后，所述第一布局上形成由多個房間構成的房間列表，用戶可根據點擊對應的房間進入直播間。

需要說明的是，在進行房間創建時，通過render函數中的子函數_renderrow調用_renderroom函數實現上述房間創建功能，而該_renderroom函數中涉及的具體參數傳遞等可根據實際情況進行靈活設計。

進一步地，如圖4所示，為所述滑動頁的創建流程示意圖，具體包括以下步驟。

步驟s1046，獲取初始圖片并發送給所述頁面架構以在該頁面架構上形成表征滑動圖片的第二布局。

步驟s1048，獲取所述初始圖片參數值以對所述第二布局上的各初始圖片進行設置。

本實施例中，首先獲取初始圖片完成所述第二布局的創建，再根據所述初始圖片數量對各圖片進行頁面賦值，然后獲取所述圖片尺寸以根據該圖片尺寸對賦值后的各圖片進行尺寸設置。實際實施時，可通過調用render的子函數_renderheader進行滑動頁的創建。例如，在renderheader函數中首先判斷滑動圖片數量，在有圖片的情況下將this.state.piclist.map賦值給pages頁面，在返回值部分定義滑動頁的寬高，可通過{layoututils.screen_width*9/16}autoplay設置。

步驟s1050，對設置完成的各所述初始圖片添加滑動屬性和可點擊性，以得到滑動圖片。

本實施例中，在完成步驟s1048中對初始圖片的設置后，需要對初始圖片添加滑動屬性和可點擊性，以得到滑動圖片。實際實施時，可通過調用函數_swiperitem以設置滑動頁屬性。

步驟s1052，將各所述滑動圖片鏈接至對應的房間以完成所述滑動頁的創建。

本實施中，由于所述滑動頁用于使得用戶在登入app后，更加直觀、方便的了解目前直播平臺上相對熱門的直播內容，進而通過直接點擊滑動頁快速進入對應房間，因此，需要將所述各滑動圖片鏈接至對應的房間。實際實施時，可在_swiperitem函數中首先定義<touchableopacity>，然后再定義_onroompress點擊功能函數使滑動圖片可以點擊跳轉，并且通過<image>函數導入pic_url參數實現導入圖片數據，從而完成整個滑動頁的創建。需要說明的是，在本實施例中，整個滑動頁創建部分的功能主要通過_renderheader和_swiperitem來實現。

步驟s106，對創建的所述房間和所述滑動頁加載對應的頁面數據。

本實施例中，在完成上述房間和滑動頁的基本設置后，需要通過數據接口將相對應的頁面數據傳遞至對應的位置，具體地，如圖5所示，在對創建的所述房間和所述滑動頁加載對應的頁面數據時包括以下步驟。

步驟s1060，獲取與所述滑動頁對應的頁面數據，并通過第一api接口加載至所述滑動頁。

步驟s1062，獲取與所述房間對應的頁面數據，并通過第二api接口加載至所述房間。

實際實施時，可通過render函數調用_onrequestdata子函數進行數據加載。具體地，在對所述滑動頁加載數據時，可通過調用_onrequestdata函數的子函數_getslidedata實現。而在對所述房間加載數據時，可通過調用_onrequestdata函數的子函數_getrecommenddata實現，從而完成對整個頁面的數據加載。

應注意，本實施例中，所述第一api接口和所述第二api接口為虛擬的函數調用接口，本實施例中，所述第一api接口可以理解為_onrequestdata函數，所述第二api接口可以理解為_getrecommenddata函數。

步驟s108，執行componentdidmount函數以完成所述頁面的搭建。

在reactnative中，通過所述render完成對整個界面的渲染后，需順序調用componentdidmount函數并執行，從而開始對reactnative中的其他框架進行初始化。

基于對上述頁面搭建方法的描述，本發明實施例還給出了一種計算機可讀存儲介質，其上存儲有計算機程序，所述計算機程序在執行時實現上述的頁面搭建方法中的步驟。

進一步地，請結合參閱圖6，本發明實施例提供的頁面搭建裝置100包括初始化模塊102、第一執行模塊104、數據加載模塊106和第二執行模塊108。

所述初始化模塊102，用于通過運行構造函數constructor對頁面架構實現初始化。

本實施例中，圖2中的步驟s102由所述初始化模塊102執行，具體過程請參考步驟s102，在此不再贅述。

所述第一執行模塊104，用于執行頁面渲染組件函數render對初始化后的所述頁面架構進行渲染，以在該頁面架構中創建房間和滑動頁。

本實施例中，圖2中的步驟s104由所述第一執行模塊104執行，具體過程請參考步驟s104，在此不再贅述。其中，如圖7所示，所述第一執行模塊104包括房間參數獲取單元1040、點擊事件添加單元1042和房間創建單元1044、

所述房間參數獲取單元1040，用于獲取用于創建多個房間的參數值和背景圖像，發送該參數值和背景圖像給所述頁面架構以在該頁面架構上形成用于表征多個房間的第一布局。

本實施例中，圖3中的步驟s1040由所述房間參數獲取單元1040執行，具體過程請參考步驟s1040，在此不再贅述。

所述點擊事件添加單元1042，用于獲取與多個所述房間對應的點擊事件并添加至所述第一布局上的各房間。

本實施例中，圖3中的步驟s1042由所述點擊事件添加單元1042執行，具體過程請參考步驟s1042，在此不再贅述。

所述房間創建單元1044，用于獲取與多個所述房間對應的邊緣屬性并根據所述邊緣屬性對所述第一布局上的各房間進行設置以完成所述多個房間的創建。

本實施例中，圖3中的步驟s1044由所述房間創建單元1044執行，具體過程請參考步驟s1044，在此不再贅述。

所述數據加載模塊106，用于對創建的所述房間和所述滑動頁加載對應的頁面數據。本實施例中，圖2中的步驟s106由所述數據加載模塊106執行，具體過程請參考步驟s106，在此不再贅述。實際實施時，所述數據加載模塊106包括第一加載單元1060和第二加載單元1062。

所述第一加載單元1060，用于獲取與所述滑動頁對應的頁面數據，并通過第一api接口加載至所述滑動頁。

本實施例中，圖5中的步驟s1060由所述第一加載單元1060執行，具體過程請參考步驟s1060，在此不再贅述。

所述第二加載單元1062，用于獲取與所述房間對應的頁面數據，并通過第二api接口加載至所述房間。

本實施例中，圖5中的步驟s1062由所述第二加載單元1062執行，具體過程請參考步驟s1062，在此不再贅述。

所述第二執行模塊108，用于執行componentdidmount函數以完成所述頁面地搭建。

本實施例中，圖2中的步驟s108由所述第二執行模塊108執行，具體過程請參考步驟s108，在此不再贅述。

綜上所述，本發明提供的頁面搭建方法、裝置、電子終端10和計算機可讀存儲介質，其中，基于reactnative開發框架，能夠有效簡化頁面搭建流程，降低對頁面后期重構、維護的難度，同時，本發明給出的頁面搭建方法具有較強的可擴展性。

在本發明的描述中，術語“設置”、“相連”、“連接”應做廣義理解，例如，可以是固定連接，也可以是可拆卸連接，或一體地連接；可以是機械連接，也可以是電連接；可以是直接相連，也可以通過中間媒介間接相連，可以是兩個元件內部的連通。對于本領域的普通技術人員而言，可以具體情況理解上述術語在本發明中的具體含義。

在本發明實施例所提供的幾個實施例中，應該理解到，所揭露的裝置和方法，也可以通過其他方式實現。以上所描述的裝置和方法實施例僅僅是示意性的，例如，附圖中的流程圖和框圖顯示了根據本發明的預設數量個實施例的裝置、方法和計算機程序產品可能實現的體系架構、功能和操作。在這點上，流程圖或框圖中的每個方框可以代表一個模塊、程序段或代碼的一部分。所述模塊、程序段或代碼的一部分包含一個或預設數量個用于實現規定的邏輯功能。

也應當注意，在有些作為替換的實現方式中，方框中所標注的功能也可以以不同于附圖中所標注的順序發生。例如，兩個連續的方框實際上可以基本并行地執行，它們有時也可以按相反的順序執行，這依所涉及的功能而定。也要注意的是，框圖和/或流程圖中的每個方框、以及框圖和/或流程圖中的方框的組合，可以用執行規定的功能或動作的專用的基于硬件的系統來實現，或者可以用專用硬件與計算機指令的組合來實現。

以上所述僅為本發明的優選實施例而已，并不用于限制本發明，對于本領域的技術人員來說，本發明可以有各種更改和變化。凡在本發明的精神和原則之內，所作的任何修改、等同替換、改進等，均應包含在本發明的保護范圍之內。