TW202141300A - 頁面處理方法、裝置、設備及儲存媒體 - Google Patents

頁面處理方法、裝置、設備及儲存媒體 Download PDF

Info

Publication number
TW202141300A
TW202141300A TW110109219A TW110109219A TW202141300A TW 202141300 A TW202141300 A TW 202141300A TW 110109219 A TW110109219 A TW 110109219A TW 110109219 A TW110109219 A TW 110109219A TW 202141300 A TW202141300 A TW 202141300A
Authority
TW
Taiwan
Prior art keywords
page
target page
skeleton screen
file
view
Prior art date
Application number
TW110109219A
Other languages
English (en)
Other versions
TWI808393B (zh
Inventor
孫廣東
黃燦輝
海媛
黃佳生
林超
郭志偉
黃思程
薛遠升
Original Assignee
大陸商騰訊科技（深圳）有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 大陸商騰訊科技（深圳）有限公司 filed Critical 大陸商騰訊科技（深圳）有限公司
Publication of TW202141300A publication Critical patent/TW202141300A/zh
Application granted granted Critical
Publication of TWI808393B publication Critical patent/TWI808393B/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/151—Transformation
    • G06F40/154—Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/197—Version control
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Debugging And Monitoring (AREA)
  • Memory System Of A Hierarchy Structure (AREA)

Abstract

本申請提供一種頁面處理方法和相關裝置。該方法包括：獲取應用程式中被預覽的目標頁面的頁面結構，該頁面結構用於標識頁面元素在目標頁面中的佈局；在目標頁面的頁面結構的基礎上得到目標頁面對應的骨架屏的頁面結構，該頁面結構用於標識占位元素在骨架屏中的佈局；根據骨架屏的頁面結構生成骨架屏的視圖文件，骨架屏用於在未完成加載目標頁面前進行展示。由此能夠直接透過獲得目標頁面的頁面結構自動生成相應骨架屏的視圖文件，無需為骨架屏單獨編寫代碼，骨架屏的實現過程不僅高效，而且靈活。

Description

頁面處理方法、裝置、設備及儲存媒體
本申請係關於計算機或電腦技術領域，具體涉及應用程式處理。
頁面（例如網頁或某個應用程式中的服務頁面）在進行加載並顯示的過程中，需要耗費一定的時間，這段時間內用戶需要等待。目前，為了減輕用戶等待過程的焦灼感，通常會在頁面的加載過程中展示一個Loading（加載）頁，如圖1所示，Loading頁可以是一個空白頁面（例如圖1左側圖示），或者在Loading頁中展示一個轉動的菊花（例如圖1右側圖示），提示用戶頁面正在加載中。
本申請實施例提供了一種頁面處理方法、裝置、設備及儲存媒體，能夠基於目標頁面的頁面結構快速生成目標頁面對應的骨架屏的視圖文件，使得骨架屏的實現過程不僅高效，而且靈活。
一方面，本申請實施例提供一種頁面處理方法，該方法包括：
對應用程式中的目標頁面進行預覽；
獲取被預覽的目標頁面的頁面結構，所述目標頁面的頁面結構用於標識所述目標頁面的頁面元素在所述目標頁面中的佈局；
在目標頁面的頁面結構的基礎上得到目標頁面對應的骨架屏的頁面結構，所述骨架屏的頁面結構用於標識所述骨架屏的占位元素在所述骨架屏中的佈局，所述占位元素是透過對所述頁面元素進行處理得到的；
根據骨架屏的頁面結構生成骨架屏的視圖文件，所述骨架屏用於在未完成加載所述目標頁面前進行展示。
另一方面，本申請實施例提供一種頁面處理方法，該方法包括：
顯示預覽界面，預覽界面中包括應用程式中被預覽的目標頁面；預覽界面中還包括觸發控件；
當觸發控件被選定時，按照上述的應用程式的處理方法生成骨架屏的視圖文件；
獲取目標頁面的視圖文件，並建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係；
將具備所述映射關係的目標頁面的視圖文件和骨架屏的視圖文件打包至應用程式的程式包中。
本申請實施例中，透過預覽界面中的觸發控件即可觸發生成被預覽的目標頁面的對應的骨架屏的視圖文件，建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係；再將具備映射關係的目標頁面的視圖文件和骨架屏的視圖文件打包至應用程式的程式包中。這樣就生成了包含目標頁面的視圖文件和骨架屏的視圖文件的應用程式的程式包，開發者對應用程式的程式包進行發佈之後，應用程式的啟動流程中就引入了骨架屏實現方案，從而優化了應用程式的啟動流程和目標頁面的加載流程，有利於提升用戶對應用程式的使用體驗。
另一方面，本申請實施例提供一種頁面處理方法，該方法包括：
從應用程式的程式包中讀取目標頁面的視圖文件及骨架屏的視圖文件，目標頁面的視圖文件與骨架屏的視圖文件具備映射關係；骨架屏的視圖文件按照前述應用程式的處理方法生成；
若確定加載所述目標頁面，在未完成加載所述目標頁面前，根據骨架屏的視圖文件渲染顯示骨架屏；
加載目標頁面中的動態資源資料；
根據目標頁面的視圖文件和加載完成的目標頁面中的動態資源資料，渲染顯示目標頁面，以透過目標頁面替換骨架屏。
本申請實施例中，在啟動應用程式的過程中，當加載應用程式中的目標頁面時，基於應用程式的程式包中與目標頁面具備映射關係的骨架屏的文件，能夠首先渲染並顯示目標頁面的骨架屏，待目標頁面的內容被加載完成後，再採用目標頁面來替換骨架屏。這個過程能夠有效降低用戶等待的焦灼感，提升應用程式的競爭力和用戶使用體驗。
另一方面，本申請實施例提供一種頁面處理裝置，該裝置包括：
預覽單元，用於對應用程式中的目標頁面進行預覽；
處理單元，用於獲取被預覽的目標頁面的頁面結構，所述目標頁面的頁面結構用於標識所述目標頁面的頁面元素在所述目標頁面中的佈局；在目標頁面的頁面結構的基礎上得到目標頁面對應的骨架屏的頁面結構，所述骨架屏的頁面結構用於標識所述骨架屏的占位元素在所述骨架屏中的佈局，所述占位元素是透過對所述頁面元素進行處理得到；根據骨架屏的頁面結構生成骨架屏的視圖文件，所述骨架屏用於在未完成加載所述目標頁面前進行展示。
另一方面，本申請實施例提供一種頁面處理裝置，該裝置包括：
顯示單元，用於顯示預覽界面，預覽界面中包括應用程式中被預覽的目標頁面；預覽界面中還包括觸發控件；
處理單元，用於當觸發控件被選定時，按照前述應用程式的處理方法生成骨架屏的視圖文件；以及獲取目標頁面的視圖文件，並建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係；以及將具備所述映射關係的目標頁面的視圖文件和骨架屏的視圖文件打包至應用程式的程式包中。
另一方面，本申請實施例提供一種頁面處理裝置，該裝置包括：
讀取單元，用於從應用程式的程式包中讀取目標頁面的視圖文件及骨架屏的視圖文件，目標頁面的視圖文件與骨架屏的視圖文件具備映射關係；骨架屏的視圖文件按照前述應用程式的處理方法生成；
處理單元，用於若確定加載所述目標頁面，在未完成加載所述目標頁面前，根據骨架屏的視圖文件渲染顯示骨架屏；以及加載目標頁面中的動態資源資料；根據目標頁面的視圖文件和加載完成的目標頁面中的動態資源資料，渲染顯示目標頁面，以透過目標頁面替換骨架屏。
另一方面，本申請實施例提供一種頁面處理設備，該設備包括：
處理器，適於實現一條或多條指令；以及，
計算機可讀儲存媒體，儲存有一條或多條指令，一條或多條指令適於由處理器加載並執行上述的應用程式的處理方法。
另一方面，本申請實施例提供計算機可讀儲存媒體，該計算機可讀儲存媒體儲存有一條或多條指令，一條或多條指令適於由處理器加載並執行上述的頁面處理方法。
又一方面，本申請實施例提供了一種包括指令的計算機程式產品，當其在計算機上運行時，使得所述計算機執行上述的頁面處理方法。
本申請實施例中，在對應用程式的目標頁面進行預覽的過程中，獲取被預覽的目標頁面的頁面結構，並在該目標頁面的頁面結構的基礎上直接對頁面元素進行處理得到目標頁面對應的骨架屏的頁面結構；再根據骨架屏的頁面結構生成骨架屏的視圖文件，該骨架屏用於在未完成加載目標頁面前進行展示。這個過程是直接透過獲得目標頁面的頁面結構自動生成相應骨架屏的視圖文件，無需為骨架屏單獨編寫代碼，避免代碼入侵，且無論目標頁面如何變化，透過預覽即可快速生成相應骨架屏的視圖文件，骨架屏的實現過程不僅高效，而且靈活。
下面將結合本申請實施例中的圖式，對本申請實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本申請一部分實施例，而不是全部的實施例。基於本申請中的實施例，所屬技術領域具有通常知識者在沒有作出創造性勞動前提下所獲得的所有其他實施例，都屬於本申請保護的範圍。
本申請實施例涉及的應用程式可以包括各類在終端中運行的程式，例如APP、免安裝的應用程式（小程式）等。
為了便於描述，之後的實施例中主要以應用程式為免安裝的應用程式，即無需下載安裝即可使用的應用程式為例進行說明。這類應用程式又俗稱小程式，它通常作為子程式運行於客戶端中，此時客戶端與該應用程式具備父子關係，該客戶端作為該應用程式的父程式，而該應用程式作為該客戶端的子程式。客戶端（又可稱為應用客戶端、APP客戶端）是指下載並安裝在終端中，並在終端中運行的程式。終端中可以包括各類客戶端，包括但不限於：IM（Instant Messaging，即時通訊）客戶端（例如微信客戶端、QQ客戶端等）、SNS（Social Networking Services，社交網路服務）客戶端（例如微博客戶端、具備社交功能的地圖客戶端等）、內容服務客戶端（例如新聞客戶端）、圖像處理客戶端、搜索客戶端等等。除特別說明外，本申請後續實施例中所提及的應用程式，均以運行於終端的各類客戶端中的應用程式（即小程式）為例進行說明。
應用程式（小程式）是一種雙執行緒模式的底層架構，運行環境分為邏輯層和視圖層，邏輯層包括邏輯文件，該邏輯文件可以是指JS文件；邏輯層採用JsCore執行緒運行JS文件，即邏輯層的任務均在邏輯執行緒（即JsCore執行緒）中被執行。視圖層包括視圖文件，視圖文件包括視圖代碼文件（如wxml文件）和視圖樣式文件（如wxss文件），邏輯層根據頁面的視圖文件使用Webview來對頁面進行渲染，一個應用程式存在多個頁面，所以視圖層存在多個Webview執行緒，也就是說，視圖層的任務均在渲染執行緒（即Webview執行緒）中被執行。
圖2示出了本申請一個示例性實施例提供的一種應用程式的啟動流程的示意圖；如圖2所示，應用程式的啟動流程包括預加載過程和顯示過程；其中，預加載過程可分為視圖層的預加載和邏輯層的預加載；其中，視圖層的預加載過程可包括Webview初始化和公共庫注入，邏輯層的預加載可包括JS引擎（即JsCore）初始化和公共庫注入。顯示過程包括資源準備階段（如基礎UI（User Interface，用戶界面）創建、代碼包下載）、業務代碼注入階段和首屏渲染階段。應用程式啟動流程中每一個必要步驟都需要經歷一定的時間來完成，而在此時間內用戶需要等待。可以採用首次有效繪製（First Meaningful Paint，FMP）來衡量用戶等待時間，FMP是指從應用程式被觸發啟動的時間點開始，至應用程式的首屏頁面被顯示的時間點為止，這兩個時間點之間持續的時間長度。即FMP用於反映加載並渲染應用程式的首屏頁面所需的時間。FMP值越大，表示用戶從觸發啟動應用程式到完整看到應用程式的首屏頁面中的完整內容所需要等待的時間越長，該應用程式的啟動性能越差；反之，FMP值越小，表示用戶從觸發啟動應用程式到完整看到應用程式的首屏頁面中的完整內容所需要等待的時間越短，該應用程式的啟動性能越優。
針對具備雙執行緒模式的底層架構的應用程式（小程式），本申請實施例提出骨架屏方案，該方案具體是：在目標頁面的首屏內容進行加載並渲染的過程中，顯示該目標頁面對應的骨架屏（Skeleton Screen）。骨架屏能夠在目標頁面的資料還未加載完成前，展示一個描繪了目標頁面中的各頁面元素的大致結構的骨架頁面。用戶在等待目標頁面進行加載的過程中，可以從骨架屏中感知目標頁面的頁面結構，目標頁面包含什麼類型的頁面元素，以及各頁面元素在目標頁面中的位置；從而將用戶的關注焦點轉移至對頁面結構的關注上，降低用戶等待的焦灼感，提升應用程式的競爭力和用戶使用體驗。所謂骨架屏是指在應用程式的目標頁面中的資料尚未加載完成之前，用於描繪目標頁面中的各頁面元素的大致結構的一個頁面。骨架屏的基本原理是延用應用程式中目標頁面的頁面結構，並採用占位元素將該目標頁面中的各個頁面元素進行樣式覆蓋，使各個頁面元素展現為灰色塊的過程。此處的目標頁面可以是指應用程式中的任一頁面，在一種實施方式中，目標頁面可以是指應用程式中的第一個待展示的服務頁面。目標頁面中的頁面元素可以是指目標頁面中的文字內容、圖片、按鈕等等。占位元素可以為包括各種顏色、條紋的色塊，例如是灰色塊，占位元素在骨架屏中的位置和樣式與頁面元素在目標頁面中的位置和樣式相對應，目標頁面中的頁面元素可在骨架屏中找到與之對應的占位元素。本申請實施例中，在應用程式的目標頁面被加載完成之前先渲染顯示骨架屏，等到目標頁面的資料加載完成後，用目標頁面的頁面元素的資料替換骨架屏中的占位元素，這樣相比於顯示空白的Loading頁面或者在Loading頁面中顯示轉動菊花的方案來說，骨架屏可展示目標頁面中的各個頁面元素的位置和樣式，這樣可以優化加載體驗。
圖3示出了本申請一個示例性實施例提供的一種骨架屏的示意圖；目標頁面30和其對應的骨架屏31的結構如圖3所示。目標頁面30是指任一個應用程式中的任一頁面，例如可以是應用程式中的主服務頁面（即應用程式啟動後首個需要被渲染展示的頁面）。目標頁面30中包含多個頁面元素，例如按鍵元素301、圖片元素302和文本元素303。骨架屏31中包含多個占位元素，例如占位元素304~306，占位元素通常表示為灰色塊。從圖3可以看出，目標頁面30和骨架屏31的頁面結構大致一致，目標頁面30中的頁面元素在骨架屏31中被替換為灰色的占位元素，例如按鍵元素301被替換為占位元素304，圖片元素302被替換為占位元素305，文本元素303被替換為占位元素306。但是，頁面元素在目標頁面30中的位置與對應的占位元素在骨架屏31中的位置保持一致。進一步如圖3所示，不同類型的頁面元素對應的占位元素的展示效果也不同，例如文本元素303對應的占位元素呈灰色條紋狀；而圖片元素302對應的占位元素305呈灰色矩形塊狀；按鍵元素301對應的占位元素304則呈現與該按鍵元素的形狀相同的灰色塊。
如前述，應用程式包含邏輯層和視圖層，目標頁面對應的骨架屏的展示是透過在視圖層建立渲染任務，並在Webview執行緒中來執行的。因此，首先需要生成目標頁面對應的骨架屏的視圖文件，再由視圖層根據骨架屏的視圖文件來對骨架屏進行渲染顯示。傳統的web頁面的實現，主要有以下幾種方式，一種是編寫代碼的方式，即由開發人員依據目標頁面的頁面結構來專門編寫骨架屏的代碼文件，以此來實現骨架屏；這種方式效率低，並且存在業務耦合嚴重的問題，即一旦目標頁面的頁面結構發生變化，需要重新進行代碼編寫，所以這種方式並不適合針對小程式頁面的骨架屏實現。另一種是利用web端的外掛程式來定制骨架屏，這種方式只適用於web端這種單執行緒模式的架構。而本申請實施例中，應用程式的目標頁面對應的骨架屏雖然是一個頁面，但是它是在小程式的架構基礎上實現的一個頁面，而小程式屬於免安裝且運行於客戶端的應用程式、具備雙執行緒模式的底層架構，這與web端存在完全不同的底層架構，因此這種方式同樣不適用於針對小程式頁面的骨架屏的實現。基於此，本申請實施例提出一種頁面處理方案，該方案能夠生成針對免安裝的、具備雙執行緒模式架構的應用程式（即小程式）中的目標頁面的骨架屏的實現，能夠較為便捷地生成針對小程式中的目標頁面的骨架屏的視圖文件，從而優化應用程式的啟動流程，優化目標頁面的加載體驗；本申請實現骨架屏的方案具備無代碼入侵、使用成本低、配置靈活的優點。
下面將結合圖式對本申請實施例提出的頁面處理方案進行詳細介紹。
圖4示出了本申請一個示例性實施例提供的一種頁面處理系統的結構示意圖。如圖4所示，該頁面處理系統可包括終端401、終端402以及伺服器403。可以理解的是，該系統中包含的終端的數量和伺服器的數量僅為舉例，本申請並不對終端和伺服器的數量進行限定。其中，終端401或終端402均可以是：PC（Personal Computer，個人電腦）、PDA（Personal Digital Assistant, 個人數位助理）、平板電腦、手機、可穿戴智能設備等等；伺服器403可以是單獨的伺服器、集群伺服器、雲伺服器等各種類型。其中：
終端401可以是指應用程式的開發者所使用的終端。終端402可以是指應用程式的使用者對應的終端。終端402中可安裝並運行至少一個客戶端，該客戶端支持應用程式的運行，該應用程式可以是免安裝的、運行於該客戶端的應用程式（即小程式）。例如：終端402中安裝有微信客戶端，微信客戶端中可運行新聞小程式，購物小程式、遊戲小程式等等。
在一種實施方式中，應用程式的開發者可以使用終端401來進行應用程式的開發和調試，例如：可以藉助於終端401中的開發者工具提供的開發和調試功能來實現應用程式的開發和調試。在對應用程式進行開發和調試的過程中，終端401可提供預覽功能，開發者利用該預覽功能能夠對應用程式中的各頁面進行預覽，那麼，終端401可以基於被預覽的目標頁面的頁面結構，來生成目標頁面對應的骨架屏的視圖文件；這樣就多工了目標頁面原本的樣式佈局，自動生成骨架屏的視圖文件，便捷地以無代碼入侵方式實現了骨架屏。
在一種實施方式中，終端401生成目標頁面對應的骨架屏的文件之後，還需建立目標頁面與骨架屏之間的映射關係，並將該映射關係注入至開發者針對應用程式所開發的程式包中，這樣，開發者對應用程式的程式包進行發佈之後，應用程式的啟動流程中就引入了骨架屏實現方案。
在一種實施方式中，使用者可以使用終端402來對已發佈的應用程式進行使用，在啟動應用程式的過程中，當加載應用程式中的目標頁面時，基於應用程式的程式包中與目標頁面具備映射關係的骨架屏的視圖文件，能夠首先渲染並顯示目標頁面的骨架屏，待目標頁面的內容被加載完成後，再採用目標頁面來替換骨架屏。這個過程能夠有效降低用戶等待的焦灼感，提升應用程式的競爭力和用戶使用體驗。在此實施方式中，伺服器403中儲存有應用程式的資源資料。應用程式的頁面中頁面元素包含靜態資源資料和動態資源資料，靜態資源資料是指在頁面加載過程中無需請求獲取的資料，例如一些固定的文字、圖片等等，這些靜態資源資料會形成應用程式中的頁面的視圖文件，並被封裝至應用程式的程式包中儲存在終端402中。動態資源資料是指需要實時從伺服器403中所獲取的資料，例如用戶互動資料、變化的文字圖片等。終端進行頁面加載的過程中，需要從伺服器403中請求並拉取頁面元素的動態資源資料，整合終端402中的靜態資源資料後再進行渲染，從而顯示頁面。
可以理解的是，上述提及的終端401和終端402可為同一終端，也可為不同的終端，本申請實施例對此不作限定。
圖5示出了本申請一個示例性實施例提供的一種頁面處理方法的流程示意圖；該頁面處理方法可由圖4所示系統中的終端401執行，該方法包括但不限於步驟S501~S504。其中：
S501，對應用程式的目標頁面進行預覽。
按照應用程式的底層架構，應用程式的頁面實現需要包括邏輯文件和視圖文件，邏輯文件是指運行於應用程式的邏輯層的文件，可以是指JS文件。而視圖文件是指運行於應用程式的視圖層的文件，包括視圖代碼文件和視圖樣式文件，本實施例中，視圖代碼文件可以是wxml文件，視圖樣式文件可以是wxss文件。在一種實施方式中，終端401中可提供開發者工具，該開發者工具具備應用程式的開發、編譯、預覽、調試等功能，開發者可利用該開發者工具開發並調試應用程式。當對應用程式的目標頁面進行編譯形成該目標頁面的邏輯文件和視圖文件之後，可以基於該目標頁面的邏輯文件，再調用開發者工具的預覽功能，來對應用程式的目標頁面進行預覽。而當需要在應用程式中顯示目標頁面時，可根據目標頁面的視圖文件來進行渲染和顯示。
S502，獲取被預覽的目標頁面的頁面結構，所述目標頁面的頁面結構用於標識所述目標頁面的頁面元素在所述目標頁面中的佈局。
目標頁面還包括配置信息，配置信息是用於描述目標頁面中各個頁面元素的展示效果的配置項；目標頁面的配置信息中包括頁面元素的顯示配置欄位，顯示配置欄位用於指示頁面元素在目標頁面中被顯示或者被隱藏，例如：顯示配置欄位可是指hidden（隱藏）配置欄位，若該hidden配置欄位被配置成需要隱藏的css選擇器，表示被隱藏；否則表示被顯示。在一種實施方式中，目標頁面的頁面結構是由目標頁面的邏輯文件和配置信息共同確定的；換句話說，根據目標頁面的邏輯文件和配置信息可得到目標頁面的頁面結構，目標頁面的頁面結構標識了目標頁面中各個頁面元素在目標頁面中的佈局。例如：目標頁面的邏輯文件中定義了某個頁面元素的位置和樣式，而目標頁面的配置信息指示該頁面元素被隱藏，那麼目標頁面在展示時該頁面元素在目標頁面中的相應位置會呈現空白，即該頁面元素被隱藏而不會在目標頁面中進行顯示。
S503，在目標頁面的頁面結構的基礎上得到目標頁面對應的骨架屏的頁面結構。
所述骨架屏的頁面結構用於標識所述骨架屏的占位元素在所述骨架屏中的佈局，所述占位元素是透過對所述頁面元素進行處理得到的。
目標頁面的頁面元素包括關鍵元素和非關鍵元素，其中，關鍵元素是指目標頁面中位於首屏中，且顯示配置欄位用於指示被顯示的頁面元素，即關鍵元素是指首屏可見元素。非關鍵元素是指目標頁面中除關鍵頁面元素之外的其他頁面元素，即非關鍵元素包括首屏隱藏元素和非首屏元素。關鍵元素的類型包括以下至少一種：文本元素、圖片元素、按鈕元素、表單元素、偽類元素和原生組件。本申請實施例中，在目標頁面的頁面結構的基礎上，透過對關鍵元素和非關鍵元素進行不同的處理以確定出占位元素，並以此得到目標頁面對應的骨架屏的頁面結構；這樣得到骨架屏的頁面結構的方案既便捷，又可減少骨架屏的代碼的冗餘，使得骨架屏文件的生成過程更為高效。
S504，根據骨架屏的頁面結構生成骨架屏的視圖文件。
骨架屏的視圖文件包括骨架屏的視圖代碼文件和骨架屏的視圖樣式文件；在一種實施方式中，骨架屏的視圖代碼文件可為wxml文件，用於描述骨架屏的模板，包括骨架屏中各占位元素在骨架屏中的佈局位置。骨架屏的視圖樣式文件可為wxss文件，用於描述骨架屏中各占位元素的樣式。
所述骨架屏用於在未完成加載所述目標頁面前進行展示，以降低用戶的等待焦慮。
本申請實施例中，在對應用程式的目標頁面進行預覽的過程中，獲取被預覽的目標頁面的頁面結構，並在該目標頁面的頁面結構的基礎上直接對頁面元素進行處理得到目標頁面對應的骨架屏的頁面結構；再根據骨架屏的頁面結構生成骨架屏的視圖文件。這個過程是直接透過獲得目標頁面的頁面結構自動生成相應骨架屏的視圖文件，無需為骨架屏單獨編寫代碼，避免代碼入侵，且當目標頁面無論如何變化，透過預覽即可快速生成相應骨架屏的視圖文件，骨架屏的實現過程不僅高效，而且靈活。
下面將對步驟S503所涉及的處理過程進行詳細介紹。
在一種實施方式中，在目標頁面的頁面結構的基礎上，對頁面元素進行處理得到目標頁面對應的骨架屏的頁面結構的流程包括：（1）刪除頁面元素中的非關鍵元素，這涉及對非關鍵元素的處理；這個處理過程可以藉助於下述手段來實現：
①解析目標頁面的邏輯文件，以將目標頁面的邏輯文件轉換為文檔對象模型（Document Object Model，DOM）樹，DOM樹包括多個節點，每個節點對應目標頁面中的一個頁面元素。
圖6示出了本申請一個示例性實施例提供的一種文檔對象模型樹的示意圖，文檔對象模型樹是一種表示邏輯文件的樹結構。其中，邏輯文件為html代碼文件，其對應的DOM樹如圖6所示，圖6中每一個方框601代表一個節點，DOM樹包括多個節點，每個節點與邏輯文件中描述的一個頁面元素相對應；比如，邏輯文件中的文本元素對應DOM樹中的文本節點，又如，邏輯文件中的屬性元素對應DOM樹中的屬性節點。
②根據目標頁面的配置信息對DOM樹進行裁剪，去除DOM樹中與目標頁面中的非關鍵元素相對應的節點。
DOM樹中的每個節點攜帶各自對應的頁面元素的屬性，包括位置屬性和樣式屬性；位置屬性用於描述頁面元素在目標頁面中的佈局位置（如寬高、距離頁面頂端的距離、距離頁面左端的距離），樣式屬性用於描述頁面元素在目標頁面中呈現的顯示效果（如字體顏色、背景色、前景色等）。依據各節點的屬性來對DOM樹進行裁剪，以去除非關鍵元素相對應的節點，而僅保留首屏可見元素對應的節點。這樣可以減少骨架屏代碼的冗餘，其具體的剪裁方式可採用下述程式進行： //位於首屏中 export const inViewPort = {ele} =＞{ const rect = ele.getBoundingClientRect () return rect.top ＜ window.innerHeight && rect.left ＜ window.innerWidth } //是否隱藏 const DISPLAY_NONE = /display:\s*none/ export const isDisplayNone = (ele) =＞ { return DISPLAY_NONE.test(ele.getAttribute("style")) }
（2）將關鍵元素替換為占位元素，得到骨架屏的頁面結構；這涉及對關鍵元素的處理。
裁剪後的DOM樹中可以僅包含與目標頁面中的關鍵元素相對應的節點；在一種實施方式中，將目標頁面中的關鍵元素替換為占位元素，得到骨架屏的頁面結構的方法可包括以下步驟：
①從裁剪後的DOM樹中獲取各節點的屬性，屬性包括位置屬性和樣式屬性。
②對所述裁剪後的文檔對象模型樹中的節點進行屬性處理，所述屬性處理包括將各節點的位置屬性確定為占位元素的位置屬性，並將各節點的樣式屬性替換為占位元素的樣式屬性。
圖7示出了本申請一個示例性實施例提供的一種關鍵元素替換為占位元素的示意圖；目標頁面70中的某關鍵元素是文本元素701，對應於DOM樹中的相應節點，其位置屬性可包括：文本元素701距離目標頁面頂端的距離T，距離目標頁面的左側的距離L、文本元素701的寬度W和高度H。那麼在處理過程中，將文本元素701的位置屬性直接賦值給對應的占位元素702，即占位元素702在骨架屏71中的位置屬性包括：占位元素702距離骨架屏頂端的距離T，距離目標頁面的左側的距離L、占位元素702的寬度W和高度H；從圖可以看出，文本元素701及對應的占位元素702具備相同的佈局位置。另外，文本元素701對應的占位元素702的樣式屬性為灰色條紋，那麼可以同時將文本元素701的樣式屬性修改為灰色條紋對應的樣式屬性。
需要特別說明的是，不同類型的頁面元素對應的占位元素的展示效果也不同。小程式的頁面在視圖層可以理解為是由組件樹構成的，該組件樹中的組件可以是小程式所在的客戶端的官方內置組件，也可以是開發者自定義組件。在使用開發者工具對編譯的目標頁面進行預覽時，使用的是目標頁面的邏輯文件，該邏輯文件是html代碼文件，對應DOM樹；各頁面元素的內容是以html標籤的方式被儲存的。但在應用程式中顯示目標頁面時使用的是目標頁面的視圖文件，各頁面元素的內容是以組件標籤的方式被儲存的，對應組件樹，在應用程式中顯示目標頁面時組件的內部結構均被展開，每個組件是組件樹上的一個節點。這就需要針對不同類型的頁面元素進行有針對性的分析處理。圖8示出了本申請一個示例性實施例提供的一種針對不同類型的頁面元素進行處理的流程示意圖，如圖8所示，分析處理的過程包括但不限於：
（1）文本元素的處理，文本元素包括text組件、view組件、cover-view組件等等，將其替換為對應的占位元素，該占位元素呈灰色條紋（如圖9a所示）。下面以一個text組件實例來剖析具體的替換處理過程： text組件的內部結構如下： ＜!-- 原 text 節點 --＞ ＜text＞文本內容＜/text＞ ＜!-- 展開後的 text 節點 --＞ ＜wx-text＞ ＜span id="raw" style="display:none;"＞文本內容＜/span＞ ＜span id="main"＞文本內容＜/span＞ ＜/wx-text＞
原text節點是指DOM樹上的節點。預覽的目標頁面中的文本元素的文本內容是由兩個＜text＞標籤來儲存的，此文本元素的文本內容最終將會寫到目標頁面的視圖文件中的組件標籤之內，具體是寫入至組件樹中id為 raw 和 main 的 span 節點中。因此，在對該文本元素進行占位替換時，需要對其進行解析，一種方式是記錄下DOM樹中的每個 text 節點，並獲取其文本內容，進行DOM樹與組件樹之間的映射，在生成 wxml代碼時將該文本內容進行回填。但這種方式需要知道每個組件的實現細節，處理起來費時費力，效率低。另一種方式是不需要關心組件內部結構，在上述展開組件樹中的 wx-text節點中，可以刪除掉內部節點僅保留文本內容。該文本元素的樣式設置在 wx-text 節點上，這種方式不影響佈局，且處理效率高；具體如下： ＜!-- 刪除內部結構後的 text 節點--＞ ＜wx-text＞文本內容＜/wx-text＞ 然後再將上述處理後的text節點的樣式屬性替換為占位元素的樣式屬性，得到骨架屏中的text節點如下： ＜!-- 骨架屏中 text 節點--＞ ＜text class="sk-transparent sk-text-14-2857-62 sk-text" style="background-size: 100% 1.4rem;"＞文本內容＜/text＞
（2）圖片元素的處理，如image組件、icon組件、cover-image組件、open-data組件的頭像等等，將其替換為對應的占位元素，該占位元素呈灰色矩形或圓形狀（如圖9b所示）。
小程式頁面的視圖文件中的image（圖片）組件並不是由邏輯文件中的img標籤構造的，而是採用背景圖來實現的，因此，在圖片元素處理時，需要將圖片元素的src屬性去除，並添加為該image組件添加占位元素的背景色（灰色）即可實現替換。另外，對於icon組件，可以設置該icon組件的顏色（color）屬性為占位元素的顏色（灰色）來實現替換。
（3）按鈕元素的處理，如button組件或屬性role=button的元素，將其替換為對應的占位元素，該占位元素呈與按鈕形狀相同的形狀（如圖9c所示）。
（4）表單元素的處理，如radio選擇器組件、switch選擇器組件、checkbox選擇器組件等等，將其替換為對應的占位元素，該占位元素呈灰色矩形狀（如圖9d所示）。一種方式是為表單元素添加灰色的背景色，但可能與表單元素（如radio組件）的原有樣式衝突。另一種方式是將表單元素的顏色屬性（color屬性）設置為按鈕元素配置的顏色屬性，並將表單元素的禁用屬性（disabled）進行移除。下面以radio選擇器組件、switch選擇器組件、checkbox選擇器組件實例來剖析具體的替換處理過程： ＜!-- 原 wxml 中選擇器 --＞ ＜radio checked color='#eee'＞＜/radio＞ ＜checkbox checked color='#eee' ＞＜text＞文本內容＜/text＞＜/checkbox＞ ＜switch checked type='checkbox'＞＜/switch＞ ＜!-- 骨架屏 wxml 中選擇器 --＞ ＜radio checked="true" color="#EFEFEF"＞＜/radio＞ ＜checkbox checked="true" color="#EFEFEF"＞＜/checkbox＞ ＜switch checked="true" type="checkbox" color="#EFEFEF"＞＜/switch＞
（5）偽類元素的處理，如::before或者::after等等，將其替換為對應的占位元素，該占位元素呈灰色矩形狀（如圖9e所示）。
（6）原生組件的處理，如camera、live-player、live-pusher、video、map、canvas等等，將其替換為對應的占位元素，該占位元素呈灰色塊（如圖9f所示）。需要注意的是，原生組件層級較高，通常採用cover-view組件替換原生組件實現對原生組件的處理；比如，採用cover-view組件替換camera組件，又如，採用cover-view組件替換live-player等等。
③將屬性處理後的DOM樹轉換為骨架屏的邏輯文件。
④為骨架屏設置配置信息，骨架屏的配置信息用於控制骨架屏的顯示效果；之後，可以根據所述骨架屏的邏輯文件和所述骨架屏的配置信息共同確定所述骨架屏的頁面結構。
圖片元素對應的占位元素、文本元素對應的占位元素和按鈕元素對應的占位元素在骨架屏中是需要被呈現的重要元素，而其他的部分則是相對應不重要的，或是無需關心內部細節的，因此重要元素與非重要元素的呈現效果也可能不同。可以透過骨架屏的配置信息來優化骨架屏的顯示效果，該骨架屏的配置信息可包括多個配置項，如下表1所示： 表1：骨架屏的配置項列表
選項（option） 類型（type） 必填（required） 關鍵字（default） 描述（description）
excludes array No [] 如果有不需要進行骨架處理的元素，那麼將該元素的CSS選擇器寫入該陣列
remove array No [] 不需要生成頁面骨架，且需要從DOM中移除的元素，配置值為移除元素的CSS選擇器
hide array No [] 不需要移除，但是透過設置其透明度為0，來隱藏該元素，配置值為隱藏元素的CSS選擇器
empty array No [] 該陣列中元素是CSS選擇器，被選擇的元素將被清空子元素
grayBlock array No [] 該陣列中元素是CSS選擇器，被選擇的元素將被外掛程式處理成一個色塊。色塊的顏色和按鈕塊顏色一致。內部元素將不再做特殊處理，文字將被隱藏
在處理配置項列表的時候，為了盡可能美觀，可對配置項列表進行了同化處理，後面的子項都是第一個子項的複本或克隆。比如，應用程式的配置項列表不是透過ul/ol標籤來聲明的，因此藉助data-*屬性進行標示。考慮到配置項列表容器內可能插入其它結構，有如下兩種聲明方式：data-skeleton-list的直接子節點將被處理成第一項的複本或克隆；data-skeleton-li屬性相同的元素被認為是同一列表的子項，兩種聲明方式可採用下述程式進行： ＜!-- 方式一：列表容器內容均為列表項 --＞ ＜view wx:for="{{array}}" data-skeleton-list＞ ＜view class="list-item"＞子項內容＜/view＞ ＜/view＞ ＜!-- 方式二：列表容器中插入了其它元素 --＞ ＜view wx:for="{{array}}"＞ ＜view class="other-block"＞其它＜/view＞ ＜view class="list-item" data-skeleton-li="goods"＞子項內容＜/view＞ ＜view class="list-item" data-skeleton-li="goods"＞子項內容＜/view＞ ＜view class="list-item" data-skeleton-li="goods"＞子項內容＜/view＞ ＜/view＞
在一種實施方式中，圖4至圖9f所示實施例中，可以在終端401中儲存生成骨架屏的腳本，該骨架屏的腳本可以為Skeleton.js，終端401透過運行該腳本來對目標頁面的頁面結構進行分析處理，從而生成骨架屏的視圖文件。
本申請實施例中，在對應用程式的目標頁面進行預覽的過程中，獲取被預覽的目標頁面的頁面結構，並在該目標頁面的頁面結構的基礎上直接對頁面元素進行處理得到目標頁面對應的骨架屏的頁面結構；再根據骨架屏的頁面結構生成骨架屏的視圖文件。這個過程是直接透過獲得目標頁面的頁面結構自動生成相應骨架屏的視圖文件，無需為骨架屏單獨編寫代碼，避免代碼入侵，且當目標頁面無論如何變化，透過預覽即可快速生成相應骨架屏的視圖文件，骨架屏的實現過程不僅高效，而且靈活。
圖10示出了本申請一個示例性實施例提供的另一種頁面處理方法的流程圖；該頁面處理方法可如圖4所示系統中的終端401執行，該方法包括但不限於步驟S1001~S1004。其中：
S1001，顯示預覽界面；預覽界面包括應用程式中被預覽的目標頁面；預覽界面中還包括觸發控件。
終端可提供開發者工具，該工具具備預覽功能，能夠提供預覽界面，且該預覽界面中包括觸發控件，該觸發控件可以是一個按鈕，或者是選項入口。舉例來說，圖11示出了本申請一個示例性實施例提供的一種預覽界面的示意圖；圖11中包括被預覽的應用程式的目標頁面1101和觸發控件1102。
S1002，當觸發控件被選定時，會生成目標頁面對應的骨架的視圖文件。
生成骨架屏的具體流程可參見上述圖4至圖9f所示實施例的相關描述，在此不贅述。
S1003，獲取目標頁面的視圖文件，並建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係。
目標頁面的視圖文件包括目標頁面的視圖代碼文件和視圖樣式文件；頁面元素包括靜態資源資料和動態資源資料，目標頁面的視圖文件是根據目標頁面中頁面元素的靜態資源資料生成的。在一種實施方式中，建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係的方法可以包括：將目標頁面的視圖文件與骨架屏的視圖文件儲存至同級路徑目錄下；在目標頁面的視圖代碼文件中引入骨架屏的視圖代碼文件，並在目標頁面的視圖樣式文件中引入骨架屏的視圖樣式文件。例如，目標頁面的視圖文件和骨架屏的視圖文件均位於路徑目錄pages/index/index下，以目標頁面的視圖代碼文件為pages/index/index.wxml，目標頁面的視圖樣式文件為pages/index/index.wxss，骨架屏的視圖代碼文件為index.skeleton.wxml以及骨架屏的視圖樣式文件為index.skeleton.wxss為例，採用導入語句（如include）將骨架屏的視圖代碼文件（index.skeleton.wxml）引入目標頁面的視圖代碼文件（pages/index/index.wxml），以及採用導入語句（如import）將骨架屏的視圖樣式文件（index.skeleton.wxss）引入目標頁面的視圖樣式文件（pages/index/index.wxss），這樣實現建立目標頁面的視圖文件和骨架屏的視圖文件之間的映射關係。
S1004，將具備映射關係的目標頁面的視圖文件和骨架屏的視圖文件打包至應用程式的程式包。
應用程式的程式包中還包括應用程式的配置文件（如配置文件project.config.json）；配置文件中包括目標頁面的配置信息和骨架屏的配置信息；骨架屏的配置信息（如配置信息skeleton-config）用於控制骨架屏的顯示效果。
本申請實施例中，透過預覽界面中的觸發控件即可觸發生成被預覽的目標頁面的對應的骨架屏的視圖文件，建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係；再將具備映射關係的目標頁面的視圖文件和骨架屏的視圖文件打包至應用程式的程式包中。這樣就生成了包含目標頁面的視圖文件和骨架屏的視圖文件的應用程式的程式包，開發者對應用程式的程式包進行發佈之後，應用程式的啟動流程中就引入了骨架屏實現方案，從而優化了應用程式的啟動流程和目標頁面的加載流程，有利於提升用戶對應用程式的使用體驗。
圖12示出了本申請一個示例性實施例提供的另一種頁面處理方法的流程圖；該頁面處理方法可如圖4所示系統中的終端402執行，該方法包括但不限於步驟S1201~S1204。其中：
S1201，從應用程式的程式包中讀取目標頁面的視圖文件及骨架屏的視圖文件，目標頁面的視圖文件與骨架屏的視圖文件具備映射關係；骨架屏的視圖文件是按照圖4至圖9f所示實施例的方法生成的。
S1202，若確定加載目標頁面，在未完成加載目標頁面前，根據骨架屏的視圖文件渲染顯示骨架屏。
S1203，加載目標頁面中的動態資源資料。
S1204，根據目標頁面的視圖文件和加載完成的目標頁面中的動態資源資料，渲染顯示目標頁面，以採用目標頁面替換骨架屏。
應用程式的程式包中包括應用程式的配置文件，配置文件中包括骨架屏的配置信息，骨架屏的配置信息包括骨架屏中的占位元素的顯示配置欄位，占位元素的顯示配置欄位用於指示占位元素在骨架屏中被顯示或被隱藏。另外，頁面元素包括關鍵元素，關鍵元素與骨架屏中的占位元素具有對應的關係，所謂對應關係是指每一個關鍵元素都有與之對應的占位元素，當關鍵元素被替換時，採用與關鍵元素對應的占位元素替換該關鍵元素。
在一種實施方式中，根據目標頁面的視圖文件和加載完成的目標頁面中的動態資源資料，渲染顯示目標頁面，以採用目標頁面替換骨架屏的方法可以包括：按照目標頁面中各關鍵元素的動態資源資料加載完成的時間順序，根據加載完成的關鍵元素的動態資源資料及目標頁面的視圖文件依次渲染並顯示各關鍵元素，以採用目標頁面中的各關鍵元素依次替換骨架屏中對應的各占位元素。具體地，目標頁面中的各個關鍵元素可分別向伺服器發送請求來獲取各個關鍵元素對應的動態資源資料；根據響應請求的響應時間不同，各個關鍵元素對應的動態資源資料加載時間有時間順序；根據目標頁面的視圖文件和各個關鍵元素對應的動態資源資料依次渲染和顯示目標頁面中的各個關鍵元素。換句話說，目標頁面中的各個關鍵元素根據動態資源資料加載完成時間的順序依次替換骨架屏中的占位元素，這樣實現目標頁面中關鍵元素的漸進式加載效果。可以理解的是，漸進式加載效果是可以透過骨架屏的配置信息中setData來控制，例如：聲明data-skeleton-show屬性的占位元素對應的節點會被對應的頁面元素的真實資料替換為hidden（隱藏）屬性，這樣就能實現漸進式加載效果。當然，如果未配置漸時式加載效果，則可以等待目標頁面被完整加載後，採用目標頁面替換骨架屏。
本申請實施例中，在啟動應用程式的過程中，當加載應用程式中的目標頁面時，基於應用程式的程式包中與目標頁面具備映射關係的骨架屏的文件，能夠首先渲染並顯示目標頁面的骨架屏，待目標頁面的內容被加載完成後，再採用目標頁面來替換骨架屏。這個過程能夠有效降低用戶等待的焦灼感，提升應用程式的競爭力和用戶使用體驗。
圖13是本申請一個示例性實施例提供的一種頁面處理裝置的結構示意圖；該頁面處理裝置可以是用於運行於終端401中的一個計算機程式（包括程式代碼），例如該頁面處理裝置可以是運行終端401中的開發者工具；該頁面處理裝置可以用於執行圖5、圖10所示的方法實施例中的部分或全部步驟。請參見圖13，該頁面處理裝置包括如下單元：
預覽單元1301，用於對應用程式中的目標頁面進行預覽；
處理單元1302，用於獲取被預覽的目標頁面的頁面結構，所述目標頁面的頁面結構用於標識所述目標頁面的頁面元素在所述目標頁面中的佈局；在目標頁面的頁面結構的基礎上得到目標頁面對應的骨架屏的頁面結構，所述骨架屏的頁面結構用於標識所述骨架屏的占位元素在所述骨架屏中的佈局，所述占位元素是透過對所述頁面元素進行處理得到的；根據骨架屏的頁面結構生成骨架屏的視圖文件，所述骨架屏用於在未完成加載所述目標頁面前進行展示。
在一種實施方式中，應用程式是免安裝的應用程式，應用程式是指運行於客戶端內的任一個應用程式；當應用程式運行於客戶端內時，客戶端與該應用程式具備父子關係，該客戶端為該應用程式的父程式，而該應用程式為客戶端的子程式；
應用程式包括邏輯層和視圖層，邏輯層的任務在邏輯執行緒中被執行；視圖層的任務在渲染執行緒中被執行；
目標頁面是應用程式中的任一頁面。
在一種實施方式中，頁面元素包括關鍵元素和非關鍵元素；處理單元1302具體用於：
刪除頁面元素中的非關鍵元素；以及，
將關鍵元素替換為占位元素，得到骨架屏的頁面結構；
關鍵元素的類型包括以下任意一種或多種的組合：文本元素、圖片元素、按鈕元素、表單元素、偽類元素和原生組件；占位元素可以為灰色塊。
在一種實施方式中，目標頁面包括邏輯文件和配置信息，目標頁面的頁面結構是由目標頁面的邏輯文件和配置信息共同確定的；
目標頁面的配置信息包括頁面元素的顯示配置欄位，頁面元素的顯示配置欄位用於指示頁面元素在目標頁面中被顯示或被隱藏；
關鍵元素是指位於目標頁面中，且顯示配置欄位用於指示被顯示的頁面元素；非關鍵元素是指目標頁面中除關鍵頁面元素之外的其他頁面元素。
在一種實施方式中，處理單元1302具體用於：
解析目標頁面的邏輯文件，以將目標頁面的邏輯文件轉換為文檔對象模型樹，文檔對象模型樹包括多個節點，每個節點對應目標頁面中的一個頁面元素；
根據目標頁面的配置信息對文檔對象模型樹進行裁剪，去除文檔對象模型樹中與目標頁面中的非關鍵元素相對應的節點。
在一種實施方式中，處理單元1302具體用於：
從裁剪後的文檔對象模型樹中獲取節點的位置屬性和樣式屬性；
對所述裁剪後的文檔對象模型樹中的節點進行屬性處理，所述屬性處理包括將節點的位置屬性確定為占位元素的位置屬性，並將節點的樣式屬性替換為占位元素的樣式屬性；
將屬性處理後的文檔對象模型樹轉換為骨架屏的邏輯文件；
為骨架屏設置配置信息，骨架屏的配置信息用於控制骨架屏的顯示效果；
根據所述骨架屏的邏輯文件和所述骨架屏的配置信息共同確定所述骨架屏的頁面結構。
在一種實施方式中，視圖文件包括視圖代碼文件和視圖樣式文件；所述骨架屏的視圖代碼文件用於描述所述骨架屏的占位元素在所述骨架屏中的佈局位置，所述骨架屏的視圖樣式文件用於描述所述骨架屏的占位元素的樣式。根據本申請的一個實施例，圖13所示的頁面處理裝置中的各個單元可以分別或全部合併為一個或複數個另外的單元來構成，或者其中的某個（些）單元還可以再拆分為功能上更小的多個單元來構成，這可以實現同樣的操作，而不影響本申請的實施例的技術效果的實現。上述單元是基於邏輯功能劃分的，在實際應用中，一個單元的功能也可以由多個單元來實現，或者多個單元的功能由一個單元實現。在本申請的其它實施例中，該頁面處理裝置也可以包括其它單元，在實際應用中，這些功能也可以由其它單元協助實現，並且可以由多個單元協作實現。根據本申請的另一個實施例，可以透過在包括中央處理單元（CPU）、隨機存取儲存媒體（RAM）、唯讀儲存媒體（ROM）等處理元件和儲存元件的例如計算機的通用計算設備上運行能夠執行如圖5、圖10所示的相應方法所涉及的各步驟的計算機程式（包括程式代碼），來構造如圖13中所示的頁面處理裝置，以及來實現本申請實施例的頁面處理方法。計算機程式可以記載於例如計算機可讀記錄媒體上，並透過計算機可讀記錄媒體裝載於上述計算設備中，並在其中運行。
本申請實施例中，在對應用程式的目標頁面進行預覽的過程中，獲取被預覽的目標頁面的頁面結構，並在該目標頁面的頁面結構的基礎上直接對頁面元素進行處理得到目標頁面對應的骨架屏的頁面結構；再根據骨架屏的頁面結構生成骨架屏的視圖文件。這個過程是直接透過獲得目標頁面的頁面結構自動生成相應骨架屏的視圖文件，無需為骨架屏單獨編寫代碼，避免代碼入侵，且當目標頁面無論如何變化，透過預覽即可快速生成相應骨架屏的視圖文件，骨架屏的實現過程不僅高效，而且靈活。
圖14是本申請一個示例性實施例提供的另一種頁面處理裝置的結構示意圖；該頁面處理裝置可以是用於運行於終端401中的一個計算機程式（包括程式代碼），例如該頁面處理裝置可以是運行終端401中的開發者工具；該頁面處理裝置可以用於執行圖5、圖10所示的方法實施例中的部分或全部步驟。請參見圖14，該頁面處理裝置包括如下單元：
顯示單元1401，用於顯示預覽界面，預覽界面中包括應用程式中被預覽的目標頁面；預覽界面中還包括觸發控件；
處理單元1402，用於當觸發控件被選定時，按照前述頁面處理方法生成目標頁面對應的骨架屏的視圖文件；獲取目標頁面的視圖文件，並建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係；將具備映射關係的目標頁面的視圖文件和骨架屏的視圖文件打包至應用程式的程式包中。
在一種實施方式中，視圖文件包括視圖代碼文件和視圖樣式文件；處理單元902具體用於：
將目標頁面的視圖文件與骨架屏的視圖文件儲存至同級路徑目錄下；
在目標頁面的視圖代碼文件中引入骨架屏的視圖代碼文件，並在目標頁面的視圖樣式文件中引入骨架屏的視圖樣式文件；
其中，目標頁面包括頁面元素，頁面元素包括靜態資源資料和動態資源資料，目標頁面的視圖文件是根據目標頁面中頁面元素的靜態資源資料生成的；
應用程式的程式包中還包括應用程式的配置文件；配置文件中包括目標頁面的配置信息和骨架屏的配置信息；骨架屏的配置信息用於控制骨架屏的顯示效果。
根據本申請的一個實施例，圖14所示的頁面處理裝置中的各個單元可以分別或全部合併為一個或複數個另外的單元來構成，或者其中的某個（些）單元還可以再拆分為功能上更小的多個單元來構成，這可以實現同樣的操作，而不影響本申請的實施例的技術效果的實現。上述單元是基於邏輯功能劃分的，在實際應用中，一個單元的功能也可以由多個單元來實現，或者多個單元的功能由一個單元實現。在本申請的其它實施例中，該頁面處理裝置也可以包括其它單元，在實際應用中，這些功能也可以由其它單元協助實現，並且可以由多個單元協作實現。根據本申請的另一個實施例，可以透過在包括中央處理單元（CPU）、隨機存取儲存媒體（RAM）、唯讀儲存媒體（ROM）等處理元件和儲存元件的例如計算機的通用計算設備上運行能夠執行如圖5、圖10所示的相應方法所涉及的各步驟的計算機程式（包括程式代碼），來構造如圖14中所示的頁面處理裝置，以及來實現本申請實施例的頁面處理方法。計算機程式可以記載於例如計算機可讀記錄媒體上，並透過計算機可讀記錄媒體裝載於上述計算設備中，並在其中運行。
本申請實施例中，透過預覽界面中的觸發控件即可觸發生成被預覽的目標頁面的對應的骨架屏的視圖文件，建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係；再將具備映射關係的目標頁面的視圖文件和骨架屏的視圖文件打包至應用程式的程式包中。這樣就生成了包含目標頁面的視圖文件和骨架屏的視圖文件的應用程式的程式包，開發者對應用程式的程式包進行發佈之後，應用程式的啟動流程中就引入了骨架屏實現方案，從而優化了應用程式的啟動流程和目標頁面的加載流程，有利於提升用戶對應用程式的使用體驗。
圖15是本申請一個示例性實施例提供的又一種頁面處理裝置的結構示意圖；該頁面處理裝置可以是用於運行於終端402中的一個計算機程式（包括程式代碼）；例如：該頁面處理裝置可以是終端402中的客戶端（如微信客戶端），應用程式則是運行於該客戶端中的一個應用程式，客戶端與該應用程式具備父子關係，該客戶端為該應用程式的父程式，而該應用程式為該客戶端的子程式；該頁面處理裝置可以用於執行圖12所示的方法實施例中的部分或全部步驟。請參見圖15，該頁面處理裝置包括如下單元：
讀取單元1501，用於從應用程式的程式包中讀取目標頁面的視圖文件及骨架屏的視圖文件，目標頁面的視圖文件與骨架屏的視圖文件具備映射關係；骨架屏的視圖文件按照如前述頁面處理方法生成；
處理單元1502，用於若確定加載所述目標頁面，在未完成加載所述目標頁面前，根據骨架屏的視圖文件渲染顯示骨架屏；以及加載目標頁面中的動態資源資料；以及根據目標頁面的視圖文件和加載完成的目標頁面中的動態資源資料，渲染顯示目標頁面，以採用目標頁面替換骨架屏。
在一種實施方式中，目標頁面包括頁面元素，頁面元素包括靜態資源資料和動態資源資料，目標頁面的視圖文件是根據目標頁面中頁面元素的靜態資源資料生成的；目標頁面中的動態資源資料是指目標頁面中的各頁面元素的動態資源資料；
應用程式的程式包中還包括應用程式的配置文件；配置文件中包括骨架屏的配置信息；骨架屏的配置信息包括骨架屏中的占位元素的顯示配置欄位，占位元素的顯示配置欄位用於指示占位元素在骨架屏中被顯示或被隱藏；目標頁面中包括關鍵元素，關鍵元素與骨架屏中的占位元素具備對應關係；處理單元1502具體用於：
按照目標頁面中各關鍵元素的動態資源資料加載完成的時間順序，根據加載完成的關鍵元素的動態資源資料及目標頁面的視圖文件依次渲染並顯示各關鍵元素，以採用目標頁面中的各關鍵元素依次替換骨架屏中對應的各占位元素。
在該技術方案中，根據各關鍵元素的動態資源資料加載完成的時間順序，依次渲染各個關鍵元素，以實現目標頁面中的各個關鍵元素依次替換骨架屏中對應的各個占位元素。這樣可實現目標頁面中的頁面元素的漸進式加載效果。
根據本申請的一個實施例，圖15所示的頁面處理裝置中的各個單元可以分別或全部合併為一個或複數個另外的單元來構成，或者其中的某個（些）單元還可以再拆分為功能上更小的多個單元來構成，這可以實現同樣的操作，而不影響本申請的實施例的技術效果的實現。上述單元是基於邏輯功能劃分的，在實際應用中，一個單元的功能也可以由多個單元來實現，或者多個單元的功能由一個單元實現。在本申請的其它實施例中，該頁面處理裝置也可以包括其它單元，在實際應用中，這些功能也可以由其它單元協助實現，並且可以由多個單元協作實現。根據本申請的另一個實施例，可以透過在包括中央處理單元（CPU）、隨機存取儲存媒體（RAM）、唯讀儲存媒體（ROM）等處理元件和儲存元件的例如計算機的通用計算設備上運行能夠執行如圖12所示的相應方法所涉及的各步驟的計算機程式（包括程式代碼），來構造如圖15中所示的頁面處理裝置，以及來實現本申請實施例的頁面處理方法。計算機程式可以記載於例如計算機可讀記錄媒體上，並透過計算機可讀記錄媒體裝載於上述計算設備中，並在其中運行。
本申請實施例中，在啟動應用程式的過程中，當加載應用程式中的目標頁面時，基於應用程式的程式包中與目標頁面具備映射關係的骨架屏的文件，能夠首先渲染並顯示目標頁面的骨架屏，待目標頁面的內容被加載完成後，再採用目標頁面來替換骨架屏。這個過程能夠有效降低用戶等待的焦灼感，提升應用程式的競爭力和用戶使用體驗。
圖16示出了本申請一個示例性實施例提供的一種頁面處理設備的結構示意圖。請參見圖16，該頁面處理設備，包括處理器1601、通信連接埠1602以及計算機可讀儲存媒體1603。其中，處理器1601、通信連接埠1602以及計算機可讀儲存媒體1603可透過匯流排或者其它方式連接。其中，通信連接埠1602用於接收和發送資料。計算機可讀儲存媒體1603可以儲存在頁面處理設備的儲存器中，計算機可讀儲存媒體1603用於儲存計算機程式，計算機程式包括程式指令，處理器1601用於執行計算機可讀儲存媒體1603儲存的程式指令。處理器1601（或稱CPU（Central Processing Unit，中央處理器））是頁面處理設備的計算核心以及控制核心，其適於實現一條或多條指令，具體適於加載並執行一條或多條指令從而實現相應方法流程或相應功能。
本申請實施例還提供了一種計算機可讀儲存媒體（Memory），計算機可讀儲存媒體是頁面處理設備中的記憶設備，用於存放程式和資料。可以理解的是，此處的計算機可讀儲存媒體既可以包括頁面處理設備中的內置儲存媒體，當然也可以包括頁面處理設備所支持的擴展儲存媒體。計算機可讀儲存媒體提供儲存空間，該儲存空間儲存了頁面處理設備的處理系統。並且，在該儲存空間中還存放了適於被處理器1601加載並執行的一條或多條的指令，這些指令可以是一個或多個的計算機程式（包括程式代碼）。需要說明的是，此處的計算機可讀儲存媒體可以是高速RAM儲存器，也可以是非不穩定的儲存器（non-volatile memory），例如至少一個磁碟儲存器；可選的還可以是至少一個位於遠離前述處理器的計算機可讀儲存媒體。
在一個實施例中，該頁面處理設備可以是圖4所示的終端401；該計算機可讀儲存媒體中儲存有一條或多條第一指令；由處理器1601加載並執行計算機可讀儲存媒體中存放的一條或多條第一指令，以實現上述頁面處理方法實施例中的相應步驟；具體實現中，計算機可讀儲存媒體中的一條或多條第一指令由處理器1601加載並執行如下步驟：
對應用程式中的目標頁面進行預覽；
獲取被預覽的目標頁面的頁面結構，所述目標頁面的頁面結構用於標識所述目標頁面的頁面元素在所述目標頁面中的佈局；
在目標頁面的頁面結構的基礎上得到目標頁面對應的骨架屏的頁面結構，所述骨架屏的頁面結構用於標識所述骨架屏的占位元素在所述骨架屏中的佈局，所述占位元素是透過對所述頁面元素進行處理得到的；
根據骨架屏的頁面結構生成骨架屏的視圖文件，所述骨架屏用於在未完成加載所述目標頁面前進行展示。
在一種實施方式中，應用程式是免安裝的應用程式，應用程式是指運行於客戶端內的任一個應用程式；當應用程式運行於客戶端內時，客戶端與應用程式具備父子關係，客戶端為應用程式的父程式，而應用程式為客戶端的子程式；
應用程式包括邏輯層和視圖層，邏輯層的任務在邏輯執行緒中被執行；視圖層的任務在渲染執行緒中被執行；
目標頁面是應用程式中的任一頁面。
在一種實施方式中，頁面元素包括關鍵元素和非關鍵元素；計算機可讀儲存媒體中的一條或多條第一指令由處理器1601加載並在執行在目標頁面的頁面結構的基礎上，對頁面元素進行處理得到目標頁面對應的骨架屏的頁面結構時，具體執行如下步驟：
刪除頁面元素中的非關鍵元素；以及，
將關鍵元素替換為占位元素，得到骨架屏的頁面結構；
關鍵元素的類型包括以下任意一種或多種的組合：文本元素、圖片元素、按鈕元素、表單元素、偽類元素和原生組件。
在一種實施方式中，目標頁面包括邏輯文件和配置信息，目標頁面的頁面結構是由目標頁面的邏輯文件和配置信息共同確定的；
目標頁面的配置信息包括頁面元素的顯示配置欄位，頁面元素的顯示配置欄位用於指示頁面元素在目標頁面中被顯示或被隱藏；
關鍵元素是指位於目標頁面中，且顯示配置欄位用於指示被顯示的頁面元素；非關鍵元素是指目標頁面中除關鍵頁面元素之外的其他頁面元素。
在一種實施方式中，計算機可讀儲存媒體中的一條或多條第一指令由處理器1601加載並在執行刪除目標頁面中的非關鍵元素時，具體執行如下步驟：
解析目標頁面的邏輯文件，以將目標頁面的邏輯文件轉換為文檔對象模型樹，文檔對象模型樹包括多個節點，每個節點對應目標頁面中的一個頁面元素；
根據目標頁面的配置信息對文檔對象模型樹進行裁剪，去除文檔對象模型樹中與目標頁面中的非關鍵元素相對應的節點。
在一種實施方式中，裁剪後的文檔對象模型樹中僅包含與目標頁面中的關鍵元素相對應的節點；
計算機可讀儲存媒體中的一條或多條第一指令由處理器1601加載並在執行將目標頁面中的關鍵元素替換為占位元素，得到骨架屏的頁面結構時，具體執行如下步驟：
從裁剪後的文檔對象模型樹中獲取各節點的位置屬性和樣式屬性；
對所述裁剪後的文檔對象模型樹中的節點進行屬性處理，所述屬性處理包括將各節點的位置屬性確定為占位元素的位置屬性，並將各節點的樣式屬性替換為占位元素的樣式屬性；
將屬性處理後的文檔對象模型樹轉換為骨架屏的邏輯文件；
為骨架屏設置配置信息，骨架屏的配置信息用於控制骨架屏的顯示效果；
根據所述骨架屏的邏輯文件和所述骨架屏的配置信息共同確定所述骨架屏的頁面結構。
在一種實施方式中，視圖文件包括視圖代碼文件和視圖樣式文件，所述骨架屏的視圖代碼文件用於描述所述骨架屏的占位元素在所述骨架屏中的佈局位置，所述骨架屏的視圖樣式文件用於描述所述骨架屏的占位元素的樣式；
本申請實施例中，在對應用程式的目標頁面進行預覽的過程中，獲取被預覽的目標頁面的頁面結構，並在該目標頁面的頁面結構的基礎上直接對頁面元素進行處理得到目標頁面對應的骨架屏的頁面結構；再根據骨架屏的頁面結構生成骨架屏的視圖文件。這個過程是直接透過獲得目標頁面的頁面結構自動生成相應骨架屏的視圖文件，無需為骨架屏單獨編寫代碼，避免代碼入侵，且當目標頁面無論如何變化，透過預覽即可快速生成相應骨架屏的視圖文件，骨架屏的實現過程不僅高效，而且靈活。
在另一個實施例中，該頁面處理設備可以是圖4所示的終端401；該計算機可讀儲存媒體中儲存有一條或多條第二指令；由處理器1601加載並執行計算機可讀儲存媒體中存放的一條或多條第二指令，以實現上述頁面處理方法實施例中的相應步驟；具體實現中，計算機可讀儲存媒體中的一條或多條第二指令由處理器1601加載並執行如下步驟：
顯示預覽界面，預覽界面中包括應用程式中被預覽的目標頁面；預覽界面中還包括觸發控件；
當觸發控件被選定時，前述頁面處理方法生成目標頁面對應的骨架屏的視圖文件；
獲取目標頁面的視圖文件，並建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係；
將具備映射關係的目標頁面的視圖文件和骨架屏的視圖文件打包至應用程式的程式包中。
在一種實施方式中，視圖文件包括視圖代碼文件和視圖樣式文件；
計算機可讀儲存媒體中的一條或多條第二指令由處理器1601加載並在執行建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係時，具體執行如下步驟：
將目標頁面的視圖文件與骨架屏的視圖文件儲存至同級路徑目錄下；
在目標頁面的視圖代碼文件中引入骨架屏的視圖代碼文件，並在目標頁面的視圖樣式文件中引入骨架屏的視圖樣式文件；
其中，目標頁面包括頁面元素，頁面元素包括靜態資源資料和動態資源資料，目標頁面的視圖文件是根據目標頁面中頁面元素的靜態資源資料生成的；
應用程式的程式包中還包括應用程式的配置文件；配置文件中包括目標頁面的配置信息和骨架屏的配置信息；骨架屏的配置信息用於控制骨架屏的顯示效果。
本申請實施例中，透過預覽界面中的觸發控件即可觸發生成被預覽的目標頁面的對應的骨架屏的視圖文件，建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係；再將具備映射關係的目標頁面的視圖文件和骨架屏的視圖文件打包至應用程式的程式包中。這樣就生成了包含目標頁面的視圖文件和骨架屏的視圖文件的應用程式的程式包，開發者對應用程式的程式包進行發佈之後，應用程式的啟動流程中就引入了骨架屏實現方案，從而優化了應用程式的啟動流程和目標頁面的加載流程，有利於提升用戶對應用程式的使用體驗。
在又一個實施例中，該頁面處理設備可以是圖4所示的終端402；該計算機可讀儲存媒體中儲存有一條或多條第三指令；由處理器1601加載並執行計算機可讀儲存媒體中存放的一條或多條第三指令，以實現上述頁面處理方法實施例中的相應步驟；具體實現中，計算機可讀儲存媒體中的一條或多條第三指令由處理器1601加載並執行如下步驟：
從應用程式的程式包中讀取目標頁面的視圖文件及骨架屏的視圖文件，目標頁面的視圖文件與骨架屏的視圖文件具備映射關係；骨架屏的視圖文件按照前述頁面處理方法生成；
若確定加載所述目標頁面，在未完成加載所述目標頁面前，根據骨架屏的視圖文件渲染顯示骨架屏；
加載目標頁面中的動態資源資料；
根據目標頁面的視圖文件和加載完成的目標頁面中的動態資源資料，渲染顯示目標頁面，以採用目標頁面替換骨架屏。
在一種實施方式中，目標頁面包括頁面元素，頁面元素包括靜態資源資料和動態資源資料，目標頁面的視圖文件是根據目標頁面中頁面元素的靜態資源資料生成的；目標頁面中的動態資源資料是指目標頁面中的各頁面元素的動態資源資料；
應用程式的程式包中還包括應用程式的配置文件；配置文件中包括骨架屏的配置信息；骨架屏的配置信息包括骨架屏中的占位元素的顯示配置欄位，占位元素的顯示配置欄位用於指示占位元素在骨架屏中被顯示或被隱藏；目標頁面中包括關鍵元素，關鍵元素與骨架屏中的占位元素具備對應關係；
計算機可讀儲存媒體中的一條或多條第三指令由處理器1601加載並在執行根據目標頁面的視圖文件和加載完成的目標頁面中的動態資源資料，渲染顯示目標頁面，以採用目標頁面替換骨架屏時，具體執行如下步驟：
本申請實施例還提供了一種包括指令的計算機程式產品，當其在計算機上運行時，使得計算機執行上述實施例提供的方法。
按照目標頁面中各關鍵元素的動態資源資料加載完成的時間順序，根據加載完成的關鍵元素的動態資源資料及目標頁面的視圖文件依次渲染並顯示各關鍵元素，以採用目標頁面中的各關鍵元素依次替換骨架屏中對應的各占位元素。
本申請實施例中，在啟動應用程式的過程中，當加載應用程式中的目標頁面時，基於應用程式的程式包中與目標頁面具備映射關係的骨架屏的文件，能夠首先渲染並顯示目標頁面的骨架屏，待目標頁面的內容被加載完成後，再採用目標頁面來替換骨架屏。這個過程能夠有效降低用戶等待的焦灼感，提升應用程式的競爭力和用戶使用體驗。
所屬技術領域具有通常知識者可以意識到，結合本申請中所公開的實施例描述的各示例的單元及算法步驟，能夠以電子硬體、或者計算機軟體和電子硬體的結合來實現。這些功能究竟以硬體還是軟體方式來執行，取決於技術方案的特定應用和設計約束條件。專業技術人員可以對每個特定的應用，使用不同方法來實現所描述的功能，但是這種實現不應認為超出本申請的範圍。
在上述實施例中，可以全部或部分地透過軟體、硬體、韌體或者其任意組合來實現。當使用軟體實現時，可以全部或部分地以計算機程式產品的形式實現。計算機程式產品包括一個或多個計算機指令。在計算機上加載和執行計算機程式指令時，全部或部分地產生按照本申請實施例的流程或功能。計算機可以是通用計算機、專用計算機、計算機網路、或者其他可編程設備。計算機指令可以儲存在計算機可讀儲存媒體中，或者透過計算機可讀儲存媒體進行傳輸。計算機指令可以從一個網站站點、計算機、伺服器或資料中心透過有線（例如，同軸電纜、光纖、數位用戶線（DSL））或無線（例如，紅外、無線、微波等）方式向另一個網站站點、計算機、伺服器或資料中心進行傳輸。計算機可讀儲存媒體可以是計算機能夠存取的任何可用媒體或者是包含一個或多個可用媒體集成的伺服器、資料中心等資料儲存設備。可用媒體可以是磁性媒體(例如，軟碟、硬碟、磁帶)、光媒體(例如，DVD)、或者半導體媒體（例如，固態硬碟(Solid State Disk，SSD)）等。
以上所述，僅為本申請的具體實施方式，但本申請的保護範圍並不局限於此，任何熟悉本技術領域的技術人員在本申請揭露的技術範圍內，可輕易想到變化或替換，都應涵蓋在本申請的保護範圍之內。因此，本申請的保護範圍應以申請專利範圍界定的保護範圍為準。
30:目標頁面 31:骨架屏 301:按鍵元素 302:圖片元素 303:文本元素 304:占位元素 305:占位元素 306:占位元素 401:終端 402:終端 403:伺服器 S501~S504:步驟 601:方框 70:目標頁面 71:骨架屏 701:文本元素 702:占位元素 S1001~S1004:步驟 1101:目標頁面 1102:觸發控件 S1201~S1204:步驟 1301:預覽單元 1302:處理單元 1401:顯示單元 1402:處理單元 1501:讀取單元 1502:處理單元 1601:處理器 1602:通信連接埠 1603:計算機可讀儲存媒體
為了更清楚地說明本申請實施例技術方案，下面將對實施例描述中所需要使用的圖式作簡單地介紹，顯而易見地，下面描述中的圖式是本申請的一些實施例，對於所屬技術領域具有通常知識者來講，在不付出創造性勞動的前提下，還可以根據這些圖式獲得其他的圖式。 [圖1]示出了相關技術中的Loading頁的示意圖； [圖2]示出了本申請一個示例性實施例提供的一種應用程式的啟動流程的示意圖； [圖3]示出了本申請一個示例性實施例提供的一種骨架屏的示意圖； [圖4]示出了本申請一個示例性實施例提供的一種頁面處理系統的結構示意圖； [圖5]示出了本申請一個示例性實施例提供的一種頁面處理方法的流程示意圖； [圖6]示出了本申請一個示例性實施例提供的一種文檔對象模型樹的示意圖； [圖7]示出了本申請一個示例性實施例提供的一種關鍵元素替換為占位元素的示意圖； [圖8]示出了本申請一個示例性實施例提供的一種針對不同類型的頁面元素進行處理的流程示意圖； [圖9a]示出了本申請一個示例性實施例提供的一種文本元素替換為占位元素的示意圖； [圖9b]示出了本申請一個示例性實施例提供的一種圖片元素替換為占位元素的示意圖； [圖9c]示出了本申請一個示例性實施例提供的一種按鈕元素替換為占位元素的示意圖； [圖9d]示出了本申請一個示例性實施例提供的一種表單元素替換為占位元素的示意圖； [圖9e]示出了本申請一個示例性實施例提供的一種偽類元素替換為占位元素的示意圖； [圖9f]示出了本申請一個示例性實施例提供的一種原生組件替換為占位元素的示意圖； [圖10]示出了本申請一個示例性實施例提供的另一種頁面處理方法的流程圖； [圖11]示出了本申請一個示例性實施例提供的一種預覽界面的示意圖； [圖12]示出了本申請一個示例性實施例提供的另一種頁面處理方法的流程圖； [圖13]示出了本申請一個示例性實施例提供的一種頁面處理裝置的結構示意圖； [圖14]示出了本申請一個示例性實施例提供的另一種頁面處理裝置的結構示意圖； [圖15]示出了本申請一個示例性實施例提供的又一種頁面處理裝置的結構示意圖； [圖16]示出了本申請一個示例性實施例提供的一種頁面處理設備的結構示意圖。
S501~S504:步驟

Claims (17)

  1. 一種頁面處理方法，所述方法由終端執行，所述方法包括： 對應用程式中的目標頁面進行預覽； 獲取被預覽的所述目標頁面的頁面結構，所述目標頁面的頁面結構用於標識所述目標頁面的頁面元素在所述目標頁面中的佈局； 在所述目標頁面的頁面結構的基礎上得到所述目標頁面對應的骨架屏的頁面結構，所述骨架屏的頁面結構用於標識所述骨架屏的占位元素在所述骨架屏中的佈局，所述占位元素是透過對所述頁面元素進行處理得到的；以及 根據所述骨架屏的頁面結構生成所述骨架屏的視圖文件，所述骨架屏用於在未完成加載所述目標頁面前進行展示。
  2. 如請求項1所述的方法，其中所述應用程式是免安裝的應用程式，所述應用程式是指運行於客戶端內的任一個應用程式；當所述應用程式運行於客戶端內時，所述客戶端與所述應用程式具備父子關係，所述客戶端為所述應用程式的父程式，而所述應用程式為所述客戶端的子程式； 所述應用程式包括邏輯層和視圖層，所述邏輯層的任務在邏輯執行緒中被執行；所述視圖層的任務在渲染執行緒中被執行；以及 所述目標頁面是所述應用程式中的任一頁面。
  3. 如請求項1所述的方法，其中所述頁面元素包括關鍵元素和非關鍵元素；所述在所述目標頁面的頁面結構的基礎上得到所述目標頁面對應的骨架屏的頁面結構，包括： 刪除所述頁面元素中的非關鍵元素；以及 將所述關鍵元素替換為所述占位元素，得到所述骨架屏的頁面結構， 其中所述關鍵元素的類型包括以下任意一種或多種的組合：文本元素、圖片元素、按鈕元素、表單元素、偽類元素和原生組件。
  4. 如請求項3所述的方法，其中所述目標頁面包括邏輯文件和配置信息，所述目標頁面的頁面結構是由所述目標頁面的邏輯文件和配置信息共同確定的； 所述目標頁面的配置信息包括頁面元素的顯示配置欄位，所述頁面元素的顯示配置欄位用於指示頁面元素在所述目標頁面中被顯示或被隱藏；以及 所述關鍵元素包括位於所述目標頁面中，且顯示配置欄位用於指示被顯示的頁面元素；所述非關鍵元素包括所述目標頁面中除所述關鍵頁面元素之外的其他頁面元素。
  5. 如請求項4所述的方法，其中所述刪除所述頁面元素中的非關鍵元素，包括： 解析所述目標頁面的邏輯文件，以將所述目標頁面的邏輯文件轉換為文檔對象模型樹，所述文檔對象模型樹包括多個節點，一個節點對應所述目標頁面中的一個頁面元素；以及 根據所述目標頁面的配置信息對所述文檔對象模型樹進行裁剪，去除所述文檔對象模型樹中與所述非關鍵元素相對應的節點。
  6. 如請求項5所述的方法，其中所述將所述關鍵元素替換為所述占位元素，得到所述骨架屏的頁面結構，包括： 從所述裁剪後的文檔對象模型樹中獲取節點的位置屬性和樣式屬性； 對所述裁剪後的文檔對象模型樹中的節點進行屬性處理，所述屬性處理包括將所述節點的位置屬性確定為所述占位元素的位置屬性，並將所述節點的樣式屬性替換為所述占位元素的樣式屬性； 將屬性處理後的文檔對象模型樹轉換為所述骨架屏的邏輯文件； 為所述骨架屏設置配置信息，所述骨架屏的配置信息用於控制所述骨架屏的顯示效果；以及 根據所述骨架屏的邏輯文件和所述骨架屏的配置信息共同確定所述骨架屏的頁面結構。
  7. 如請求項1至6任一項所述的方法，其中所述視圖文件包括視圖代碼文件和視圖樣式文件；所述骨架屏的視圖代碼文件用於描述所述骨架屏的占位元素在所述骨架屏中的佈局位置，所述骨架屏的視圖樣式文件用於描述所述骨架屏的占位元素的樣式。
  8. 一種頁面處理方法，所述方法由終端執行，所述方法包括： 顯示預覽界面，所述預覽界面中包括應用程式中被預覽的目標頁面；所述預覽界面中還包括觸發控件； 當所述觸發控件被選定時，按照如請求項1至7任一項所述的方法生成所述目標頁面對應的骨架屏的視圖文件； 獲取所述目標頁面的視圖文件，並建立所述目標頁面的視圖文件與所述骨架屏的視圖文件之間的映射關係；以及 將具備所述映射關係的所述目標頁面的視圖文件和所述骨架屏的視圖文件打包至所述應用程式的程式包中。
  9. 如請求項8所述的方法，其中所述視圖文件包括視圖代碼文件和視圖樣式文件；所述建立所述目標頁面的視圖文件與所述骨架屏的視圖文件之間的映射關係，包括： 將所述目標頁面的視圖文件與所述骨架屏的視圖文件儲存至同級路徑目錄下；以及 在所述目標頁面的視圖代碼文件中引入所述骨架屏的視圖代碼文件，並在所述目標頁面的視圖樣式文件中引入所述骨架屏的視圖樣式文件； 其中，所述目標頁面包括頁面元素，所述頁面元素包括靜態資源資料和動態資源資料，所述目標頁面的視圖文件是根據所述目標頁面中頁面元素的靜態資源資料生成的； 其中，所述應用程式的程式包中還包括所述應用程式的配置文件；所述配置文件中包括所述目標頁面的配置信息和所述骨架屏的配置信息；所述骨架屏的配置信息用於控制所述骨架屏的顯示效果。
  10. 一種頁面處理方法，所述方法由終端執行，所述方法包括： 從應用程式的程式包中讀取目標頁面的視圖文件及骨架屏的視圖文件，所述目標頁面的視圖文件與所述骨架屏的視圖文件具備映射關係；所述骨架屏的視圖文件按照如請求項1至7任一項所述的方法生成； 若確定加載所述目標頁面，在未完成加載所述目標頁面前，根據所述骨架屏的視圖文件渲染顯示所述骨架屏； 加載所述目標頁面中的動態資源資料；以及 根據所述目標頁面的視圖文件和加載完成的所述目標頁面中的動態資源資料，渲染顯示所述目標頁面，以透過所述目標頁面替換所述骨架屏。
  11. 如請求項10所述的方法，其中所述目標頁面包括頁面元素，所述頁面元素包括靜態資源資料和動態資源資料，所述目標頁面的視圖文件是根據所述目標頁面中頁面元素的靜態資源資料生成的；所述目標頁面中的動態資源資料是指所述目標頁面中的各頁面元素的動態資源資料； 所述應用程式的程式包中還包括所述應用程式的配置文件；所述配置文件中包括所述骨架屏的配置信息；所述骨架屏的配置信息包括所述骨架屏中的占位元素的顯示配置欄位，所述占位元素的顯示配置欄位用於指示占位元素在所述骨架屏中被顯示或被隱藏；所述目標頁面中包括關鍵元素，所述關鍵元素與所述骨架屏中的占位元素具備對應關係；以及 所述根據所述目標頁面的視圖文件和加載完成的所述目標頁面中的動態資源資料，渲染顯示所述目標頁面，以透過所述目標頁面替換所述骨架屏，包括： 按照所述目標頁面中所述關鍵元素的動態資源資料加載完成的時間順序，根據加載完成的所述關鍵元素的動態資源資料及所述目標頁面的視圖文件依次渲染並顯示所述關鍵元素，以採用所述目標頁面中的所述關鍵元素依次替換所述骨架屏中對應的所述占位元素。
  12. 一種頁面處理裝置，包括： 預覽單元，用於對應用程式中的目標頁面進行預覽；以及 處理單元，用於獲取被預覽的所述目標頁面的頁面結構，所述目標頁面的頁面結構用於標識所述目標頁面的頁面元素在所述目標頁面中的佈局；在目標頁面的頁面結構的基礎上得到目標頁面對應的骨架屏的頁面結構，所述骨架屏的頁面結構用於標識所述骨架屏的占位元素在所述骨架屏中的佈局，所述占位元素是透過對所述頁面元素進行處理得到的；根據骨架屏的頁面結構生成骨架屏的視圖文件，所述骨架屏用於在未完成加載所述目標頁面前進行展示。
  13. 一種頁面處理裝置，包括： 顯示單元，用於顯示預覽界面，預覽界面中包括應用程式中被預覽的目標頁面；預覽界面中還包括觸發控件；以及 處理單元，用於當觸發控件被選定時，按照如請求項1至7任一項所述的頁面處理方法生成骨架屏的視圖文件；獲取目標頁面的視圖文件，並建立目標頁面的視圖文件與骨架屏的視圖文件之間的映射關係；以及將具備所述映射關係的目標頁面的視圖文件和骨架屏的視圖文件打包至應用程式的程式包中。
  14. 一種頁面處理裝置，包括： 讀取單元，用於從應用程式的程式包中讀取目標頁面的視圖文件及骨架屏的視圖文件，目標頁面的視圖文件與骨架屏的視圖文件具備映射關係；骨架屏的視圖文件按照如請求項1至7任一項所述的頁面處理方法生成；以及 處理單元，用於若確定加載所述目標頁面，在未完成加載所述目標頁面前，根據骨架屏的視圖文件渲染顯示骨架屏；加載目標頁面中的動態資源資料；以及根據目標頁面的視圖文件和加載完成的目標頁面中的動態資源資料，渲染顯示目標頁面，以透過目標頁面替換骨架屏。
  15. 一種頁面處理設備，包括： 處理器，適於實現一條或多條指令；以及 計算機可讀儲存媒體，儲存有一條或多條第一指令，所述一條或多條第一指令適於由所述處理器加載並執行如請求項1至7任一項所述的頁面處理方法；或者，儲存有一條或多條第二指令，所述一條或多條第二指令適於由所述處理器加載並執行如請求項8或9所述的頁面處理方法；或者，儲存有一條或多條第三指令，所述一條或多條第三指令適於由所述處理器加載並執行如請求項10或11所述的頁面處理方法。
  16. 一種儲存媒體，所述儲存媒體用於儲存計算機程式，所述計算機程式用於執行請求項1至7任意一項所述的頁面處理方法，或者用於執行請求項8或9所述的頁面處理方法，或者用於執行請求項10或11所述的頁面處理方法。
  17. 一種包括指令的計算機程式產品，當其在計算機上運行時，使得所述計算機執行請求項1至7任意一項所述的頁面處理方法，或者執行請求項8或9所述的頁面處理方法，或者執行請求項10或11所述的頁面處理方法。
TW110109219A 2020-04-27 2021-03-15 頁面處理方法、裝置、設備及儲存媒體 TWI808393B (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010343611.1A CN111552473B (zh) 2020-04-27 2020-04-27 一种应用程序的处理方法、装置及设备
CN202010343611.1 2020-04-27

Publications (2)

Publication Number Publication Date
TW202141300A true TW202141300A (zh) 2021-11-01
TWI808393B TWI808393B (zh) 2023-07-11

Family

ID=72003074

Family Applications (1)

Application Number Title Priority Date Filing Date
TW110109219A TWI808393B (zh) 2020-04-27 2021-03-15 頁面處理方法、裝置、設備及儲存媒體

Country Status (4)

Country Link
US (1) US20220253588A1 (zh)
CN (1) CN111552473B (zh)
TW (1) TWI808393B (zh)
WO (1) WO2021218327A1 (zh)

Families Citing this family (22)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111552473B (zh) * 2020-04-27 2024-02-09 腾讯科技（深圳）有限公司 一种应用程序的处理方法、装置及设备
CN112100543B (zh) * 2020-08-31 2023-10-27 东软集团股份有限公司 渲染网页的方法、装置、存储介质及电子设备和服务器
CN113760274B (zh) * 2020-09-04 2023-11-03 北京京东振世信息技术有限公司 一种前端组件逻辑注入方法和装置
CN112286525A (zh) * 2020-09-25 2021-01-29 长沙市到家悠享网络科技有限公司 骨架屏生成方法、装置及设备
CN112052064B (zh) * 2020-09-28 2024-04-09 深圳前海微众银行股份有限公司 小程序页面跳转方法、装置、设备与计算机可读存储介质
CN112199616A (zh) * 2020-10-09 2021-01-08 深圳市欢太科技有限公司 网页性能评估方法、装置、设备及存储介质
CN112307385A (zh) * 2020-10-22 2021-02-02 北京达佳互联信息技术有限公司 网页数据加载和处理方法、装置、电子设备及存储介质
CN112487338A (zh) * 2020-12-11 2021-03-12 杭州安恒信息技术股份有限公司 一种网页页面的fmp的确定方法、装置、设备及介质
CN112506581B (zh) * 2020-12-17 2024-03-22 北京百度网讯科技有限公司 渲染小程序的方法、装置、电子设备和可读存储介质
CN112540806B (zh) * 2020-12-25 2023-06-23 北京百度网讯科技有限公司 一种小程序页面渲染方法、装置、电子设备及存储介质
CN112905922A (zh) * 2021-01-26 2021-06-04 北京达佳互联信息技术有限公司 页面加载方法、装置、电子设备、存储介质及程序产品
CN113076504B (zh) * 2021-06-03 2021-10-01 北京达佳互联信息技术有限公司 骨架屏生成方法、装置、设备、存储介质
CN113691865A (zh) * 2021-08-24 2021-11-23 京东方科技集团股份有限公司 一种多媒体播放方法及系统
CN113849247B (zh) * 2021-09-26 2024-04-30 上海哔哩哔哩科技有限公司 直播间页面元素的显示方法、装置及系统
CN114035865B (zh) * 2021-11-11 2022-10-21 北京百度网讯科技有限公司 启动小程序的方法、装置、设备以及存储介质
CN114090118B (zh) * 2021-11-11 2023-09-15 北京百度网讯科技有限公司 启动小程序的方法、装置、设备以及存储介质
CN114237755A (zh) * 2021-12-20 2022-03-25 百度在线网络技术（北京）有限公司 应用运行方法、装置、电子设备以及存储介质
CN116738087A (zh) * 2022-03-01 2023-09-12 腾讯科技（深圳）有限公司 数据处理方法、装置、程序产品、计算机设备和介质
CN115080027B (zh) * 2022-08-24 2023-01-06 深圳市信润富联数字科技有限公司 web页面自动适配方法、装置、设备及存储介质
CN115756449B (zh) * 2022-12-02 2023-06-06 之江实验室 一种页面复用方法、装置、存储介质及电子设备
CN115809652B (zh) * 2023-01-28 2023-05-23 北京蓝色星际科技股份有限公司 自动合成红头文件的方法及装置
CN116151191B (zh) * 2023-04-18 2023-06-16 武汉精臣智慧标识科技有限公司 一种数据渲染方法、系统、电子设备及存储介质

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7934163B2 (en) * 2003-02-28 2011-04-26 Oracle International Corporation Method for portlet instance support in a graphical user interface
US10452723B2 (en) * 2016-10-27 2019-10-22 Micro Focus Llc Detecting malformed application screens
CN110110263B (zh) * 2019-05-13 2020-07-28 北京三快在线科技有限公司 网页显示方法、装置、终端及存储介质
CN110187913B (zh) * 2019-05-17 2023-06-09 北京百度网讯科技有限公司 小程序的发布、运行方法和装置
CN110187878A (zh) * 2019-05-29 2019-08-30 北京三快在线科技有限公司 一种页面生成方法和装置
CN110377285B (zh) * 2019-07-23 2023-10-03 腾讯科技（深圳）有限公司 一种生成页面骨架屏的方法、装置及计算机设备
CN110990014B (zh) * 2019-12-12 2023-10-20 深圳市卡牛科技有限公司 骨架屏页面代码的生成方法、装置、服务器及存储介质
CN111552473B (zh) * 2020-04-27 2024-02-09 腾讯科技（深圳）有限公司 一种应用程序的处理方法、装置及设备

Also Published As

Publication number Publication date
TWI808393B (zh) 2023-07-11
CN111552473A (zh) 2020-08-18
WO2021218327A1 (zh) 2021-11-04
CN111552473B (zh) 2024-02-09
US20220253588A1 (en) 2022-08-11

Similar Documents

Publication Publication Date Title
WO2021218327A1 (zh) 一种页面处理方法和相关装置
CN111045655B (zh) 一种页面渲染的方法、装置、渲染服务器和存储介质
JP4812337B2 (ja) フォームタイプを使用してフォームを生成する方法および装置
CN105511873B (zh) 用户界面控件展示方法及装置
US20150286739A1 (en) Html5-protocol-based webpage presentation method and device
JP2015534145A (ja) 宣言テンプレートを使用してコントロールをスタンプアウトするためのユーザインターフェイスコントロールフレームワーク
US20080303826A1 (en) Methods and Systems for Animating Displayed Representations of Data Items
CN114489647A (zh) 一种小程序的组件化构建方法、装置、设备和介质
CN112306486B (zh) 一种界面生成方法、装置、服务器及存储介质
CN117093316B (zh) 一种跨平台页面渲染系统、电子设备及存储介质
KR101552914B1 (ko) 웹 서버 어플리케이션 프레임워크 장치와 프레임워크를 이용한 웹 어플리케이션 처리 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체
CN116304442A (zh) 页面代码生成方法、装置、电子设备以及存储介质
CN117055987A (zh) 网页显示方法、装置、电子设备及计算机可读存储介质
CN112417345B (zh) 渲染方法、装置、电子设备及存储介质
CN111124386B (zh) 基于Unity的动画事件处理方法、装置、设备和存储介质
CN114237583A (zh) 一种跨平台可视化代码生成装置和方法
CN114548056A (zh) 富文本编辑方法、装置及设备
CN113190509A (zh) 动画处理方法、装置、电子设备及计算机可读存储介质
CN116595284B (zh) 网页系统运行方法、装置、设备、存储介质和程序
WO2024109400A1 (zh) 子应用页面处理方法、装置、计算机设备和存储介质
WO2023125083A1 (zh) 资源文件加载方法、装置、电子设备及存储介质
CN118094031A (zh) 子应用页面处理方法、装置、计算机设备和存储介质
US20240129402A1 (en) Customization framework for native mobile applications
CN116302026A (zh) 应用程序智能刷新方法、装置、计算机设备和存储介质
CN117785194A (zh) Web应用可视化页面的开发工具生成方法