CN112181408A - 在应用程序前端页面显示视图列表的方法和装置 - Google Patents

Abstract

本发明公开了一种在应用程序前端页面显示视图列表的方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：获取视图列表数据，根据指定顺序创建列表内子组件，子组件包括原生控件、H5控件和承载RN模板的控件；判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与该RN模板对应的可执行文件包；加载可执行文件包以显示与该RN模板对应的视图列表。该实施方式既解决了单独使用H5生成视图列表带来的性能问题，又避免了单独使用原生控件生成视图列表存在的更新修复成本高、团队交流复杂等问题。

Description

在应用程序前端页面显示视图列表的方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种在应用程序前端页面显示视图列表的方法和装置。

背景技术

现如今，在手机客户端的应用程序中，某些页面需要对内容进行频繁更新，且需要UI(User Interface，用户界面)布局繁杂多变的样式，例如各种购物服务App(Application，应用程序)的首页、活动广告页、信息列表页等长列表页面。

目前通常使用以下方法来编写长列表页面：

1、直接使用手机客户端系统(Android或iOS)的原生控件，编写视图列表；

2、直接使用HTML5((Hyper Text Markup Language5，超文本标记语言第5代，以下简称H5)来编写Web网页，可在App内嵌展示，也可浏览器访问。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

1、单纯使用原生控件目前主要有以下缺点：

(1)需要Android和iOS两组开发人员，沟通成本增多；

(2)Android和iOS的技术栈不统一，两端不能互相复用，需要重复开发，造成组件化程度低，且最终产品可能会存在表现不统一；

(3)客户端发版麻烦，需要与其他功能同步，商店审核还会导致两端发布时间不同步；

(4)更改组件功能、UI样式、页面布局时，需要重新开发、测试、发版等一系列操作，时间人力成本都更高，热修复也不灵活；

(5)无论是否浏览相关页面，其组件都预先写进客户端中，安装包体积大；

2、单纯使用H5，虽然满足了页面内容更新迅速，体积不大等纯原生客户端不能满足的需求，但又存在以下主要缺点：

(1)App加载网页展示复杂内容的性能不如原生直接展示，响应速度会变慢，导致App体验不好；

(2)缺乏部分手机原生功能的支持，或者支持较差，比如频繁调用摄像头、陀螺仪、麦克风等硬件速度不如人意；

(3)加载网页会过度依赖网络，弱网或无网情况下体验不好；

3、同时，若无模板化统一管理，无论是单纯使用原生控件还是H5来编写，都会存在列表中组件重复开发成本高、内容自由度低等问题，不能满足如今对于内容多变、快速调整UI等的需求。

发明内容

有鉴于此，本发明实施例提供一种在应用程序前端页面显示视图列表的方法和装置，既解决了单独使用H5生成视图列表带来的性能问题，又避免了单独使用原生控件生成视图列表存在的更新修复成本高、团队交流复杂等问题。

为实现上述目的，根据本发明实施例的一个方面，提供了一种在应用程序前端页面显示视图列表的方法。

一种在应用程序前端页面显示视图列表的方法，包括：获取视图列表数据，根据指定顺序创建列表内子组件，所述子组件包括原生控件、H5控件和承载RN模板的控件；判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与所述RN模板对应的可执行文件包；加载所述可执行文件包以显示与所述RN模板对应的视图列表。

可选地，根据RN模板的标识获取与所述RN模板对应的可执行文件包包括：根据RN模板的标识查找缓存中是否存在所述RN模板对应的可执行文件包；若存在，则校验所述可执行文件包是否为最新版本；若是，则将缓存中的可执行文件包作为获取的可执行文件包，否则根据所述RN模板的标识下载最新的可执行文件包；否则，根据所述RN模板的标识下载最新的可执行文件包。

可选地，所述RN模板包括固定模板和自定义模板，并且，加载所述可执行文件包以显示与所述RN模板对应的视图列表包括：若所述RN模板为固定模板，则通过加载所述RN模板的可执行文件包及展示数据以显示与所述RN模板对应的视图列表；若所述RN模板为自定义模板，则通过加载所述RN模板的可执行文件包以获取所述RN模板的展示数据下载路径，并根据所述展示数据下载路径下载展示数据并加载所述展示数据以显示与所述RN模板对应的视图列表。

可选地，还包括：在根据RN模板的标识获取与所述RN模板对应的可执行文件包之前，将承载RN模板的控件高度设置为1以隐藏与所述RN模板对应的视图列表；以及，在加载所述可执行文件包之后，将承载RN模板的控件高度设置为指定显示高度以显示与所述RN模板对应的视图列表。

可选地，加载所述可执行文件包以显示与所述RN模板对应的视图列表包括：加载所述可执行文件包，并根据所述RN模板的标识从预设的RN模板路由信息中选择对应的组件来显示视图列表。

根据本发明实施例的另一方面，提供了一种在应用程序前端页面显示视图列表的装置。

一种在应用程序前端页面显示视图列表的装置，包括：组件创建模块，用于获取视图列表数据，根据指定顺序创建列表内子组件，所述子组件包括原生控件、H5控件和承载RN模板的控件；文件获取模块，用于判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与所述RN模板对应的可执行文件包；视图显示模块，用于加载所述可执行文件包以显示与所述RN模板对应的视图列表。

可选地，所述文件获取模块还用于：根据RN模板的标识查找缓存中是否存在所述RN模板对应的可执行文件包；若存在，则校验所述可执行文件包是否为最新版本；若是，则将缓存中的可执行文件包作为获取的可执行文件包，否则根据所述RN模板的标识下载最新的可执行文件包；否则，根据所述RN模板的标识下载最新的可执行文件包。

可选地，所述RN模板包括固定模板和自定义模板，并且，所述视图显示模块还用于：若所述RN模板为固定模板，则通过加载所述RN模板的可执行文件包及展示数据以显示与所述RN模板对应的视图列表；若所述RN模板为自定义模板，则通过加载所述RN模板的可执行文件包以获取所述RN模板的展示数据下载路径，并根据所述展示数据下载路径下载展示数据并加载所述展示数据以显示与所述RN模板对应的视图列表。

可选地，还包括显示调整模块，用于：在根据RN模板的标识获取与所述RN模板对应的可执行文件包之前，将承载RN模板的控件高度设置为1以隐藏与所述RN模板对应的视图列表；以及，在加载所述可执行文件包之后，将承载RN模板的控件高度设置为指定显示高度以显示与所述RN模板对应的视图列表。

可选地，所述视图显示模块还用于：加载所述可执行文件包，并根据所述RN模板的标识从预设的RN模板路由信息中选择对应的组件来显示视图列表。

根据本发明实施例的又一方面，提供了一种在应用程序前端页面显示视图列表的电子设备。

一种在应用程序前端页面显示视图列表的电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例所提供的在应用程序前端页面显示视图列表的方法。

根据本发明实施例的再一方面，提供了一种计算机可读介质。

一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例所提供的在应用程序前端页面显示视图列表的方法。

上述发明中的一个实施例具有如下优点或有益效果：通过获取视图列表数据，根据指定顺序创建列表内子组件，子组件包括原生控件、H5控件和承载RN模板的控件；判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与RN模板对应的可执行文件包；加载可执行文件包以显示与RN模板对应的视图列表，可以使RN模板和原生/H5组件在列表中组合展示，从而使得列表元素拥有RN技术的优点，既解决了单独使用H5生成视图列表带来的性能问题，又避免了单独使用原生控件生成视图列表存在的更新修复成本高、团队交流复杂等问题。同时，本发明还利用模板重用、自定义排布顺序、自定义显示数据等方式，使得列表能像搭积木一样被快速创建，且其展示的内容多变、组件布局灵活，解决了重复开发、快速更新、难以自定义的问题。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的在应用程序前端页面显示视图列表的方法的主要步骤示意图；

图2是本发明一个实施例的模板工程结构示意图；

图3是本发明一个实施例的将原生/H5列表与RN模板组合展示的流程示意图；

图4是本发明一个实施例的固定模板和自定义模板组合展示的界面示意图；

图5是根据本发明实施例的在应用程序前端页面显示视图列表的装置的主要模块示意图；

图6是本发明实施例可以应用于其中的示例性系统架构图；

图7是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

纯原生控件和纯H5开发前端页面的视图列表所带来的问题是互相对应的两个极端，而近年来出现的React Native技术(以下简称为RN)可以提供一个很好的折中方案。RN是可以让开发者仅编写一套代码，根据不同系统平台转化为其原生控件来展示的技术。

本发明技术方案便是利用RN技术的优势，制作出视图列表的RN模板，按自定义需求、不同顺序插入到原生或H5列表中，并加载自定义数据，使视图列表能保留使用原生控件或H5开发前端页面的视图列表优点的同时，得以利用RN技术的优点，解决了重复开发模板成本高、更新发版时间长、内容自由度低、性能体验差、客户端安装包大等问题。

图1是根据本发明实施例的在应用程序前端页面显示视图列表的方法的主要步骤示意图。如图1所示，本发明实施例的在应用程序前端页面显示视图列表的方法主要包括如下的步骤S101至步骤S103。

步骤S101：获取视图列表数据，根据指定顺序创建列表内子组件，子组件包括原生控件、H5控件和承载RN模板的控件；

步骤S102：判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与该RN模板对应的可执行文件包；

步骤S103：加载可执行文件包以显示与该RN模板对应的视图列表。

模板，在本发明的技术方案中，是指给前端页面的视图列表设计的粗粒度易复用的组件。比如，对于商品促销活动页面，可分为标题组件、公告组件、广告横幅图片组件、横滑图片组件、商品瀑布流列表组件等等。本方案利用模板重用、自定义排布顺序、自定义显示数据等方式，使得列表能像搭积木一样被快速创建，且其展示的内容多变、组件布局灵活，解决了重复开发、快速更新、难以自定义的问题。本发明的技术方案主要可分为两部分：RN模板制作和RN模板插入原生或H5视图列表中显示。

根据本发明实施例的技术方案，对前端页面中指定的组件进行RN模板的开发编写，而对于前端页面中不会改变的组件仍直接使用原生控件或H5进行开发编写，然后将RN模板插入原生或H5视图列表，以使RN模板和原生/H5组件在组件列表中组合展示，从而使得列表元素拥有RN技术的优点，既解决了单独使用H5生成视图列表带来的性能问题，又避免了单独使用原生控件生成视图列表存在的更新修复成本高、团队交流复杂等问题。其中，指定的组件可以是此前端页面中需要复用的组件(例如：可通过固定模板来实现)，也可以是此前端页面中的个性化内容组件或与之前版本的前端页面有显著区别内容的组件(例如：可通过自定义模板来实现)，等等。

在进行RN模板开发时，本发明中提供了固定模板和自定义模板两种RN模板。事先总结出的一系列符合业务的常用视图模板，并提供给用户直接使用，这些模板被称为固定模板。固定模板的样式固定，展示数据的数据模型预先定义好，只提供修改展示内容或者能获取内容的数据库表主键等必要的信息。用户在使用固定模板时便需要提供这些信息。

在固定模板不能满足需求的情况下，本发明的技术方案可使用自定义模板，即自己开发编写的RN模板，只要指定RN模板的JS包下载地址、包名和模块入口。自定义模板的数据获取交由模板开发者自己实现。因此，自定义模板的自由度极高。

为了辅助RN模板的开发，本发明的实施例制作出了脚手架cli工具，提高开发和调试效率。另外，本发明的实施例还定义了一套RN模板的工程结构，以规范开发结构和打包流程。运行脚手架工具后会自动创建预先定义好的RN模板工程结构，初始的RN模板工程结构中包含了预先开发的功能和约定的规则。另外，本发明实施例的脚手架工具还可以实现对代码的检查、模板代码合并、程序调试等等功能。脚手架工具的具体功能实现可以根据需要开发并设置。

图2是本发明一个实施例的模板工程结构示意图。由图2可以看出，在模板程序入口可以选择进入main.js还是app.js。main.js是生产环境实际使用的模板入口，与路由routes.js配合决定显示Bundle(可执行文件)包中的哪个具体组件。在routes.js配置中，需要设定各子组件的标识id、名字和组件代码，根据列表传过来不同的标识，main.js从路由中选择对应的模板组件来显示，列表从而展示不同的模板。而routes.json配置了RN模板的代码仓库地址和RN引擎版本等信息，供后台使用。还有组件的高度和宽度，在模板加载完成后，前端列表将通过与RN通信的方法，按照配置好的数值或者动态计算，重新设置高度宽度。app.js则可以加载开发中的组件和假数据，方便调试自定义模板。具体组件可放在components文件夹中，资源文件可放在image文件夹中统一管理。通过规范好的工程结构，可以简化RN模板开发的初始化工作，且有利于代码可读性和未来模板管理的扩展。脚手架还会自动创建调试和打包模板的脚本。调试时，脚本可根据配置生成RN模板调试URL(Uniform Resource Locator，统一资源定位符)的二维码，方便在原生App中打开URL，并调试RN程序。

在将前端页面中指定的组件制作成RN模板，即RN模板开发完成后，还可以将RN模板打包成JS Bundle可执行文件包供前端视图下载和使用。保存固定模板的JS Bundle包，可以避免重复开发，方便以后使用，而开放加载自定义模板的JS Bundle和自由获取数据，可以提升模板和内容的自由度。

其中，在进行RN模板打包时，打包方式包括：将每个RN模板打包成一个可执行文件包和将多个RN模板打包成一个可执行文件包。对于每个模板独立打包为JS Bundle包的方案，优点在于每个模板在数据上是独立的，可自由组合配置，具有很高的复用性和灵活性，缺点是多个Bundle包中都会存在RN引擎等公共组件部分，渲染效率低。对于将多个模板合并成一个Bundle包的方案，虽然解决了公共部分重复存在的问题，却没有在模板维度上的高灵活复用。在具体实现时，可根据需要灵活选择打包方式。

在RN模板制作完成之后，将RN模板插入到原生或H5列表中，并加载数据以生成视图列表。具体地，可以通过在前端页面创建承载RN视图的控件，并由控件来显示RN模板的方式来将RN模板插入到原生或H5列表中。

图3是本发明一个实施例的将原生/H5列表与RN模板组合展示的流程示意图。如图3所示，在该实施例中，将原生/H5列表与RN模板组合展示的过程主要分为：获取模板数据、下载模板可执行文件包并初始化模板引擎和加载数据并展示3个阶段。

第1阶段：获取模板数据

模板数据需要下载并加载进视图列表后才能使用。模板数据可通过后台下发，RN模板的开发修复并不用跟随前端发版，与其他开发团队不产生冲突，能够实现快速更新，实时修复漏洞，还能降低通过原生控件进行视图列表显示的初始安装包或网页程序的大小，因此，在定义了RN模板之后，视图列表就可以简单拆分为模板、对应的数据和显示顺序。

在本发明实施例中，用JSON字符串定义了一套模板选择、顺序排布和数据存储的规则。该规则的一种具体实现例如：

对于将多个模板合并成一个可执行文件包的方案，用JSON字符串定义的模板选择、顺序排布和数据存储的规则中保存有合并后的JS Bundle包的下载地址、模块入口名等必要信息。再使用数组按展示顺序存储具体的模板数据，从而确定了模板在列表中的顺序，数组元素中存有区分不同模板的标识。另外，还可以在规则中添加了一些优化信息，例如列表是否会被植入RN模板、模板加载时出错页面URL等信息。用户在进入列表时，列表从后台获取到根据此规则存储的数据，解析后进入下一阶段。

对于将每个模板单独打包的方案，用JSON字符串定义的模板选择、顺序排布和数据存储的规则中保存有每个JS Bundle包的下载地址、模块入口名等必要信息。

第2阶段：下载模板可执行文件包并初始化模板引擎

获取到视图列表需要的RN模板数据和原生控件/H5组件展示数据以及固定模板的展示数据后，即可根据指定顺序创建列表内子组件，子组件主要包括原生控件、H5控件和承载RN模板的控件。若是原生控件或H5控件数据，则展示流程不变；若是RN模板数据，则根据具体系统平台，创建承载RN视图的控件，比如Android系统的ReactRootView或iOS系统的RCTRootView，最终将由此控件来显示RN模板。

为了减少原生App安装包的大小，实际的RN模板并不会预装载到安装包中，而是在需要查看模板时才下载并缓存。列表之前获取到的只是需要展示的RN模板的标识(例如：模板的id、名字)等，若不需要展示RN模板，列表可直接展示预装的组件，或兜底页面(例如：由原生控件/H5显示的前端页面的视图列表等)。若需要展示RN模板对应的视图列表，则需先根据RN模板的标识获取与该RN模板对应的可执行文件包。具体地，在获取可执行文件包时，可按照如下流程来执行：

根据RN模板的标识查找缓存中是否存在该RN模板对应的可执行文件包；

若存在，则校验可执行文件包是否为最新版本；若是，则将缓存中的可执行文件包作为获取的可执行文件包，否则根据RN模板的标识下载最新的可执行文件包；

否则，根据RN模板的标识下载最新的可执行文件包。

一般情况下，当首次使用RN模板来展示视图列表，在获取RN模板对应的可执行文件包时，缓存中并没有RN模板对应的可执行文件包，此时，需根据RN模板的标识下载最新的可执行文件包(JS Bundle包)。从列表数据中解析到JS Bundle包的下载地址，快速下载并缓存。当后续再次需要使用该RN模板来展示视图列表时，即可从缓存中查找该RN模板对应的可执行文件包。但是，在查找到可执行文件包之后，还需要对可执行文件包进行校验以判断缓存中的可执行文件包是否是最新版本，若是最新版本，则可直接使用该可执行文件包进行后续操作；否则，需要重新下载最新版本的可执行文件包。本发明使用Bundle包的打包时间和RN模板Git(是一个开源的分布式版本控制系统)代码库的Commit ID来标识此JSBundle包的更新信息，下次需要获取此可执行文件包时，若缓存存在，则先根据时间和Commit ID对比是否是最新的包，若包已过期，则重新下载，若已是最新的包，则使用已下载完成的Bundle包初始化RN引擎。

根据本发明的实施例，在根据RN模板的标识获取与RN模板对应的可执行文件包之前，将承载RN模板的控件高度设置为1以隐藏与RN模板对应的视图列表；以及，在加载可执行文件包之后，将承载RN模板的控件高度设置为指定显示高度以显示与RN模板对应的视图列表。具体地，当可执行文件包下载未完成时，承载RN模板的控件高度将被设置为1，相当于在列表中隐藏，待RN模板可以展示时再设置为真实高度，从而在列表中显示。

第3阶段：加载数据并展示

RN模板初始化完成后，便可调整承载RN模板的控件高度使模板在列表中得以出现，且调用RN的绘制方法来显示具体的UI(User Interface，用户界面)，即显示RN模板对应的视图列表。以将多个模板合并成一个可执行文件包的方案为例，在列表数据中解析模板数组中的每个元素(即：每个RN模板)，根据其模板标识(如：RN模板的ID)从预设的RN模板路由信息中选择对应的组件来显示视图列表，即：根据RN模板标识在JS Bundle包中查找并通过路由显示对应的模板UI，例如图4所示出的本发明一个实施例的固定模板和自定义模板组合展示的界面示意图中，列表分为4个组件，即4个模板，RN代码的route.js根据不同的模板标识Style ID，选择对应的RN模板进行视图列表展示。

对于固定模板，由于数据模型是事先定义好的，且实际的展示数据也在使用模板时已经由用户提供，后台可在下发列表模板方案时同时提供，并存储在模板数组元素中，亦即，通过加载RN模板的可执行文件及展示数据即可加载数据，显示与RN模板对应的视图列表。此时固定模板可直接使用存储在其实体中的数据来进行视图列表展示。

而对于自定义模板，为了不限制其数据的自由度，数据可由模板开发者自己编写请求获取，通过加载RN模板的可执行文件包以获取RN模板的展示数据下载路径，并根据展示数据下载路径下载展示数据以加载数据，显示与RN模板对应的视图列表。具体地，当通过RN引擎入口执行模板代码时，获取展示数据的请求可被调用，在异步获取到展示数据后，可用JS更新状态或属性功能来自行刷新模板中的展示数据，从而进行视图列表展示。

图5是根据本发明实施例的在应用程序前端页面显示视图列表的装置的主要模块示意图。如图5所示，本发明实施例的在应用程序前端页面显示视图列表的装置500主要包括组件创建模块501、文件获取模块502和视图显示模块503。

组件创建模块501，用于获取视图列表数据，根据指定顺序创建列表内子组件，子组件包括原生控件、H5控件和承载RN模板的控件；

文件获取模块502，用于判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与该RN模板对应的可执行文件包；

视图显示模块503，用于加载可执行文件包以显示与该RN模板对应的视图列表。

根据本发明的一个实施例，文件获取模块502还可以用于：

根据RN模板的标识查找缓存中是否存在RN模板对应的可执行文件包；

若存在，则校验可执行文件包是否为最新版本；若是，则将缓存中的可执行文件包作为获取的可执行文件包，否则根据RN模板的标识下载最新的可执行文件包；

否则，根据RN模板的标识下载最新的可执行文件包。

根据本发明的另一个实施例，RN模板包括固定模板和自定义模板，并且，视图显示模块503还可以用于：

若RN模板为固定模板，则通过加载RN模板的可执行文件包及展示数据以显示与RN模板对应的视图列表；

若RN模板为自定义模板，则通过加载RN模板的可执行文件包以获取RN模板的展示数据下载路径，并根据展示数据下载路径下载展示数据并加载展示数据以显示与RN模板对应的视图列表。

根据本发明的又一个实施例，在应用程序前端页面显示视图列表的装置500还可以包括显示调整模块(图中未示出)，用于：

在根据RN模板的标识获取与RN模板对应的可执行文件包之前，将承载RN模板的控件高度设置为1以隐藏与RN模板对应的视图列表；

以及，在加载可执行文件包之后，将承载RN模板的控件高度设置为指定显示高度以显示与RN模板对应的视图列表。

根据本发明的又一个实施例，视图显示模块503还可以用于：

加载可执行文件包，并根据RN模板的标识从预设的RN模板路由信息中选择对应的RN模板来显示视图列表。

根据本发明实施例的技术方案，通过获取视图列表数据，根据指定顺序创建列表内子组件，子组件包括原生控件、H5控件和承载RN模板的控件；判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与RN模板对应的可执行文件包；加载可执行文件包以显示与RN模板对应的视图列表可以使RN模板和原生/H5组件在列表中组合展示，从而使得列表元素拥有RN技术的优点，既解决了单独使用H5生成视图列表带来的性能问题，又避免了单独使用原生控件生成视图列表存在的更新修复成本高、团队交流复杂等问题。同时，本发明还利用模板重用、自定义排布顺序、自定义显示数据等方式，使得列表能像搭积木一样被快速创建，且其展示的内容多变、组件布局灵活，解决了重复开发、快速更新、难以自定义的问题。

图6示出了可以应用本发明实施例的在应用程序前端页面显示视图列表的方法或在应用程序前端页面显示视图列表的装置的示例性系统架构600。

如图6所示，系统架构600可以包括终端设备601、602、603，网络604和服务器605。网络604用以在终端设备601、602、603和服务器605之间提供通信链路的介质。网络604可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备601、602、603通过网络604与服务器605交互，以接收或发送消息等。终端设备601、602、603上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备601、602、603可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器605可以是提供各种服务的服务器，例如对用户利用终端设备601、602、603所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的在应用程序前端页面显示视图列表的方法一般由服务器605执行，相应地，在应用程序前端页面显示视图列表的装置一般设置于服务器605中。

应该理解，图6中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图7，其示出了适于用来实现本发明实施例的终端设备或服务器的计算机系统700的结构示意图。图7示出的终端设备或服务器仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，计算机系统700包括中央处理单元(CPU)701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。在RAM 703中，还存储有系统700操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(CPU)701执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，例如，可以描述为：一种处理器包括组件创建模块、文件获取模块和视图显示模块。其中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定，例如，组件创建模块还可以被描述为“用于获取视图列表数据，根据指定顺序创建列表内子组件的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：获取视图列表数据，根据指定顺序创建列表内子组件，所述子组件包括原生控件、H5控件和承载RN模板的控件；判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与所述RN模板对应的可执行文件包；加载所述可执行文件包以显示与所述RN模板对应的视图列表。

根据本发明实施例的技术方案，通过获取视图列表数据，根据指定顺序创建列表内子组件，子组件包括原生控件、H5控件和承载RN模板的控件；判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与RN模板对应的可执行文件包；加载可执行文件包以显示与RN模板对应的视图列表可以使RN模板和原生/H5组件在列表中组合展示，从而使得列表元素拥有RN技术的优点，既解决了单独使用H5生成视图列表带来的性能问题，又避免了单独使用原生控件生成视图列表存在的更新修复成本高、团队交流复杂等问题。同时，本发明还利用模板重用、自定义排布顺序、自定义显示数据等方式，使得列表能像搭积木一样被快速创建，且其展示的内容多变、组件布局灵活，解决了重复开发、快速更新、难以自定义的问题。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (12)

1.一种在应用程序前端页面显示视图列表的方法，其特征在于，包括：

获取视图列表数据，根据指定顺序创建列表内子组件，所述子组件包括原生控件、H5控件和承载RN模板的控件；

判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与所述RN模板对应的可执行文件包；

加载所述可执行文件包以显示与所述RN模板对应的视图列表。

2.根据权利要求1所述的方法，其特征在于，根据RN模板的标识获取与所述RN模板对应的可执行文件包包括：

根据RN模板的标识查找缓存中是否存在所述RN模板对应的可执行文件包；

若存在，则校验所述可执行文件包是否为最新版本；若是，则将缓存中的可执行文件包作为获取的可执行文件包，否则根据所述RN模板的标识下载最新的可执行文件包；

否则，根据所述RN模板的标识下载最新的可执行文件包。

3.根据权利要求1所述的方法，其特征在于，所述RN模板包括固定模板和自定义模板，并且，加载所述可执行文件包以显示与所述RN模板对应的视图列表包括：

若所述RN模板为固定模板，则通过加载所述RN模板的可执行文件包及展示数据以显示与所述RN模板对应的视图列表；

若所述RN模板为自定义模板，则通过加载所述RN模板的可执行文件包以获取所述RN模板的展示数据下载路径，并根据所述展示数据下载路径下载展示数据并加载所述展示数据以显示与所述RN模板对应的视图列表。

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

在根据RN模板的标识获取与所述RN模板对应的可执行文件包之前，将承载RN模板的控件高度设置为1以隐藏与所述RN模板对应的视图列表；

以及，在加载所述可执行文件包之后，将承载RN模板的控件高度设置为指定显示高度以显示与所述RN模板对应的视图列表。

5.根据权利要求1所述的方法，其特征在于，加载所述可执行文件包以显示与所述RN模板对应的视图列表包括：

加载所述可执行文件包，并根据所述RN模板的标识从预设的RN模板路由信息中选择对应的组件来显示视图列表。

6.一种在应用程序前端页面显示视图列表的装置，其特征在于，包括：

组件创建模块，用于获取视图列表数据，根据指定顺序创建列表内子组件，所述子组件包括原生控件、H5控件和承载RN模板的控件；

文件获取模块，用于判断待展示的子组件为承载RN模板的控件时，根据RN模板的标识获取与所述RN模板对应的可执行文件包；

视图显示模块，用于加载所述可执行文件包以显示与所述RN模板对应的视图列表。

7.根据权利要求6所述的装置，其特征在于，所述文件获取模块还用于：

根据RN模板的标识查找缓存中是否存在所述RN模板对应的可执行文件包；

若存在，则校验所述可执行文件包是否为最新版本；若是，则将缓存中的可执行文件包作为获取的可执行文件包，否则根据所述RN模板的标识下载最新的可执行文件包；

否则，根据所述RN模板的标识下载最新的可执行文件包。

8.根据权利要求6所述的装置，其特征在于，所述RN模板包括固定模板和自定义模板，并且，所述视图显示模块还用于：

若所述RN模板为固定模板，则通过加载所述RN模板的可执行文件包及展示数据以显示与所述RN模板对应的视图列表；

若所述RN模板为自定义模板，则通过加载所述RN模板的可执行文件包以获取所述RN模板的展示数据下载路径，并根据所述展示数据下载路径下载展示数据并加载所述展示数据以显示与所述RN模板对应的视图列表。

9.根据权利要求6所述的装置，其特征在于，还包括显示调整模块，用于：

在根据RN模板的标识获取与所述RN模板对应的可执行文件包之前，将承载RN模板的控件高度设置为1以隐藏与所述RN模板对应的视图列表；

以及，在加载所述可执行文件包之后，将承载RN模板的控件高度设置为指定显示高度以显示与所述RN模板对应的视图列表。

10.根据权利要求6所述的装置，其特征在于，所述视图显示模块还用于：

加载所述可执行文件包，并根据所述RN模板的标识从预设的RN模板路由信息中选择对应的组件来显示视图列表。

11.一种在应用程序前端页面显示视图列表的电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。

12.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-5中任一所述的方法。

Images