CN116795360A - 页面渲染方法、装置及设备 - Google Patents

Abstract

本申请实施例提供一种页面渲染方法、装置及设备，该方法包括：电子设备在第二运行环境中，获取目标模版，并确定目标模版中的第一控件；第一控件为第一运行环境中的控件；确定第一控件对应的至少一个第二控件；第二控件为第二运行环境中的控件；基于第二控件，对目标模版进行渲染，得到目标页面。本申请实施例中，用户可以在第一运行环境中基于第一运行环境中的第一控件进行页面开发，电子设备在其他运行环境中可以灵活调用相应的第二控件进行页面渲染，确保页面的正常渲染，这样无需用户在不同的运行环境中进行页面的重复开发，能够减少用户的工作量，提高页面开发效率，降低开发成本。

Description

页面渲染方法、装置及设备

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面渲染方法、装置及设备。

背景技术

随着互联网的不断发展，应用程序(Application，APP)的种类不断增多，应用程序内部用于实现不同功能的页面也更加丰富。

在相关技术中，在进行用户界面(User Interface，UI)等页面的开发时，由于电子设备操作系统等运行环境不相同，对于同一个页面，用户需要针对不同运行环境进行多次、重复开发，导致页面的开发工作量较大，页面开发效率较低，开发成本较高。

发明内容

本申请的多个方面提供一种页面渲染方法、装置及设备，用以减小页面开发的工作量，提高页面开发效率，降低开发成本。

第一方面，本申请实施例提供一种页面渲染方法，包括：

在第二运行环境中，获取目标模版，并确定所述目标模版中的第一控件；所述第一控件为第一运行环境中的控件；

确定所述第一控件对应的至少一个第二控件；所述第二控件为第二运行环境中的控件；

基于所述第二控件，对所述目标模版进行渲染，得到目标页面。

在一种可能的实施方式中，所述确定所述第一控件对应的至少一个第二控件，包括：

获取所述第一控件的标识信息；

基于所述标识信息以及第一关联关系，在所述第二运行环境中确定所述标识信息对应的至少一个第二控件；所述第一关联关系为所述第一控件与至少一个第二控件的关联关系。

在一种可能的实施方式中，所述确定所述第一控件对应的至少一个第二控件，还包括：

确定所述第一控件的第一属性信息；所述第一属性信息包括样式属性和/或事件属性；

基于所述第一属性信息以及第二关联关系，在所述第二运行环境中确定所述第二控件的第二属性信息；所述第二关联关系为所述第一属性信息与所述第二属性信息的关联关系。

在一种可能的实施方式中，所述确定所述第一控件对应的至少一个第二控件，还包括：

确定所述第一控件的第一单位信息；所述第一单位信息包括颜色单位和/或长度单位；

基于所述第一单位信息以及第三关联关系，在所述第二运行环境中确定所述第二控件对应的第二单位信息；所述第三关联关系为所述第一单位信息与所述第二单位信息的关联关系。

在一种可能的实施方式中，所述确定所述目标模版中的第一控件，包括：

按照预设处理方式解析所述目标模版，得到所述目标模版对应的控件树；

基于所述控件树，读取所述目标模版中的第一控件。

在一种可能的实施方式中，所述方法还包括：

在第一运行环境中，从多个备选控件中确定第一控件，并基于所述第一控件生成目标模版。

在一种可能的实施方式中，所述从多个备选控件中确定第一控件，包括：

响应于针对备选控件的第一触控操作，将所述第一触控操作对应的备选控件确定为第一控件；

响应于针对所述第一控件的第二触控操作，将所述第一控件的初始属性调整为所述第二触控操作对应的目标属性。

在一种可能的实施方式中，所述方法还包括：

确定可选控件的历史使用频率；

在所述历史使用频率满足选取条件的情况下，将所述可选控件确定为所述备选控件。

在一种可能的实施方式中，所述第一运行环境为安卓运行环境；所述第二运行环境为浏览器运行环境。

第二方面，本申请实施例提供一种页面渲染方法，包括：

在第二运行环境中，响应于用户的页面访问操作，获取所述页面访问操作对应的目标模版，并确定所述目标模版中的第一控件；所述第一控件为第一运行环境中的控件；

确定所述第一控件对应的至少一个第二控件；所述第二控件为第二运行环境中的控件；

基于所述第二控件，对所述目标模版进行渲染，得到目标页面。

第三方面，本申请实施例提供一种页面渲染方法，包括：

在第一运行环境中，响应于用户对多个备选控件的触控操作，确定所述触控操作对应的第一控件；所述第一控件为第一运行环境中的控件；

基于所述第一控件生成目标模版，以使得客户端在第二运行环境中确定所述第一控件对应的至少一个第二控件，并且基于所述第二控件对所述目标模版进行渲染得到目标页面；所述第二控件为第二运行环境中的控件。

第四方面，本申请实施例提供一种页面渲染装置，包括：

第一确定模块，用于在第二运行环境中，获取目标模版，并确定所述目标模版中的第一控件；

第二确定模块，用于确定所述第一控件对应的至少一个第二控件；所述第二控件为第二运行环境中的控件；

渲染模块，用于基于所述第二控件，对所述目标模版进行渲染，得到目标页面。

在一种可能的实施方式中，所述第二确定模块，具体用于：

获取所述第一控件的标识信息；

基于所述标识信息以及第一关联关系，在所述第二运行环境中确定所述标识信息对应的至少一个第二控件；所述第一关联关系为所述第一控件与至少一个第二控件的关联关系。

在一种可能的实施方式中，所述第二确定模块，还用于：

确定所述第一控件的第一属性信息；所述第一属性信息包括样式属性和/或事件属性；

基于所述第一属性信息以及第二关联关系，在所述第二运行环境中确定所述第二控件的第二属性信息；所述第二关联关系为所述第一属性信息与所述第二属性信息的关联关系。

在一种可能的实施方式中，所述第二确定模块，还用于：

确定所述第一控件的第一单位信息；所述第一单位信息包括颜色单位和/或长度单位；

基于所述第一单位信息以及第三关联关系，在所述第二运行环境中确定所述第二控件对应的第二单位信息；所述第三关联关系为所述第一单位信息与所述第二单位信息的关联关系。

在一种可能的实施方式中，所述第一确定模块，具体用于：

按照预设处理方式解析所述目标模版，得到所述目标模版对应的控件树；

基于所述控件树，读取所述目标模版中的第一控件。

在一种可能的实施方式中，所述装置还包括：

第三确定模块，用于在第一运行环境中，从多个备选控件中确定第一控件，并基于所述第一控件生成目标模版。

在一种可能的实施方式中，所述第三确定模块，具体用于：

响应于针对备选控件的第一触控操作，将所述第一触控操作对应的备选控件确定为第一控件；

响应于针对所述第一控件的第二触控操作，将所述第一控件的初始属性调整为所述第二触控操作对应的目标属性。

在一种可能的实施方式中，所述装置还用于：

确定可选控件的历史使用频率；

在所述历史使用频率满足选取条件的情况下，将所述可选控件确定为所述备选控件。

在一种可能的实施方式中，所述第一运行环境为安卓运行环境；所述第二运行环境为浏览器运行环境。

第五方面，本申请实施例提供一种页面渲染装置，包括：

获取模块，用于在第二运行环境中，响应于用户的页面访问操作，获取所述页面访问操作对应的目标模版，并确定所述目标模版中的第一控件；所述第一控件为第一运行环境中的控件；

确定模块，用于确定所述第一控件对应的至少一个第二控件；所述第二控件为第二运行环境中的控件；

渲染模块，用于基于所述第二控件，对所述目标模版进行渲染，得到目标页面。

第六方面，本申请实施例提供一种页面渲染装置，包括：

确定模块，用于在第一运行环境中，响应于用户对多个备选控件的触控操作，确定所述触控操作对应的第一控件；所述第一控件为第一运行环境中的控件；

生成模块，用于基于所述第一控件生成目标模版，以使得客户端在第二运行环境中确定所述第一控件对应的至少一个第二控件，并且基于所述第二控件对所述目标模版进行渲染得到目标页面；所述第二控件为第二运行环境中的控件。

第七方面，本申请实施例提供一种电子设备，包括：存储器和处理器；

所述存储器存储计算机执行指令；

所述处理器执行所述存储器存储的计算机执行指令，使得所述处理器执行第一方面至第三方面任一项所述的页面渲染方法。

第八方面，本申请实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当所述计算机执行指令被处理器执行时用于实现第一方面至第三方面任一项所述的页面渲染方法。

第九方面，本申请实施例提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现第一方面至第三方面任一项所示的页面渲染方法。

在本申请实施例中，电子设备在第二运行环境中，获取目标模版，并确定目标模版中的第一控件；第一控件为第一运行环境中的控件；确定第一控件对应的至少一个第二控件；第二控件为第二运行环境中的控件；基于第二控件，对目标模版进行渲染，得到目标页面。本申请实施例中，用户可以在第一运行环境中基于第一运行环境中的第一控件进行页面开发，电子设备在其他运行环境中可以灵活调用相应的第二控件进行页面渲染，确保页面的正常渲染，这样无需用户在不同的运行环境中进行页面的重复开发，能够减少用户的工作量，提高页面开发效率，降低开发成本。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请示例性实施例提供的一种应用场景的示意图；

图2为本申请示例性实施例提供的一种页面渲染方法的流程示意图；

图3为本申请示例性实施例提供的另一种页面渲染方法的流程示意图；

图4为本申请示例性实施例提供的一种控件关联关系的示意图；

图5为本申请示例性实施例提供的一种属性信息关联关系的示意图；

图6为本申请示例性实施例提供的一种单位信息关联关系的示意图；

图7为本申请示例性实施例提供的另一种页面渲染方法的流程示意图；

图8为本申请示例性实施例提供的另一种页面渲染方法的流程示意图；

图9为本申请示例性实施例提供的一种页面渲染的技术链路示意图；

图10为本申请示例性实施例提供的一种页面渲染装置的结构示意图；

图11为本申请示例性实施例提供的另一种页面渲染装置的结构示意图；

图12为本申请示例性实施例提供的另一种页面渲染装置的结构示意图；

图13为本申请示例性实施例提供的一种电子设备的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，并且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准，并提供有相应的操作入口，供用户选择授权或者拒绝。

随着互联网的不断发展，各类线上功能越来越丰富，相应的功能页面的数量也越来越多。由于电子设备的运行环境多种多样，具体可以包括浏览器(Web)运行环境以及不同的操作系统运行环境等，例如安卓操作系统(Android)以及IOS操作系统等，功能页面需要在不同运行环境中进行渲染显示。

相关技术中，为了实现同一个页面在不同运行环境中渲染显示，用户通常需要针对不同的运行环境进行多次、重复开发，导致页面的开发工作量较大，页面开发效率较低，整体开发成本较高。

图1为本申请示例性实施例提供的一种应用场景的示意图。如图1所示，包括用户101以及电子设备102。电子设备102可以为手机、电脑、可穿戴设备等，本申请实施例对于电子设备102的具体种类不作限定。

如图1所示出的，相关技术中，用户在对进行页面开发时，对于不同的运行环境需要分别进行开发操作，开发工作量较大，页面开发效率较低。而在本申请实施例中，用户在第一运行环境中进行页面开发，得到目标模版，在其他运行环境中可以基于控件之间的关联关系对目标模版进行正常渲染，能够减少用户的开发工作量，提高页面的开发效率。

本申请实施例中，电子设备在第二运行环境中，获取目标模版，并确定目标模版中的第一控件；第一控件为第一运行环境中的控件；确定第一控件对应的至少一个第二控件；第二控件为第二运行环境中的控件；基于第二控件，对目标模版进行渲染，得到目标页面。本申请实施例中，用户可以在第一运行环境中基于第一运行环境中的第一控件进行页面开发，电子设备在其他运行环境中可以灵活调用相应的第二控件进行页面渲染，确保页面的正常渲染，这样无需用户在不同的运行环境中进行页面的重复开发，能够减少用户的工作量，提高页面开发效率，降低开发成本。

以下通过具体实施例对本申请所示的技术方案进行详细说明。需要说明的是，以下几个实施例可以单独存在，也可以相互结合，对于相同或相似的内容，在不同的实施例中不再重复说明。

图2为本申请示例性实施例提供的一种页面渲染方法的流程示意图。请参见图2，该页面渲染方法可以包括：

S201、在第二运行环境中，获取目标模版，并确定目标模版中的第一控件；第一控件为第一运行环境中的控件。

本申请实施例的执行主体可以为电子设备，也可以为设置在电子设备中的页面渲染装置。页面渲染装置可以通过软件实现，也可以通过软件和硬件的结合实现。为了便于理解，在下文中，以执行主体为电子设备为例进行说明。

本申请实施例中，第一运行环境可以是指页面的开发环境，例如可以是安卓开发环境等。第一控件可以是指用户选择使用的控件。该第一控件可以是指用户交互界面即UI界面中所使用的UI控件，当然也可以为其他类型的页面控件，本申请实施例对此不作限定。第二运行环境可以是指页面渲染时的运行环境，例如可以是浏览器运行环境等。目标模版可以是指用户开发操作得到的页面模版，后续可以基于目标模版渲染得到目标页面，该目标模版具体可以是指可扩展标记语言格式(Extensible Markup Language，XML)的UI模版等，本申请实施例对此亦不作限定。

本步骤中，在第二运行环境中，当用户需要访问某个目标页面时，电子设备可以获取目标页面对应的目标模版，并且可以确定出该目标模版中的第一控件，并基于第一控件执行后续的渲染过程。这样，用户在第一运行环境中可以基于第一控件进行页面开发，在第二运行环境也能够实现页面的正常渲染，无需用户在不同运行环境中进行页面重复开发。

S202、确定第一控件对应的至少一个第二控件；第二控件为第二运行环境中的控件。

本申请实施例中，第二控件可以是指第二运行环境中的页面组件。第一控件可以与至少一个第二控件相对应，即具备关联关系，例如一个第一控件可以对应一个或者两个第二控件。第一控件与第二控件的关联关系可以是指映射关系，即第一控件与至少一个第二控件可以直接相对应，能够实现相同的功能；第一控件与第二控件的关联关系也可以是指模拟关系，即在第一运行环境中的第一控件在第二运行环境中没有直接对应的控件，但在第二运行环境中可以通过至少一个第二控件来模拟第一控件的功能，此时第一控件与至少一个第二控件也具备关联关系；当然，第一控件与第二控件的关联关系也可以包括其他情况，具体可以基于实际需求进行灵活设置，本申请实施例对此不作限定。

本步骤中，由于运行环境不相同，页面渲染过程中同一个功能在不同运行环境中对应的控件可能是不相同的。电子设备在第二运行环境中可以预先存储有第一运行环境中的第一控件与第二运行环境中至少一个第二控件的关联关系，即相关联的第一控件和至少一个第二控件可以实现同一个功能。这样，在第一运行环境中基于第一控件编辑得到的页面模版，可以在第二运行环境中基于第一控件对应的至少一个第二控件进行渲染，实现页面的正常渲染。

需要说明的是，除了控件之间的关联关系之外，电子设备在第二运行环境中还可以包括有控件属性之间的关联关系，例如控件样式等的关联关系，用于实现页面中控件样式等的正常渲染显示；第二运行环境中还可以包括有控件单位信息之间的关联关系，例如颜色、长度单位等的关联关系，用于实现页面中颜色、大小等的正常渲染显示。当然，电子设备在第二运行环境中也可以包括有其他关联关系，具体可以基于实际需求进行灵活设置，本申请实施例对此不作限定。

S203、基于第二控件，对目标模版进行渲染，得到目标页面。

本申请实施例中，目标页面可以是指目标模版对应的页面。在第二运行环境中确定出目标模版中第一控件对应的至少一个第二控件之后，可以基于至少一个第二控件对目标模版进行渲染，最终可以得到并显示目标页面，这样能够实现页面的跨端渲染，可以减少用户的页面开发工作量，提高页面开发效率。

在本申请实施例中，电子设备在第二运行环境中，获取目标模版，并确定目标模版中的第一控件；第一控件为第一运行环境中的控件；确定第一控件对应的至少一个第二控件；第二控件为第二运行环境中的控件；基于第二控件，对目标模版进行渲染，得到目标页面。本申请实施例中，用户可以在第一运行环境中基于第一运行环境中的第一控件进行页面开发，电子设备在其他运行环境中可以灵活调用相应的第二控件进行页面渲染，确保页面的正常渲染，这样无需用户在不同的运行环境中进行页面的重复开发，能够减少用户的工作量，提高页面开发效率，降低开发成本。

在上述实施例的基础上，图3为本申请示例性实施例提供的另一种页面渲染方法的流程示意图。请参见图3，该页面渲染方法可以包括：

S301、确定可选控件的历史使用频率；在历史使用频率满足选取条件的情况下，将可选控件确定为备选控件。

本申请实施例中，由于页面编辑方式是动态变化的，控件的种类和数量可能不断增多，可选控件可以是指第一运行环境中能够使用的功能控件。历史使用频率可以是指可选控件单位时间内使用的次数，例如一周内各个可选控件的使用次数或者一个月内各个可选控件的使用次数等。备选控件可以是指第一运行环境提供的、使用频率较高的控件，用户可以从备选控件中选取第一控件来进行页面开发。

选取条件可以是指用于确定可选控件是否被圈选或者是否进入白名单的条件。该选取条件可以是指历史使用频率大于预设阈值，该预设阈值可以是指预先设置的历史使用频率的临界值，当可选控件的历史使用频率大于预设阈值时，电子设备可以确定该可选控件的使用频率较高，满足选取条件，可以作为备选控件。

此外，选取条件也可以是指按照历史使用频率从高到低排序后，可选控件排序位次在前N位，该数值N可以为10、15等。具体的，电子设备在确定出各个可选控件的历史使用频率之后，可以按照历史使用频率从高到低对可选控件进行排序，之后将排序在前N位的可选控件确定为备选控件。当然，预设条件也可以为其他形式，电子设备可以基于其他选取条件来从可选控件中选择备选控件，本申请实施例对此不作限定。

在一种可能的实施方式中，备选控件包括布局控件以及内容控件；布局控件包括线性布局控件、帧布局控件以及网格布局控件其中至少一种；内容控件包括视图容器控件、文本展示控件、按钮控件、图片控件、视频控件、文本输入控件、复选框控件以及开关控件其中至少一种。

本申请实施例中，备选控件具体可以包括布局控件和内容控件，其中布局控件可以用于确定页面的布局方式，内容控件可以用于进行文本、音视频等的显示以及功能交互等。各个备选控件可以对应有各类属性，例如描述颜色、宽高尺寸、边距定位等的样式属性，以及描述点击、输入、勾选等的事件交互属性。

具体的，布局控件可以包括线性布局控件(Linear layout)、帧布局控件(FrameLayout)以及网格布局控件(Grid Layout)等，其中线性布局控件可以用于实现页面中控件的水平或者竖直排布；帧布局控件可以用于实现页面中控件的重叠布局；网格布局控件可以用于实现页面中控件的行列二维排布。

内容控件可以包括视图容器控件(View)、文本展示控件(Text View)、按钮控件(Button)、图片控件(Image View)、视频控件(Video View)、文本输入控件(Text Input)、复选框控件(Check Box)以及开关控件(Switch)等。其中视图容器控件用于确定页面的视图显示方式；文本展示控件用于在页面中显示文本；按钮控件用于在页面中显示可交互虚拟按键；图片控件用于在页面中显示图片；视频控件用于在页面中显示视频；文本输入控件用于在页面中显示文本输入框、搜索框等；复选框控件用于在页面中显示选择按钮以及多选按钮等；开关控件用于在页面中显示虚拟功能开关等。

本申请实施例中，第一运行环境中可能包括有几十种可选控件，在进行页面开发时，用户可能基于其中的十几种可选控件即可满足页面开发需求，实现目标模版的正常编辑。因此，电子设备可以预先确定出各个可选控件对应的历史使用频率，并将历史使用频率较高的可选控件确定为备选控件，后续用户可以直接基于备选控件进行页面编辑开发，这样，既能够减少控件跨端关联关系确定时的开发成本，也能够使得用户在进行页面开发时控件查找更加简洁方便。

用户在第一运行环境中进行页面开发时，可以基于第一运行环境中包括的备选控件进行页面编辑，可以从备选控件中选取第一控件，并基于实际需求设置第一控件的相关属性；电子设备在第一运行环境中，可以响应于用户的选取、编辑等触控操作，确定出用户所选择的第一控件，并基于第一控件来生成目标模版，后续可以在其他运行环境中直接渲染该目标模版，无需再进行重复开发。

S302、在第一运行环境中，从多个备选控件中确定第一控件，并基于第一控件生成目标模版。

在一种可能的实施方式中，S302中第一控件的确定过程具体可以包括如下步骤：

响应于针对备选控件的第一触控操作，将第一触控操作对应的备选控件确定为第一控件；响应于针对第一控件的第二触控操作，将第一控件的初始属性调整为第二触控操作对应的目标属性；基于第一控件生成目标模版。

本申请实施例中，第一触控操作可以是指用户对于控件的选择操作。第二触控操作可以是指用于对于第一控件的属性设置操作。初始属性可以是指第一控件的原始属性。目标属性可以是用户进行属性调整之后的第一控件属性。

本步骤中，用户在进行页面开发时，可以基于第一触控操作，从备选控件中选择第一控件；电子设备响应于用户的第一触控操作，可以将该第一触控操作对应的备选控件确定为第一控件。用户需要对第一控件的颜色、大小、边距等属性进行调整时，可以对第一控件执行第二触控操作进行属性修改；电子设备响应于用户的第一触控操作，可以将第一控件从初始属性调整为第二触控操作对应的目标属性。然后电子设备可以基于目标属性的第一控件来生成目标模版，实现页面的编辑开发。

当然，在第一运行环境中，由于页面编辑开发方式的不同，第一触控操作以及第二触控操作的具体形式也可能不相同。当页面编辑开发方式为可视化编辑时，用户可以直接采用控件拖动等方式进行页面编辑，此时第一触控操作以及第二触控操作可以为点击、滑动等操作；当页面编辑开发方式为纯代码编辑时，用户输入代码完成页面编辑，此时第一触控操作以及第二触控操作可以为用户的输入操作，本申请实施例对此不作限定。

本申请实施例中，电子设备响应于用户的触控操作，确定第一控件并调整第一控件的属性，最终生成目标模版，能够简化用户的页面开发操作，进一步提高页面开发的效率。

S303、在第二运行环境中，获取目标模版。

本申请实施例中，电子设备在第二运行环境中可以获取目标模版，具体可以是响应于用户的模版上传操作来获取目标模版，也可以是响应于用户的页面访问操作来获取目标页面对应的目标模版，本申请实施例对于目标模版的具体获取方式不作限定。电子设备后续可以在第二运行环境中实现对目标模版的正常渲染。

在一种可能的实施方式中，第一运行环境为安卓运行环境；第二运行环境为浏览器运行环境。

本申请实施例中，第一运行环境可以为安卓运行环境。用户可以在安卓运行环境中，基于安卓的原生UI控件进行页面编辑得到目标模版。第二运行环境可以为浏览器运行环境，在安卓运行环境中编辑的目标模版可以直接在浏览器运行环境中进行跨端渲染，无需用户进行跨端重复开发，能够减少用户的开发工作量，提高页面开发效率。

S304、按照预设处理方式解析目标模版，得到目标模版对应的控件树；基于控件树，读取目标模版中的第一控件。

本申请实施例中，预设处理方式可以是指预先设置的模版解析方式，例如可以是基于解释型脚本语言(JavaScript)进行语法、词法分析等。控件树可以是指目标模版对应的控件组成结构，该控件树具体可以是指轻量级数据交换格式(JavaScript ObjectNotation，JSON)的控件树等。

本步骤中，电子设备在第一运行环境中生成目标模版之后，可以在第二运行环境中获取该目标模版，具体获取方式可以为自动从预设存储位置获取，也可以是基于用户的上传操作获取，本申请实施例对此不作限定。之后，电子设备可以按照预设处理方式对目标模版进行解析，例如使用JavaScript进行语法、词法分析等，解析生成JSON格式控件树，然后电子设备可以基于控件树来读取目标模版中包括的各个第一控件以及各个第一控件的目标属性。这样，电子设备通过在第二运行环境中获取并解析目标模版得到控件树，并按照控件树来读取第一控件，能够提高目标模版中控件获取的全面性，能够确保后续页面渲染的可靠性和稳定性。

S305、确定第一控件对应的至少一个第二控件；第二控件为第二运行环境中的控件。

在一种可能的实施方式中，步骤S305可以包括如下步骤(1)至(2)：

(1)、获取第一控件的标识信息。

(2)、基于标识信息以及第一关联关系，在第二运行环境中确定标识信息对应的至少一个第二控件；第一关联关系为第一控件与至少一个第二控件的关联关系。

本申请实施例中，标识信息可以是指第一控件的具体标识，该标识信息可以是指第一控件的名称、标识符或者编号等，本申请实施例对于标识信息的具体种类不作限定。第一关联关系可以是指第一运行环境中的第一控件与第二运行环境中的至少一个第二控件之间的关联关系。

本步骤中，在得到目标模版对应的控件树之后，电子设备可以从控件树中的名称字段中读取第一控件的标识信息，之后可以基于标识信息在第二运行环境中的第一关联关系中进行搜索匹配，确定出该标识信息所对应的至少一个第二控件，后续可以基于第二控件来实现目标模版的正常渲染。

示例性地，图4为本申请示例性实施例提供的一种控件关联关系的示意图。如图4所示出的，在第一运行环境(安卓运行环境)中的第一控件可以与第二运行环境(浏览器运行环境)中的第二控件存在第一关联关系。在布局控件中，第一运行环境中的线性布局控件可以与第二运行环境中的层叠样式表(Cascading Style Sheets，CSS)弹性布局控件(CSSFlex)相关联；对于第一运行环境中的帧布局，由于在第二运行环境中没有直接对应的第二控件，在第二运行环境中基于层叠样式表网格布局控件(CSS Grid)中的网格区域功能(grid Area)来模拟实现帧布局中的元素堆叠效果，该grid Area能够指定网格元素在网格布局中的大小和位置；第一运行环境中的网格布局控件可以与第二运行环境中的层叠样式表网格布局控件相关联。

在内容控件中，第一运行环境中的视图容器控件可以与第二运行环境中的层叠样式表定位控件(Division，DIV)相关联；第一运行环境中的文本展示控件可以与第二运行环境中的文本行内元素控件(Span)相关联；第一运行环境中的按钮控件可以与第二运行环境中的按钮控件(Button)相关联；第一运行环境中的文本输入控件可以与第二运行环境中的输入控件(Input)相关联；第一运行环境中的图片控件可以与第二运行环境中的图片控件(IMG)相关联；第一运行环境中的视频控件可以与第二运行环境中的视频控件(Video)相关联；第一运行环境中的复选框控件可以与第二运行环境中的输入控件(Input)相关联；第一运行环境中的开关控件在第二运行环境中没有直接对应的第二控件，在第二运行环境中可以基于定位控件、层叠样式表封装模拟来实现开关控件。

需要说明的是，除了图4中所示出的控件模拟或者映射关系，第一关联关系中也可以包括其他控件之间的关联关系，也可以包括控件之间的其他关联关系，本申请实施例对此不作限定。

在一种可能的实施方式中，步骤S305还可以包括如下步骤(3)至(4)：

(3)、确定第一控件的第一属性信息；第一属性信息包括样式属性和/或事件属性。

(4)、基于第一属性信息以及第二关联关系，在第二运行环境中确定第二控件的第二属性信息；第二关联关系为第一属性信息与第二属性信息的关联关系。

本申请实施例中，第一属性信息可以是指第一控件的控件属性，具体可以包括样式属性以及事件属性等。其中，样式属性可以是指边距、位置等外观样式属性。事件属性可以是指控件的具体交互事件，例如点击或者长按等。第二属性信息可以是指与第一控件对应的第二控件的属性信息，该第二属性信息具体是指第二运行环境中与第一属性信息相对应的属性信息。第二关联关系可以是指第一运行环境中第一属性信息与第二运行环境中第二属性信息的关联关系。

本步骤中，电子设备在解析目标模版得到控件树之后，可以读取控件树中的第一控件，同时可以读取控件树中第一控件的第一属性信息。在第二运行环境中，电子设备可以基于第一属性信息以及第二关联关系，确定出与第一属性信息对应的第二属性信息，该第二属性信息即为第二控件的属性信息，后续可以基于第二属性信息的第二控件进行页面渲染，能够确保页面内控件样式等属性的正常显示。

示例性地，图5为本申请示例性实施例提供的一种属性信息关联关系的示意图。如图5所示出的，在第一运行环境(安卓运行环境)中的第一属性信息可以与第二运行环境(浏览器运行环境)中的第二属性信息存在第二关联关系。具体的，在样式属性中，第一运行环境中的宽高撑满父元素(match_parent)在第二运行环境中可以通过100％结合CSS中的动态计算长度值函数(Calc)来计算出控件的实际尺寸，这样可以在第二运行环境中模拟实现match_parent；第一运行环境中的宽高匹配子元素(match_content)这一样式属性在第二运行环境中可以根据父节点样式情况的不同采用适用内容(fit-content)属性或者充撑满可用空间属性(-webkit-fill-available)来实现。第一运行环境中的重心属性(gravity)、宽度权重(weight)在第二运行环境中都可以通过弹性盒子(FlexBox)模拟实现。第一运行环境中的其他第一属性信息，例如外边距、内边距、圆角、可见性、图片裁切样式等均可以在第二运行环境中关联相应的第二属性信息，本申请实施例在此不再赘述。

在事件属性中，第一运行环境中的长按事件属性(onLongClick)在第二运行环境中可以通过浏览器触控事件(onTouch)计算模拟实现；第一运行环境中的点击事件属性(onClick)可以与第二运行环境中的点击事件属性相关联。

需要说明的是，除了图4中所示出的属性信息模拟或者映射关系，第二关联关系中也可以包括其他属性信息之间的关联关系，或者包括属性信息之间的其他关联关系，本申请实施例对此不作限定。

在一种可能的实施方式中，步骤S305还可以包括如下步骤(5)至(6)：

(5)、确定第一控件的第一单位信息；第一单位信息包括颜色单位和/或长度单位。

(6)、基于第一单位信息以及第三关联关系，在第二运行环境中确定第二控件对应的第二单位信息；第三关联关系为第一单位信息与第二单位信息的关联关系。

本申请实施例中，第一单位信息可以是指第一控件的单位相关信息，具体可以包括颜色单位或者长度单位等。第二单位信息可以是指第二控件的单位相关信息，该第二单位信息具体是指在第二运行环境中与第一单位信息相关联的单位信息。第三关联关系可以是指第一运行环境中第一单位信息与第二运行环境中第二单位信息之间的关联关系。

本步骤中，电子设备在解析目标模版得到控件树之后，可以读取控件树中的第一控件，同时可以读取控件树中第一控件的第一单位信息。在第二运行环境中，电子设备可以基于第一单位信息以及第三关联关系，确定出与第一单位信息对应的第二单位信息，这样可以确定出第二控件对应的第二单位信息，后续可以基于第二单位信息的第二控件实现页面正常渲染，能够确保页面内控件颜色以及长度等的正常显示。

示例性地，图6为本申请示例性实施例提供的一种单位信息关联关系的示意图。如图6所示出的，在第一运行环境(安卓运行环境)中的第一单位信息可以与第二运行环境(浏览器运行环境)中的第二单位信息存在第三关联关系。具体的，对于长度单位，第一运行环境中的第一单位信息可能是基于像素(pixel，px)存在一定的比例关系，例如密度无关像素(device independent pixels，dp)与像素之间的比例可以为A，即第二运行环境中的1个密度无关像素可以替换为A个像素；比例无关像素(scale-independent pixels，sp)与像素之间的比例可以为B，即第二运行环境中的1个密度无关像素可以替换为B个像素。相应的，在第二运行环境中，可以将第一运行环境中的长度单位均转换为像素单位，例如对于dp、sp可以直接基于上述比例关系转换为相应的像素数量，实现长度单位的转换。

对于颜色单位，第一运行环境中的16进制颜色与第二运行环境中的16进制颜色可以直接相关联；第一运行环境中的含透明度的颜色单位在第二运行环境中可以基于进制转换，确定出对应的第二单位信息，实现颜色单位的准确转换。

需要说明的是，除了图6中所示出的单位信息模拟或者映射关系，第三关联关系中也可以包括其他单位信息之间的关联关系，或者包括单位信息之间的其他关联关系，本申请实施例对此不作限定。

应理解，在本申请的各种实施例中，各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

S306、基于第二控件，对目标模版进行渲染，得到目标页面。

本申请实施例中，在确定出与第一控件相关联的至少一个第二控件，并确定出相应的第二属性信息以及第二单位信息之后，电子设备可以基于至少一个第二控件、第二属性信息以及第二单位信息对目标模版进行渲染，得到目标页面。这样，电子设备可以实现对页面的跨端渲染，无需用户在不同运行环境进行重复开发，能够降低用户的开发工作量，提高页面开发效率，降低开发成本。

在上述实施例的基础上，图7为本申请示例性实施例提供的另一种页面渲染方法的流程示意图。请参见图7，该页面渲染方法可以包括：

S701、在第二运行环境中，响应于用户的页面访问操作，获取页面访问操作对应的目标模版，并确定目标模版中的第一控件；第一控件为第一运行环境中的控件。

本申请实施例中，页面访问操作可以是指用户对于目标页面的访问操作，具体可以是指点击操作、滑动操作等，当然也可以是指用户对目标模版的渲染操作，本申请实施例对于页面访问操作的具体类型不作限定。

具体的，当用户在第二运行环境中需要访问目标页面时，用户可以执行页面访问操作，电子设备响应于该页面访问操作，可以获取目标模版，并且可以对目标模版进行解析，确定出目标模版中包括的第一控件，该第一控件是第一运行环境中用户开发时所使用的控件，这样能够实现页面的跨端渲染。

S702、确定第一控件对应的至少一个第二控件；第二控件为第二运行环境中的控件。

S703、基于第二控件，对目标模版进行渲染，得到目标页面。

本申请实施例中，在第二运行环境中，电子设备响应于用户的页面访问操作，获取目标模版并确定目标模版中的第一控件；第一控件为第一运行环境中的控件；确定第一控件对应的至少一个第二控件；第二控件为第二运行环境中的控件；基于第二控件，对目标模版进行渲染，得到目标页面。本申请实施例中用户可以在第一运行环境中基于第一运行环境中的第一控件进行页面开发，电子设备在其他运行环境中可以灵活调用相应的第二控件进行页面渲染，确保页面的正常渲染，这样无需用户在不同的运行环境中进行页面的重复开发，能够减少用户的工作量，提高页面开发效率，降低开发成本。

在上述实施例的基础上，图8为本申请示例性实施例提供的另一种页面渲染方法的流程示意图。请参见图8，该页面渲染方法可以包括：

S801、在第一运行环境中，响应于用户对多个备选控件的触控操作，确定触控操作对应的第一控件；第一控件为第一运行环境中的控件。

本申请实施例中，在第一运行环境中电子设备可以响应于用户的触控操作，确定触控操作对应的第一控件，并且电子设备还可以响应于用户的触控操作来确定第一控件的目标属性，后续可以基于第一控件来生成目标模版。

S802、基于第一控件生成目标模版，以使得客户端在第二运行环境中确定第一控件对应的至少一个第二控件，并且基于第二控件对目标模版进行渲染得到目标页面；第二控件为第二运行环境中的控件。

本申请实施例中，电子设备确定出第一控件之后，可以进一步响应于用户的页面编辑操作生成目标模版，然后在第二运行环境中，客户端可以对目标模版进行解析渲染。需要说明的是，本申请实施例中的跨端渲染指的是在不同运行环境中的解析渲染，而不同的运行环境可以是在同一个客户端中，也可以是在不同的客户端中，例如第一运行环境与第二运行环境可以是指同一个客户端(即电子设备)中的两个运行环境，也可以是在不同的客户端中的两个运行环境，本申请实施例对此不作限定。

在本申请实施例中，电子设备在第一运行环境中，响应于用户对多个备选控件的触控操作，确定触控操作对应的第一控件；基于第一控件生成目标模版，以使得客户端在第二运行环境中确定第一控件对应的至少一个第二控件，并且基于第二控件对目标模版进行渲染得到目标页面；第二控件为第二运行环境中的控件。本申请实施例中用户可以在第一运行环境中基于第一运行环境中的第一控件进行页面开发，电子设备在其他运行环境中可以灵活调用相应的第二控件进行页面渲染，确保页面的正常渲染，这样无需用户在不同的运行环境中进行页面的重复开发，能够减少用户的工作量，提高页面开发效率，降低开发成本。

在上述任意一个实施例的基础上，图9为本申请示例性实施例提供的一种页面渲染的技术链路示意图。如图9所示出的，电子设备可以首先在第一运行环境中确定出用户可以使用的备选控件，具体可以根据各个可选控件的历史使用频率来从可选控件中选取备选控件。确定出备选控件之后，用户可以从备选控件中选取第一控件来进行模版编写；电子设备可以响应于用户的触控操作来生成目标模版。

在第二运行环境中，电子设备可以获取目标模版并对目标模版进行解析得到控件树，进而可以基于控件树读取目标模版中包括的各个第一控件以及各个第一控件的第一属性信息以及第一单位信息。在第二运行环境中，电子设备可以对目标模版进行渲染，具体可以包括控件实例化、布局模拟或者映射、样式转换、事件以及数据绑定等。具体的，电子设备可以基于关联关系，确定出第一控件对应的至少一个第二控件，并且确定出第二控件的第二属性信息(即第一属性信息对应的第二属性信息)以及第二控件的第二单位信息(即第一单位信息对应的第二单位信息)，进而可以基于第二控件对目标模版进行渲染，最终显示目标页面。

在相关技术进行页面开发时，用户也可以基于自定义特定语言(domain-specificlanguage，DSL)在多个运行环境中进行页面开发，在渲染过程中由于未使用系统原生语言，需要引入额外的渲染引擎进行页面渲染，用户的工作量较大，学习成本较高，并且对性能要求较高。

而在本申请实施例中，在第一运行环境中通过圈选备选控件(例如常用UI控件)，基于备选控件进行页面开发，得到目标模版；在第二运行环境中，例如浏览器环境中，可以基于浏览器提供的超文本标记语言(Hyper Text Markup Language，HTML)、JavaScript、CSS等处理方式，完成模版解析及模版渲染。这样，用户在页面开发阶段可以在第一运行环境中进行页面开发，在其他运行环境中可以基于映射或者模拟关系实现页面渲染，能够减少页面开发工作量，提高研发效率；此外由于是采用了第一运行环境提供的系统原生控件进行页面开发，能够避免使用自定义DSL时用户学习成本较高的问题，同时也无需引入额外的渲染引擎，避免了包体积较大或运行时内存占用较多的问题，能够保证软件的性能、稳定性以及页面的可访问性。

图10为本申请示例性实施例提供的一种页面渲染装置的结构示意图，请参见图10，页面渲染装置100包括：

第一确定模块1001，用于在第二运行环境中，获取目标模版，并确定目标模版中的第一控件；

第二确定模块1002，用于确定第一控件对应的至少一个第二控件；第二控件为第二运行环境中的控件；

渲染模块1003，用于基于第二控件，对目标模版进行渲染，得到目标页面。

在一种可能的实施方式中，第二确定模块1002，具体用于：

获取第一控件的标识信息；

基于标识信息以及第一关联关系，在第二运行环境中确定标识信息对应的至少一个第二控件；第一关联关系为第一控件与至少一个第二控件的关联关系。

在一种可能的实施方式中，第二确定模块1002，还用于：

确定第一控件的第一属性信息；第一属性信息包括样式属性和/或事件属性；

基于第一属性信息以及第二关联关系，在第二运行环境中确定第二控件的第二属性信息；第二关联关系为第一属性信息与第二属性信息的关联关系。

在一种可能的实施方式中，第二确定模块1002，还用于：

确定第一控件的第一单位信息；第一单位信息包括颜色单位和/或长度单位；

基于第一单位信息以及第三关联关系，在第二运行环境中确定第二控件对应的第二单位信息；第三关联关系为第一单位信息与第二单位信息的关联关系。

在一种可能的实施方式中，第一确定模块1001，具体用于：

按照预设处理方式解析目标模版，得到目标模版对应的控件树；

基于控件树，读取目标模版中的第一控件。

在一种可能的实施方式中，装置100还包括：

第三确定模块，用于在第一运行环境中，从多个备选控件中确定第一控件，并基于第一控件生成目标模版。

在一种可能的实施方式中，第三确定模块，具体用于：

响应于针对备选控件的第一触控操作，将第一触控操作对应的备选控件确定为第一控件；

响应于针对第一控件的第二触控操作，将第一控件的初始属性调整为第二触控操作对应的目标属性。

在一种可能的实施方式中，装置100还用于：

确定可选控件的历史使用频率；

在历史使用频率满足选取条件的情况下，将可选控件确定为备选控件。

在一种可能的实施方式中，第一运行环境为安卓运行环境；第二运行环境为浏览器运行环境。

本申请实施例提供的页面渲染装置100可以执行上述方法实施例所示的技术方案，其实现原理以及有益效果类似，此处不再进行赘述。

图11为本申请示例性实施例提供的一种页面渲染装置的结构示意图，请参见图11，页面渲染装置110包括：

获取模块111，用于在第二运行环境中，响应于用户的页面访问操作，获取页面访问操作对应的目标模版，并确定目标模版中的第一控件；第一控件为第一运行环境中的控件；

确定模块112，用于确定第一控件对应的至少一个第二控件；第二控件为第二运行环境中的控件；

渲染模块113，用于基于第二控件，对目标模版进行渲染，得到目标页面。

本申请实施例提供的页面渲染装置110可以执行上述方法实施例所示的技术方案，其实现原理以及有益效果类似，此处不再进行赘述。

图12为本申请示例性实施例提供的一种页面渲染装置的结构示意图，请参见图12，页面渲染装置120包括：

确定模块121，用于在第一运行环境中，响应于用户对多个备选控件的触控操作，确定触控操作对应的第一控件；第一控件为第一运行环境中的控件；

生成模块122，用于基于第一控件生成目标模版，以使得客户端在第二运行环境中确定第一控件对应的至少一个第二控件，并且基于第二控件对目标模版进行渲染得到目标页面；第二控件为第二运行环境中的控件。

本申请实施例提供的页面渲染装置120可以执行上述方法实施例所示的技术方案，其实现原理以及有益效果类似，此处不再进行赘述。

图13为本申请示例性实施例提供的一种电子设备的结构示意图，请参见图13，该电子设备130可以包括处理器131和存储器132。示例性地，处理器131、存储器132，各部分之间通过总线133相互连接。

存储器132存储计算机执行指令；

处理器131执行存储器132存储的计算机执行指令，使得处理器131执行如上述方法实施例所示的页面渲染方法。

相应地，本申请实施例提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机执行指令，当计算机执行指令被处理器执行时用于实现上述方法实施例的页面渲染方法。

相应地，本申请实施例还可提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时，可实现上述方法实施例所示的页面渲染方法。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (14)

1.一种页面渲染方法，其特征在于，包括：

在第二运行环境中，获取目标模版，并确定所述目标模版中的第一控件；所述第一控件为第一运行环境中的控件；

确定所述第一控件对应的至少一个第二控件；所述第二控件为第二运行环境中的控件；

基于所述第二控件，对所述目标模版进行渲染，得到目标页面。

2.根据权利要求1所述的方法，其特征在于，所述确定所述第一控件对应的至少一个第二控件，包括：

获取所述第一控件的标识信息；

基于所述标识信息以及第一关联关系，在所述第二运行环境中确定所述标识信息对应的至少一个第二控件；所述第一关联关系为所述第一控件与至少一个第二控件的关联关系。

3.根据权利要求1或2所述的方法，其特征在于，所述确定所述第一控件对应的至少一个第二控件，还包括：

确定所述第一控件的第一属性信息；所述第一属性信息包括样式属性和/或事件属性；

基于所述第一属性信息以及第二关联关系，在所述第二运行环境中确定所述第二控件的第二属性信息；所述第二关联关系为所述第一属性信息与所述第二属性信息的关联关系。

4.根据权利要求1或2所述的方法，其特征在于，所述确定所述第一控件对应的至少一个第二控件，还包括：

确定所述第一控件的第一单位信息；所述第一单位信息包括颜色单位和/或长度单位；

基于所述第一单位信息以及第三关联关系，在所述第二运行环境中确定所述第二控件对应的第二单位信息；所述第三关联关系为所述第一单位信息与所述第二单位信息的关联关系。

5.根据权利要求1所述的方法，其特征在于，所述确定所述目标模版中的第一控件，包括：

按照预设处理方式解析所述目标模版，得到所述目标模版对应的控件树；

基于所述控件树，读取所述目标模版中的第一控件。

6.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在第一运行环境中，从多个备选控件中确定第一控件，并基于所述第一控件生成目标模版。

7.根据权利要求6所述的方法，其特征在于，所述从多个备选控件中确定第一控件，包括：

响应于针对备选控件的第一触控操作，将所述第一触控操作对应的备选控件确定为第一控件；

响应于针对所述第一控件的第二触控操作，将所述第一控件的初始属性调整为所述第二触控操作对应的目标属性。

8.根据权利要求6所述的方法，其特征在于，所述方法还包括：

确定可选控件的历史使用频率；

在所述历史使用频率满足选取条件的情况下，将所述可选控件确定为所述备选控件。

9.根据权利要求1或6所述的方法，其特征在于，所述第一运行环境为安卓运行环境；所述第二运行环境为浏览器运行环境。

10.一种页面渲染方法，其特征在于，包括：

在第二运行环境中，响应于用户的页面访问操作，获取所述页面访问操作对应的目标模版，并确定所述目标模版中的第一控件；所述第一控件为第一运行环境中的控件；

确定所述第一控件对应的至少一个第二控件；所述第二控件为第二运行环境中的控件；

基于所述第二控件，对所述目标模版进行渲染，得到目标页面。

11.一种页面渲染方法，其特征在于，包括：

在第一运行环境中，响应于用户对多个备选控件的触控操作，确定所述触控操作对应的第一控件；所述第一控件为第一运行环境中的控件；

基于所述第一控件生成目标模版，以使得客户端在第二运行环境中确定所述第一控件对应的至少一个第二控件，并且基于所述第二控件对所述目标模版进行渲染得到目标页面；所述第二控件为第二运行环境中的控件。

12.一种页面渲染装置，其特征在于，包括：

第一确定模块，用于在第二运行环境中，获取目标模版，并确定所述目标模版中的第一控件；

第二确定模块，用于确定所述第一控件对应的至少一个第二控件；所述第二控件为第二运行环境中的控件；

渲染模块，用于基于所述第二控件，对所述目标模版进行渲染，得到目标页面。

13.一种电子设备，其特征在于，包括：存储器和处理器；

所述存储器存储计算机执行指令；

所述处理器执行所述存储器存储的计算机执行指令，使得所述处理器执行如权利要求1至11任一项所述的页面渲染方法。

14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，当所述计算机执行指令被处理器执行时用于实现权利要求1至11任一项所述的页面渲染方法。