CN111552473A - 一种应用程序的处理方法、装置及设备 - Google Patents

一种应用程序的处理方法、装置及设备 Download PDF

Info

Publication number
CN111552473A
CN111552473A CN202010343611.1A CN202010343611A CN111552473A CN 111552473 A CN111552473 A CN 111552473A CN 202010343611 A CN202010343611 A CN 202010343611A CN 111552473 A CN111552473 A CN 111552473A
Authority
CN
China
Prior art keywords
target page
page
skeleton screen
file
elements
Prior art date
Legal status (The legal status 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 status listed.)
Granted
Application number
CN202010343611.1A
Other languages
English (en)
Other versions
CN111552473B (zh
Inventor
孙广东
黄灿辉
海媛
黄佳生
林超
郭志伟
黄思程
薛远升
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202010343611.1A priority Critical patent/CN111552473B/zh
Publication of CN111552473A publication Critical patent/CN111552473A/zh
Priority to PCT/CN2021/078000 priority patent/WO2021218327A1/zh
Priority to TW110109219A priority patent/TWI808393B/zh
Priority to US17/730,009 priority patent/US20220253588A1/en
Application granted granted Critical
Publication of CN111552473B publication Critical patent/CN111552473B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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页可以是一个空白页面，或者在Loading页中展示一个转动的菊花，提示用户页面正在加载中。但实践表明，通过转动菊花的Loading方式提示效果较差，用户无法从Loading页中感知到有效信息，也无法有效降低用户等待的焦灼感，这会降低应用程序的竞争力，降低用户对该应用程序的使用体验。
发明内容
本申请实施例提供了一种应用程序的处理方法、装置及设备，能够基于目标页面的页面结构快速生成目标页面对应的骨架屏的视图文件，使得骨架屏的实现过程不仅高效，而且灵活。
一方面，本申请实施例提供一种应用程序的处理方法，该方法包括：
对应用程序中的目标页面进行预览；
获取被预览的目标页面的页面结构，目标页面包括页面元素；
在目标页面的页面结构的基础上，对页面元素进行处理得到目标页面对应的骨架屏的页面结构；
根据骨架屏的页面结构生成骨架屏的视图文件。
另一方面，本申请实施例提供一种应用程序的处理方法，该方法包括：
显示预览界面，预览界面中包括被预览的应用程序中的目标页面；预览界面中还包括触发控件；
当触发控件被选定时，按照上述的应用程序的处理方法生成骨架屏的视图文件；
获取目标页面的视图文件，并建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；
将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。
本申请实施例中，通过预览界面中的触发控件即可触发生成被预览的目标页面的对应的骨架屏的视图文件，建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；再将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。这样就生成了包含目标页面的视图文件和骨架屏的视图文件的应用程序的程序包，开发者对应用程序的程序包进行发布之后，应用程序的启动流程中就引入了骨架屏实现方案，从而优化了应用程序的启动流程和目标页面的加载流程，有利于提升用户对应用程序的使用体验。
另一方面，本申请实施例提供一种应用程序的处理方法，该方法包括：
从应用程序的程序包中读取目标页面的视图文件及骨架屏的视图文件，目标页面的视图文件与骨架屏的视图文件具备映射关系；骨架屏的视图文件按照前述应用程序的处理方法生成；
根据骨架屏的视图文件渲染显示骨架屏；
加载目标页面中的动态资源数据；
根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以采用目标页面替换骨架屏。
本申请实施例中，在启动应用程序的过程中，当加载应用程序中的目标页面时，基于应用程序的程序包中与目标页面具备映射关系的骨架屏的文件，能够首先渲染并显示目标页面的骨架屏，待目标页面的内容被加载完成后，再采用目标页面来替换骨架屏。这个过程能够有效降低用户等待的焦灼感，提升应用程序的竞争力和用户使用体验。
另一方面，本申请实施例提供一种应用程序的处理装置，该装置包括：
预览单元，用于对应用程序中的目标页面进行预览；
处理单元，用于获取被预览的目标页面的页面结构，目标页面包括页面元素；在目标页面的页面结构的基础上，对页面元素进行处理得到目标页面对应的骨架屏的页面结构；根据骨架屏的页面结构生成骨架屏的视图文件。
在一种实施方式中，应用程序是免安装的应用程序，应用程序是指运行于客户端内的任一个应用程序；当所述应用程序运行于客户端内时，所述客户端与所述应用程序具备父子关系，所述客户端为所述应用程序的父程序，而所述应用程序为所述客户端的子程序；
应用程序包括逻辑层和视图层，逻辑层的任务在逻辑线程中被执行；视图层的任务在渲染线程中被执行；
目标页面是应用程序中的任一页面。
在一种实施方式中，页面元素包括关键元素和非关键元素；处理单元具体用于：
删除目标页面中的非关键元素；以及，
将目标页面中的关键元素替换为占位元素，得到骨架屏的页面结构；
关键元素的类型包括以下至少一种：文本元素、图片元素、按钮元素、表单元素、伪类元素和原生组件；占位元素为灰色块。
在一种实施方式中，目标页面包括逻辑文件和配置信息，目标页面的页面结构是由目标页面的逻辑文件和配置信息共同确定的；
目标页面的配置信息包括页面元素的显示配置字段，页面元素的显示配置字段用于指示页面元素在目标页面中被显示或被隐藏；
关键元素是指位于目标页面的首屏中，且显示配置字段用于指示被显示的页面元素；非关键元素是指目标页面中除关键页面元素之外的其他页面元素。
在一种实施方式中，处理单元具体用于：
解析目标页面的逻辑文件，以将目标页面的逻辑文件转换为文档对象模型树，文档对象模型树包括多个节点，每个节点对应目标页面中的一个页面元素；
根据目标页面的配置信息对文档对象模型树进行裁剪，去除文档对象模型树中与目标页面中的非关键元素相对应的节点。
在一种实施方式中，裁剪后的文档对象模型树中仅包含与目标页面中的关键元素相对应的节点；处理单元具体用于：
从裁剪后的文档对象模型树中获取各节点的属性，属性包括位置属性和样式属性；
将各节点的位置属性确定为占位元素的位置属性，并将各节点的样式属性替换为占位元素的样式属性；
将属性处理后的文档对象模型树转换为骨架屏的逻辑文件；
为骨架屏设置配置信息，骨架屏的配置信息用于控制骨架屏的显示效果；
其中，骨架屏的页面结构由骨架屏的逻辑文件和骨架屏的配置信息共同确定。
在一种实施方式中，视图文件包括视图代码文件和视图样式文件；处理单元具体用于：将骨架屏的逻辑文件转换为骨架屏的视图文件。
另一方面，本申请实施例提供一种应用程序的处理装置，该装置包括：
显示单元，用于显示预览界面，预览界面中包括被预览的应用程序中的目标页面；预览界面中还包括触发控件；
处理单元，用于当触发控件被选定时，按照前述应用程序的处理方法生成骨架屏的视图文件；以及获取目标页面的视图文件，并建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；以及将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。
在一种实施方式中，视图文件包括视图代码文件和视图样式文件；处理单元具体用于：
将目标页面的视图文件与骨架屏的视图文件存储至同级路径目录下；
在目标页面的视图代码文件中引入骨架屏的视图代码文件，并在目标页面的视图样式文件中引入骨架屏的视图样式文件；
其中，目标页面包括页面元素，页面元素包括静态资源数据和动态资源数据，目标页面的视图文件是根据目标页面中页面元素的静态资源数据生成的；
应用程序的程序包中还包括应用程序的配置文件；配置文件中包括目标页面的配置信息和骨架屏的配置信息；骨架屏的配置信息用于控制骨架屏的显示效果。
另一方面，本申请实施例提供一种应用程序的处理装置，该装置包括：
读取单元，用于从应用程序的程序包中读取目标页面的视图文件及骨架屏的视图文件，目标页面的视图文件与骨架屏的视图文件具备映射关系；骨架屏的视图文件按照前述应用程序的处理方法生成；
处理单元，用于根据骨架屏的视图文件渲染显示骨架屏；以及加载目标页面中的动态资源数据；根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以采用目标页面替换骨架屏。
在一种实施方式中，目标页面包括页面元素，页面元素包括静态资源数据和动态资源数据，目标页面的视图文件是根据目标页面中页面元素的静态资源数据生成的；目标页面中的动态资源数据是指目标页面中的各页面元素的动态资源数据；
应用程序的程序包中还包括应用程序的配置文件；配置文件中包括骨架屏的配置信息；骨架屏的配置信息包括骨架屏中的占位元素的显示配置字段，占位元素的显示配置字段用于指示占位元素在骨架屏中被显示或被隐藏；目标页面中包括关键元素，关键元素与骨架屏中的占位元素具备对应关系；
处理单元具体用于：
按照目标页面中各关键元素的动态资源数据加载完成的时间顺序，根据加载完成的关键元素的动态资源数据及目标页面的视图文件依次渲染并显示各关键元素，以采用目标页面中的各关键元素依次替换骨架屏中对应的各占位元素。
在该技术方案中，根据各关键元素的动态资源数据加载完成的时间顺序，依次渲染显示各个关键元素，以实现目标页面中的各个关键元素依次替换骨架屏中对应的各个占位元素。这样可实现目标页面中的页面元素的渐进式加载效果。
另一方面，本申请实施例提供一种应用程序的处理设备，该设备包括：
处理器，适于实现一条或多条指令；以及，
计算机可读存储介质，存储有一条或多条指令，一条或多条指令适于由处理器加载并执行上述的应用程序的处理方法。
另一方面，本申请实施例提供计算机可读存储介质，该计算机可读存储介质存储有一条或多条指令，一条或多条指令适于由处理器加载并执行上述的应用程序的处理方法。
本申请实施例中，在对应用程序的目标页面进行预览的过程中，获取被预览的目标页面的页面结构，并在该目标页面的页面结构的基础上直接对页面元素进行处理得到目标页面对应的骨架屏的页面结构；再根据骨架屏的页面结构生成骨架屏的视图文件。这个过程是直接通过获得目标页面的页面结构自动生成相应骨架屏的视图文件，无需为骨架屏单独编写代码，避免代码入侵，且无论目标页面如何变化，通过预览即可快速生成相应骨架屏的视图文件，骨架屏的实现过程不仅高效，而且灵活。
附图说明
为了更清楚地说明本申请实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1示出了现有技术中的Loading页的示意图；
图2示出了本申请一个示例性实施例提供的一种应用程序的启动流程的示意图；
图3示出了本申请一个示例性实施例提供的一种骨架屏的示意图；
图4示出了本申请一个示例性实施例提供的一种应用程序的处理***的结构示意图；
图5示出了本申请一个示例性实施例提供的一种应用程序的处理方法的流程示意图；
图6示出了本申请一个示例性实施例提供的一种文档对象模型树的示意图；
图7示出了本申请一个示例性实施例提供的一种关键元素替换为占位元素的示意图；
图8示出了本申请一个示例性实施例提供的一种针对不同类型的页面元素进行处理的流程示意图；
图9a示出了本申请一个示例性实施例提供的一种文本元素替换为占位元素的示意图；
图9b示出了本申请一个示例性实施例提供的一种图片元素替换为占位元素的示意图；
图9c示出了本申请一个示例性实施例提供的一种按钮元素替换为占位元素的示意图；
图9d示出了本申请一个示例性实施例提供的一种表单元素替换为占位元素的示意图；
图9e示出了本申请一个示例性实施例提供的一种伪类元素替换为占位元素的示意图；
图9f示出了本申请一个示例性实施例提供的一种原生组件替换为占位元素的示意图；
图10示出了本申请一个示例性实施例提供的另一种应用程序的处理方法的流程图；
图11示出了本申请一个示例性实施例提供的一种预览界面的示意图；
图12示出了本申请一个示例性实施例提供的另一种应用程序的处理方法的流程图；
图13示出了本申请一个示例性实施例提供的一种应用程序的处理装置的结构示意图；
图14示出了本申请一个示例性实施例提供的另一种应用程序的处理装置的结构示意图；
图15示出了本申请一个示例性实施例提供的又一种应用程序的处理装置的结构示意图；
图16示出了本申请一个示例性实施例提供的一种应用程序的处理设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本申请实施例涉及应用程序，此处的应用程序可以是指免安装的应用程序，即无需下载安装即可使用的应用程序，这类应用程序又俗称小程序，它通常作为子程序运行于客户端中，此时客户端与该应用程序具备父子关系，该客户端作为该应用程序的父程序，而该应用程序作为该客户端的子程序。客户端(又可称为应用客户端、APP客户端)是指下载并安装在终端中，并在终端中运行的程序。终端中可以包括各类客户端，包括但不限于：IM(Instant Messaging，即时通讯)客户端(例如微信客户端、QQ客户端等)、SNS(SocialNetworking 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(平板电脑)、手机、可穿戴智能设备等等；服务器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树进行裁剪，以去除非关键元素相对应的节点，而仅保留首屏可见元素对应的节点。这样可以减少骨架屏代码的冗余，其具体的剪裁方式可采用下述程序进行：
Figure BDA0002469349480000141
(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-62sk-text"style＝"background-size:100％1.4rem；">文本内容</text>
(2)图片元素的处理，如image组件、icon组件、cover-image组件、open-data组件的头像等等，将其替换为对应的占位元素，该占位元素呈灰色矩形或圆形状(如图9b所示)。
小程序页面的视图文件中的image(图片)组件并不是由逻辑文件中的img标签构造的，而是采用背景图来实现的，因此，在图片元素处理时，需要将图片元素的src属性去除，并添加为该imge组件添加占位元素的背景色(灰色)即可实现替换。另外，对于icon组件，可以设置该icon组件的颜色(color)属性为占位元素的颜色(灰色)来实现替换。
(3)按钮元素的处理，如button组件或属性role＝button的元素，将其替换为对应的占位元素，该占位元素呈与按钮形状相同的形状(如图9c所示)。
(4)表单元素的处理，如radio选择器组件、switch选择器组件、checkbox选择器组件等等，将其替换为对应的占位元素，该占位元素呈灰色矩形状(如图9d所示)。一种方式是为表单元素添加灰色的背景色，但可能与表单元素(如radio组件)的原有样式冲突。另一种方式是将表单元素的颜色属性(color属性)设置为为按钮元素配置的颜色属性，并将表单元素的禁用属性(diaabled)进行移除。下面以radio选择器组件、switch选择器组件、checkbox选择器组件实例来剖析具体的替换处理过程：
<！--原wxml中选择器-->
<radio checked color＝'#eee'></radio>
<checkbox checked color＝'#eee'><text>文本内容</text></checkbox>
<switch checkedtype＝'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：骨架屏的配置项列表
Figure BDA0002469349480000171
Figure BDA0002469349480000181
在处理配置项列表的时候，为了尽可能美观，可对配置项列表进行了同化处理，后面的子项都是第一个子项的克隆。比如，应用程序的配置项列表不是通过ul/ol标签来声明的，因此借助data-*属性进行标示。考虑到配置项列表容器内可能***其它结构，有如下两种声明方式：data-skeleton-list的直接子节点将被处理成第一项的克隆；data-skeleton-li属性相同的元素被认为是同一列表的子项，两种声明方式可采用下述程序进行：
<！--方式一：列表容器内容均为列表项-->
<viewwx:for＝"{{array}}"data-skeleton-list>
<view class＝"list-item">子项内容</view>
</view>
<！--方式二：列表容器中***了其它元素-->
<viewwx: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具体用于：
从裁剪后的文档对象模型树中获取各节点的属性，属性包括位置属性和样式属性；
将各节点的位置属性确定为占位元素的位置属性，并将各节点的样式属性替换为占位元素的样式属性；
将属性处理后的文档对象模型树转换为骨架屏的逻辑文件；
为骨架屏设置配置信息，骨架屏的配置信息用于控制骨架屏的显示效果；
其中，骨架屏的页面结构由骨架屏的逻辑文件和骨架屏的配置信息共同确定。
在一种实施方式中，视图文件包括视图代码文件和视图样式文件；处理单元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 ProcessingUnit，中央处理器))是应用程序的处理设备的计算核心以及控制核心，其适于实现一条或多条指令，具体适于加载并执行一条或多条指令从而实现相应方法流程或相应功能。
本申请实施例还提供了一种计算机可读存储介质(Memory)，计算机可读存储介质是应用程序的处理设备中的记忆设备，用于存放程序和数据。可以理解的是，此处的计算机可读存储介质既可以包括应用程序的处理设备中的内置存储介质，当然也可以包括应用程序的处理设备所支持的扩展存储介质。计算机可读存储介质提供存储空间，该存储空间存储了应用程序的处理设备的处理***。并且，在该存储空间中还存放了适于被处理器1601加载并执行的一条或多条的指令，这些指令可以是一个或多个的计算机程序(包括程序代码)。需要说明的是，此处的计算机可读存储介质可以是高速RAM存储器，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器；可选的还可以是至少一个位于远离前述处理器的计算机可读存储介质。
在一个实施例中，该应用程序的处理设备可以是图4所示的终端401；该计算机可读存储介质中存储有一条或多条第一指令；由处理器1601加载并执行计算机可读存储介质中存放的一条或多条第一指令，以实现上述应用程序的处理方法实施例中的相应步骤；具体实现中，计算机可读存储介质中的一条或多条第一指令由处理器1601加载并执行如下步骤：
对应用程序中的目标页面进行预览；
获取被预览的目标页面的页面结构，目标页面包括页面元素；
在目标页面的页面结构的基础上，对页面元素进行处理得到目标页面对应的骨架屏的页面结构；
根据骨架屏的页面结构生成骨架屏的视图文件。
在一种实施方式中，应用程序是免安装的应用程序，应用程序是指运行于客户端内的任一个应用程序；当应用程序运行于客户端内时，客户端与应用程序具备父子关系，客户端为应用程序的父程序，而应用程序为客户端的子程序；
应用程序包括逻辑层和视图层，逻辑层的任务在逻辑线程中被执行；视图层的任务在渲染线程中被执行；
目标页面是应用程序中的任一页面。
在一种实施方式中，页面元素包括关键元素和非关键元素；计算机可读存储介质中的一条或多条第一指令由处理器1601加载并在执行在目标页面的页面结构的基础上，对页面元素进行处理得到目标页面对应的骨架屏的页面结构时，具体执行如下步骤：
删除目标页面中的非关键元素；以及，
将目标页面中的关键元素替换为占位元素，得到骨架屏的页面结构；
关键元素的类型包括以下至少一种：文本元素、图片元素、按钮元素、表单元素、伪类元素和原生组件；占位元素为灰色块。
在一种实施方式中，目标页面包括逻辑文件和配置信息，目标页面的页面结构是由目标页面的逻辑文件和配置信息共同确定的；
目标页面的配置信息包括页面元素的显示配置字段，页面元素的显示配置字段用于指示页面元素在目标页面中被显示或被隐藏；
关键元素是指位于目标页面的首屏中，且显示配置字段用于指示被显示的页面元素；非关键元素是指目标页面中除关键页面元素之外的其他页面元素。
在一种实施方式中，计算机可读存储介质中的一条或多条第一指令由处理器1601加载并在执行删除目标页面中的非关键元素时，具体执行如下步骤：
解析目标页面的逻辑文件，以将目标页面的逻辑文件转换为文档对象模型树，文档对象模型树包括多个节点，每个节点对应目标页面中的一个页面元素；
根据目标页面的配置信息对文档对象模型树进行裁剪，去除文档对象模型树中与目标页面中的非关键元素相对应的节点。
在一种实施方式中，裁剪后的文档对象模型树中仅包含与目标页面中的关键元素相对应的节点；
计算机可读存储介质中的一条或多条第一指令由处理器1601加载并在执行将目标页面中的关键元素替换为占位元素，得到骨架屏的页面结构时，具体执行如下步骤：
从裁剪后的文档对象模型树中获取各节点的属性，属性包括位置属性和样式属性；
将各节点的位置属性确定为占位元素的位置属性，并将各节点的样式属性替换为占位元素的样式属性；
将属性处理后的文档对象模型树转换为骨架屏的逻辑文件；
为骨架屏设置配置信息，骨架屏的配置信息用于控制骨架屏的显示效果；
其中，骨架屏的页面结构由骨架屏的逻辑文件和骨架屏的配置信息共同确定。
在一种实施方式中，视图文件包括视图代码文件和视图样式文件；
计算机可读存储介质中的一条或多条第一指令由处理器1601加载并在执行根据骨架屏的页面结构生成骨架屏的视图文件时，具体执行如下步骤：
将骨架屏的逻辑文件转换为骨架屏的视图文件。
本申请实施例中，在对应用程序的目标页面进行预览的过程中，获取被预览的目标页面的页面结构，并在该目标页面的页面结构的基础上直接对页面元素进行处理得到目标页面对应的骨架屏的页面结构；再根据骨架屏的页面结构生成骨架屏的视图文件。这个过程是直接通过获得目标页面的页面结构自动生成相应骨架屏的视图文件，无需为骨架屏单独编写代码，避免代码入侵，且当目标页面无论如何变化，通过预览即可快速生成相应骨架屏的视图文件，骨架屏的实现过程不仅高效，而且灵活。
在另一个实施例中，该应用程序的处理设备可以是图4所示的终端401；该计算机可读存储介质中存储有一条或多条第二指令；由处理器1601加载并执行计算机可读存储介质中存放的一条或多条第二指令，以实现上述应用程序的处理方法实施例中的相应步骤；具体实现中，计算机可读存储介质中的一条或多条第二指令由处理器1601加载并执行如下步骤：
显示预览界面，预览界面中包括被预览的应用程序中的目标页面；预览界面中还包括触发控件；
当触发控件被选定时，前述应用程序的处理方法生成目标页面对应的骨架屏的视图文件；
获取目标页面的视图文件，并建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；
将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。
在一种实施方式中，视图文件包括视图代码文件和视图样式文件；
计算机可读存储介质中的一条或多条第二指令由处理器1601加载并在执行建立目标页面的视图文件与骨架屏的视图文件之间的映射关系时，具体执行如下步骤：
将目标页面的视图文件与骨架屏的视图文件存储至同级路径目录下；
在目标页面的视图代码文件中引入骨架屏的视图代码文件，并在目标页面的视图样式文件中引入骨架屏的视图样式文件；
其中，目标页面包括页面元素，页面元素包括静态资源数据和动态资源数据，目标页面的视图文件是根据目标页面中页面元素的静态资源数据生成的；
应用程序的程序包中还包括应用程序的配置文件；配置文件中包括目标页面的配置信息和骨架屏的配置信息；骨架屏的配置信息用于控制骨架屏的显示效果。
本申请实施例中，通过预览界面中的触发控件即可触发生成被预览的目标页面的对应的骨架屏的视图文件，建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；再将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。这样就生成了包含目标页面的视图文件和骨架屏的视图文件的应用程序的程序包，开发者对应用程序的程序包进行发布之后，应用程序的启动流程中就引入了骨架屏实现方案，从而优化了应用程序的启动流程和目标页面的加载流程，有利于提升用户对应用程序的使用体验。
在又一个实施例中，该应用程序的处理设备可以是图4所示的终端402；该计算机可读存储介质中存储有一条或多条第三指令；由处理器1601加载并执行计算机可读存储介质中存放的一条或多条第三指令，以实现上述应用程序的处理方法实施例中的相应步骤；具体实现中，计算机可读存储介质中的一条或多条第三指令由处理器1601加载并执行如下步骤：
从应用程序的程序包中读取目标页面的视图文件及骨架屏的视图文件，目标页面的视图文件与骨架屏的视图文件具备映射关系；骨架屏的视图文件按照前述应用程序的处理方法生成；
根据骨架屏的视图文件渲染显示骨架屏；
加载目标页面中的动态资源数据；
根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以采用目标页面替换骨架屏。
在一种实施方式中，目标页面包括页面元素，页面元素包括静态资源数据和动态资源数据，目标页面的视图文件是根据目标页面中页面元素的静态资源数据生成的；目标页面中的动态资源数据是指目标页面中的各页面元素的动态资源数据；
应用程序的程序包中还包括应用程序的配置文件；配置文件中包括骨架屏的配置信息；骨架屏的配置信息包括骨架屏中的占位元素的显示配置字段，占位元素的显示配置字段用于指示占位元素在骨架屏中被显示或被隐藏；目标页面中包括关键元素，关键元素与骨架屏中的占位元素具备对应关系；
计算机可读存储介质中的一条或多条第三指令由处理器1601加载并在执行根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以采用目标页面替换骨架屏时，具体执行如下步骤：
按照目标页面中各关键元素的动态资源数据加载完成的时间顺序，根据加载完成的关键元素的动态资源数据及目标页面的视图文件依次渲染并显示各关键元素，以采用目标页面中的各关键元素依次替换骨架屏中对应的各占位元素。
本申请实施例中，在启动应用程序的过程中，当加载应用程序中的目标页面时，基于应用程序的程序包中与目标页面具备映射关系的骨架屏的文件，能够首先渲染并显示目标页面的骨架屏，待目标页面的内容被加载完成后，再采用目标页面来替换骨架屏。这个过程能够有效降低用户等待的焦灼感，提升应用程序的竞争力和用户使用体验。
本领域普通技术人员可以意识到，结合本申请中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用，使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本申请实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程设备。计算机指令可以存储在计算机可读存储介质中，或者通过计算机可读存储介质进行传输。计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如，同轴电缆、光纤、数字用户线(DSL))或无线(例如，红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如，固态硬盘(Solid State Disk，SSD))等。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (15)

1.一种应用程序的处理方法，其特征在于，包括：
对应用程序中的目标页面进行预览；
获取被预览的所述目标页面的页面结构，所述目标页面包括页面元素；
在所述目标页面的页面结构的基础上，对所述页面元素进行处理得到所述目标页面对应的骨架屏的页面结构；
根据所述骨架屏的页面结构生成所述骨架屏的视图文件。
2.根据权利要求1所述的方法，其特征在于，所述应用程序是免安装的应用程序，所述应用程序是指运行于客户端内的任一个应用程序；当所述应用程序运行于客户端内时，所述客户端与所述应用程序具备父子关系，所述客户端为所述应用程序的父程序，而所述应用程序为所述客户端的子程序；
所述应用程序包括逻辑层和视图层，所述逻辑层的任务在逻辑线程中被执行；所述视图层的任务在渲染线程中被执行；
所述目标页面是所述应用程序中的任一页面。
3.根据权利要求1所述的方法，其特征在于，所述页面元素包括关键元素和非关键元素；所述在所述目标页面的页面结构的基础上，对所述页面元素进行处理得到所述目标页面对应的骨架屏的页面结构，包括：
删除所述目标页面中的非关键元素；以及，
将所述目标页面中的关键元素替换为占位元素，得到所述骨架屏的页面结构；
所述关键元素的类型包括以下至少一种：文本元素、图片元素、按钮元素、表单元素、伪类元素和原生组件；所述占位元素为灰色块。
4.根据权利要求3所述的方法，其特征在于，所述目标页面包括逻辑文件和配置信息，所述目标页面的页面结构是由所述目标页面的逻辑文件和配置信息共同确定的；
所述目标页面的配置信息包括页面元素的显示配置字段，所述页面元素的显示配置字段用于指示页面元素在所述目标页面中被显示或被隐藏；
所述关键元素是指位于所述目标页面的首屏中，且显示配置字段用于指示被显示的页面元素；所述非关键元素是指所述目标页面中除所述关键页面元素之外的其他页面元素。
5.根据权利要求4所述的方法，其特征在于，所述删除所述目标页面中的非关键元素，包括：
解析所述目标页面的逻辑文件，以将所述目标页面的逻辑文件转换为文档对象模型树，所述文档对象模型树包括多个节点，每个节点对应所述目标页面中的一个页面元素；
根据所述目标页面的配置信息对所述文档对象模型树进行裁剪，去除所述文档对象模型树中与所述目标页面中的非关键元素相对应的节点。
6.根据权利要求5所述的方法，其特征在于，裁剪后的文档对象模型树中仅包含与所述目标页面中的关键元素相对应的节点；
所述将所述目标页面中的关键元素替换为占位元素，得到所述骨架屏的页面结构，包括：
从所述裁剪后的文档对象模型树中获取各节点的属性，所述属性包括位置属性和样式属性；
将所述各节点的位置属性确定为所述占位元素的位置属性，并将所述各节点的样式属性替换为所述占位元素的样式属性；
将属性处理后的文档对象模型树转换为所述骨架屏的逻辑文件；
为所述骨架屏设置配置信息，所述骨架屏的配置信息用于控制所述骨架屏的显示效果；
其中，所述骨架屏的页面结构由所述骨架屏的逻辑文件和所述骨架屏的配置信息共同确定。
7.根据权利要求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所述的应用程序的处理方法。
CN202010343611.1A 2020-04-27 2020-04-27 一种应用程序的处理方法、装置及设备 Active CN111552473B (zh)

Priority Applications (4)

Application Number Priority Date Filing Date Title
CN202010343611.1A CN111552473B (zh) 2020-04-27 2020-04-27 一种应用程序的处理方法、装置及设备
PCT/CN2021/078000 WO2021218327A1 (zh) 2020-04-27 2021-02-26 一种页面处理方法和相关装置
TW110109219A TWI808393B (zh) 2020-04-27 2021-03-15 頁面處理方法、裝置、設備及儲存媒體
US17/730,009 US20220253588A1 (en) 2020-04-27 2022-04-26 Page processing method and related apparatus

Applications Claiming Priority (1)

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

Publications (2)

Publication Number Publication Date
CN111552473A true CN111552473A (zh) 2020-08-18
CN111552473B CN111552473B (zh) 2024-02-09

Family

ID=72003074

Family Applications (1)

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

Country Status (4)

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

Cited By (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112052064A (zh) * 2020-09-28 2020-12-08 深圳前海微众银行股份有限公司 小程序页面跳转方法、装置、设备与计算机可读存储介质
CN112100543A (zh) * 2020-08-31 2020-12-18 东软集团股份有限公司 渲染网页的方法、装置、存储介质及电子设备和服务器
CN112149040A (zh) * 2020-10-15 2020-12-29 北京百度网讯科技有限公司 页面骨架屏生成方法、装置、电子设备和存储介质
CN112199616A (zh) * 2020-10-09 2021-01-08 深圳市欢太科技有限公司 网页性能评估方法、装置、设备及存储介质
CN112286525A (zh) * 2020-09-25 2021-01-29 长沙市到家悠享网络科技有限公司 骨架屏生成方法、装置及设备
CN112307385A (zh) * 2020-10-22 2021-02-02 北京达佳互联信息技术有限公司 网页数据加载和处理方法、装置、电子设备及存储介质
CN112487338A (zh) * 2020-12-11 2021-03-12 杭州安恒信息技术股份有限公司 一种网页页面的fmp的确定方法、装置、设备及介质
CN112506581A (zh) * 2020-12-17 2021-03-16 北京百度网讯科技有限公司 渲染小程序的方法、装置、电子设备和可读存储介质
CN112540806A (zh) * 2020-12-25 2021-03-23 北京百度网讯科技有限公司 一种小程序页面渲染方法、装置、电子设备及存储介质
CN112905922A (zh) * 2021-01-26 2021-06-04 北京达佳互联信息技术有限公司 页面加载方法、装置、电子设备、存储介质及程序产品
CN113076504A (zh) * 2021-06-03 2021-07-06 北京达佳互联信息技术有限公司 骨架屏生成方法、装置、设备、存储介质
WO2021218327A1 (zh) * 2020-04-27 2021-11-04 腾讯科技（深圳）有限公司 一种页面处理方法和相关装置
CN113691865A (zh) * 2021-08-24 2021-11-23 京东方科技集团股份有限公司 一种多媒体播放方法及***
CN113760274A (zh) * 2020-09-04 2021-12-07 北京京东振世信息技术有限公司 一种前端组件逻辑注入方法和装置
CN113849247A (zh) * 2021-09-26 2021-12-28 上海哔哩哔哩科技有限公司 直播间页面元素的显示方法、装置及***
CN114090914A (zh) * 2021-01-04 2022-02-25 京东安联财产保险有限公司 骨架屏生成方法、装置、电子设备及存储介质
CN114237755A (zh) * 2021-12-20 2022-03-25 百度在线网络技术（北京）有限公司 应用运行方法、装置、电子设备以及存储介质
CN116151191A (zh) * 2023-04-18 2023-05-23 武汉精臣智慧标识科技有限公司 一种数据渲染方法、***、电子设备及存储介质
WO2023165190A1 (zh) * 2022-03-01 2023-09-07 腾讯科技（深圳）有限公司 数据处理方法、装置、程序产品、计算机设备和介质
US12026541B2 (en) 2020-12-25 2024-07-02 Beijing Baidu Netcom Science And Technology Co., Ltd. Method for applet page rendering, electronic device and storage medium

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114090118B (zh) * 2021-11-11 2023-09-15 北京百度网讯科技有限公司 启动小程序的方法、装置、设备以及存储介质
CN114035865B (zh) * 2021-11-11 2022-10-21 北京百度网讯科技有限公司 启动小程序的方法、装置、设备以及存储介质
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 北京蓝色星际科技股份有限公司 自动合成红头文件的方法及装置
CN117827357B (zh) * 2024-03-04 2024-06-14 北京云测信息技术有限公司 一种终端设备的远程操作方法、装置及设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040261032A1 (en) * 2003-02-28 2004-12-23 Olander Daryl B. Graphical user interface navigation method
US20180121270A1 (en) * 2016-10-27 2018-05-03 Hewlett Packard Enterprise Development Lp Detecting malformed application screens
CN110187913A (zh) * 2019-05-17 2019-08-30 北京百度网讯科技有限公司 小程序的发布、运行方法和装置
CN110187878A (zh) * 2019-05-29 2019-08-30 北京三快在线科技有限公司 一种页面生成方法和装置
CN110990014A (zh) * 2019-12-12 2020-04-10 深圳市卡牛科技有限公司 骨架屏页面代码的生成方法、装置、服务器及存储介质

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109977333B (zh) * 2019-03-22 2020-06-09 北京三快在线科技有限公司 网页显示方法、装置、计算机设备及存储介质
CN110110263B (zh) * 2019-05-13 2020-07-28 北京三快在线科技有限公司 网页显示方法、装置、终端及存储介质
CN110377285B (zh) * 2019-07-23 2023-10-03 腾讯科技（深圳）有限公司 一种生成页面骨架屏的方法、装置及计算机设备
CN111552473B (zh) * 2020-04-27 2024-02-09 腾讯科技（深圳）有限公司 一种应用程序的处理方法、装置及设备

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040261032A1 (en) * 2003-02-28 2004-12-23 Olander Daryl B. Graphical user interface navigation method
US20180121270A1 (en) * 2016-10-27 2018-05-03 Hewlett Packard Enterprise Development Lp Detecting malformed application screens
CN110187913A (zh) * 2019-05-17 2019-08-30 北京百度网讯科技有限公司 小程序的发布、运行方法和装置
CN110187878A (zh) * 2019-05-29 2019-08-30 北京三快在线科技有限公司 一种页面生成方法和装置
CN110990014A (zh) * 2019-12-12 2020-04-10 深圳市卡牛科技有限公司 骨架屏页面代码的生成方法、装置、服务器及存储介质

Cited By (29)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2021218327A1 (zh) * 2020-04-27 2021-11-04 腾讯科技（深圳）有限公司 一种页面处理方法和相关装置
CN112100543A (zh) * 2020-08-31 2020-12-18 东软集团股份有限公司 渲染网页的方法、装置、存储介质及电子设备和服务器
CN112100543B (zh) * 2020-08-31 2023-10-27 东软集团股份有限公司 渲染网页的方法、装置、存储介质及电子设备和服务器
CN113760274A (zh) * 2020-09-04 2021-12-07 北京京东振世信息技术有限公司 一种前端组件逻辑注入方法和装置
CN113760274B (zh) * 2020-09-04 2023-11-03 北京京东振世信息技术有限公司 一种前端组件逻辑注入方法和装置
CN112286525A (zh) * 2020-09-25 2021-01-29 长沙市到家悠享网络科技有限公司 骨架屏生成方法、装置及设备
CN112052064B (zh) * 2020-09-28 2024-04-09 深圳前海微众银行股份有限公司 小程序页面跳转方法、装置、设备与计算机可读存储介质
CN112052064A (zh) * 2020-09-28 2020-12-08 深圳前海微众银行股份有限公司 小程序页面跳转方法、装置、设备与计算机可读存储介质
CN112199616A (zh) * 2020-10-09 2021-01-08 深圳市欢太科技有限公司 网页性能评估方法、装置、设备及存储介质
CN112149040B (zh) * 2020-10-15 2024-05-31 北京百度网讯科技有限公司 页面骨架屏生成方法、装置、电子设备和存储介质
CN112149040A (zh) * 2020-10-15 2020-12-29 北京百度网讯科技有限公司 页面骨架屏生成方法、装置、电子设备和存储介质
CN112307385A (zh) * 2020-10-22 2021-02-02 北京达佳互联信息技术有限公司 网页数据加载和处理方法、装置、电子设备及存储介质
CN112487338A (zh) * 2020-12-11 2021-03-12 杭州安恒信息技术股份有限公司 一种网页页面的fmp的确定方法、装置、设备及介质
CN112506581A (zh) * 2020-12-17 2021-03-16 北京百度网讯科技有限公司 渲染小程序的方法、装置、电子设备和可读存储介质
CN112506581B (zh) * 2020-12-17 2024-03-22 北京百度网讯科技有限公司 渲染小程序的方法、装置、电子设备和可读存储介质
CN112540806B (zh) * 2020-12-25 2023-06-23 北京百度网讯科技有限公司 一种小程序页面渲染方法、装置、电子设备及存储介质
US12026541B2 (en) 2020-12-25 2024-07-02 Beijing Baidu Netcom Science And Technology Co., Ltd. Method for applet page rendering, electronic device and storage medium
CN112540806A (zh) * 2020-12-25 2021-03-23 北京百度网讯科技有限公司 一种小程序页面渲染方法、装置、电子设备及存储介质
CN114090914A (zh) * 2021-01-04 2022-02-25 京东安联财产保险有限公司 骨架屏生成方法、装置、电子设备及存储介质
CN112905922A (zh) * 2021-01-26 2021-06-04 北京达佳互联信息技术有限公司 页面加载方法、装置、电子设备、存储介质及程序产品
CN113076504A (zh) * 2021-06-03 2021-07-06 北京达佳互联信息技术有限公司 骨架屏生成方法、装置、设备、存储介质
CN113076504B (zh) * 2021-06-03 2021-10-01 北京达佳互联信息技术有限公司 骨架屏生成方法、装置、设备、存储介质
CN113691865A (zh) * 2021-08-24 2021-11-23 京东方科技集团股份有限公司 一种多媒体播放方法及***
CN113849247B (zh) * 2021-09-26 2024-04-30 上海哔哩哔哩科技有限公司 直播间页面元素的显示方法、装置及***
CN113849247A (zh) * 2021-09-26 2021-12-28 上海哔哩哔哩科技有限公司 直播间页面元素的显示方法、装置及***
CN114237755A (zh) * 2021-12-20 2022-03-25 百度在线网络技术（北京）有限公司 应用运行方法、装置、电子设备以及存储介质
WO2023165190A1 (zh) * 2022-03-01 2023-09-07 腾讯科技（深圳）有限公司 数据处理方法、装置、程序产品、计算机设备和介质
CN116151191B (zh) * 2023-04-18 2023-06-16 武汉精臣智慧标识科技有限公司 一种数据渲染方法、***、电子设备及存储介质
CN116151191A (zh) * 2023-04-18 2023-05-23 武汉精臣智慧标识科技有限公司 一种数据渲染方法、***、电子设备及存储介质

Also Published As

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

Similar Documents

Publication Publication Date Title
CN111552473B (zh) 一种应用程序的处理方法、装置及设备
US10726195B2 (en) Filtered stylesheets
US20150286739A1 (en) Html5-protocol-based webpage presentation method and device
CN113411664B (zh) 基于子应用的视频处理方法、装置和计算机设备
CN111324381B (zh) 开发***、方法、装置、计算机设备及存储介质
CN112306486B (zh) 一种界面生成方法、装置、服务器及存储介质
CN116304442A (zh) 页面代码生成方法、装置、电子设备以及存储介质
CN117055987A (zh) 网页显示方法、装置、电子设备及计算机可读存储介质
CN114780089A (zh) 一种页面切换时的悬浮窗添加方法、装置、设备及介质
CN116775174A (zh) 一种基于用户界面框架的处理方法、装置、设备及介质
CN114090666A (zh) 幻灯片显示方法、装置、设备以及存储介质
CN113190509A (zh) 动画处理方法、装置、电子设备及计算机可读存储介质
CN113934959A (zh) 一种程序预览方法、装置、计算机设备和存储介质
CN116595284B (zh) 网页***运行方法、装置、设备、存储介质和程序
CN117111941B (zh) 组件库添加方法、装置、设备和存储介质
CN112988136B (zh) 一种用户界面编辑方法及装置
CN115344252A (zh) 可视化大屏的生成方法、装置及存储介质
CN113835597A (zh) 图像生成方法、图像处理方法、相关设备及介质
CN115730096A (zh) 图元的自定义方法、装置、存储介质及计算机设备
CN115586898A (zh) 一种用户交互ui界面的生成方法及装置
CN116932126A (zh) 一种应用嵌入方法、装置、终端、介质及程序产品
CN117032864A (zh) 一种历史页面的加载方法、装置、终端设备及存储介质
CN116931895A (zh) 一种复合组件的处理方法、装置及设备
CN118094031A (zh) 子应用页面处理方法、装置、计算机设备和存储介质
CN114491191A (zh) 一种接口文档的生成方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 40027968

Country of ref document: HK

SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant