CN105630992B - 静态页面中的场景显示方法及装置 - Google Patents

Abstract

本发明公开了一种静态页面中的场景显示方法及装置。其中，该方法包括：获取场景标记，所述场景标记用于标识当前场景；根据所述场景标记向静态资源服务器请求获取所述当前场景对应的脚本文件；执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景。将展现场景所对应的脚本文件放置在静态资源服务器一侧，便于开发者自由地对脚本文件进行调试以及调整，而不必依赖静态页面所在的应用的服务提供商以及其服务，可以实现静态页面中显示的内容随开发者在静态资源服务器中的调整而改变的技术效果。本发明解决了相关技术中静态指引页面展示存在局限性的技术问题。

Description

静态页面中的场景显示方法及装置

技术领域

本发明涉及计算机领域，具体而言，涉及一种静态页面中的场景显示方法及装置。

背景技术

随着微信、微博、易信等移动社交工具兴起，非常多用户将活动推广至这些社交工具。随着时间的变化，活动页面需要不断得变更为应景的场景，但用户访问之前的分享链接需展示原使用场景，访问最新的分享时又需展示当前推广场景，这种处理对用户而言，能保留美好的回忆场景，提高用户体验。

其次受移动社交工具影响，不能在上述移动社交工具中直接打开第三方应用，于是会制作一个统一的静态指引页面。但对于推广活动而言，希望当前推广活动风格也影响到静态指引页面的展示，这样利于用户体验一致性。

相关技术中存在一种方案，从服务器获取网页的框架代码，向该服务器请求页面内容，接收该服务器发送的页面片段，将该服务器发送的页面片断插入该框架代码中生成页面。然而，该技术中是服务端合成页面片段插入页面，开发调试只能依赖服务端环境，工作效率低下，对团队协作、代码复用不太友好。还有其他方案仅依赖CSS对UI的调整来实现多皮肤展示，页面节点固定，故对UI展示局限有限，不利于活动运营的特殊需求。

针对相关技术中静态指引页面展示存在局限性的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种静态页面中的场景显示方法及装置，以至少解决相关技术中静态指引页面展示存在局限性的技术问题。

根据本发明实施例的一个方面，提供了一种静态页面中的场景显示方法，包括：获取场景标记，所述场景标记用于标识当前场景；根据所述场景标记向静态资源服务器请求获取所述当前场景对应的脚本文件；执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景。

可选地，获取场景标记包括：根据所述静态页面的标识获取所述场景标记。

可选地，根据静态页面的标识获取场景标记包括：从所述静态页面的统一资源定位符URL中获取所述场景标记；或者，从所述静态页面的URL中获取活动标记，然后根据所述活动标记从应用服务器获取所述场景标记。

可选地，所述脚本文件包括：超文本标记语言HTML模板和层叠样式表CSS。

可选地，执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景包括：向所述静态页面中插入所述脚本文件中包含的CSS；根据所述脚本文件中包含的HTML模板绘制所述静态页面。

可选地，在执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景之前，还包括：获取展示数据；根据所述脚本文件中包含的HTML模板绘制所述静态页面包括：将所述脚本文件中包含的HTML模板与所述展示数据结合，并绘制到所述静态页面。

可选地，获取展示数据包括：从所述静态页面的URL中获取所述展示数据；或者，从所述静态页面的URL中获取活动标记，然后根据所述活动标记从应用服务器获取所述展示数据。

根据本发明实施例的另一方面，还提供了一种静态页面中的场景显示装置，包括：获取模块，用于获取场景标记，所述场景标记用于标识当前场景；请求模块，用于根据所述场景标记向静态资源服务器请求获取所述当前场景对应的脚本文件；显示模块，用于执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景。

可选地，所述获取模块还用于：根据所述静态页面的标识获取所述场景标记。

可选地，所述获取模块包括：第一获取单元，用于从所述静态页面的统一资源定位符URL中获取所述场景标记；或者，第二获取单元，用于从所述静态页面的URL中获取活动标记，然后根据所述活动标记从应用服务器获取所述场景标记。

可选地，所述脚本文件包括：超文本标记语言HTML模板和层叠样式表CSS；所述显示模块包括：插入单元，用于向所述静态页面中插入所述脚本文件中包含的CSS；绘制单元，用于根据所述脚本文件中包含的HTML模板绘制所述静态页面。

可选地，所述装置还包括：第三获取单元，用于获取展示数据；所述绘制单元包括：结合单元，用于将所述脚本文件中包含的HTML模板与所述展示数据结合，并绘制到所述静态页面。

可选地，所述第三获取单元包括：第一获取子单元，用于从所述静态页面的URL中获取所述展示数据；或者，第二获取子单元，用于从所述静态页面的URL中获取活动标记，然后根据所述活动标记从应用服务器获取所述展示数据。

在本发明实施例中，采用获取场景标记，所述场景标记用于标识当前场景；根据所述场景标记向静态资源服务器请求获取所述当前场景对应的脚本文件；执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景的方式，将展现场景所对应的脚本文件放置在静态资源服务器一侧，便于开发者自由地对脚本文件进行调试以及调整，而不必依赖静态页面所在的应用的服务提供商以及其服务，可以实现静态页面中显示的内容随开发者在静态资源服务器中的调整而改变的技术效果，进而解决了相关技术中静态指引页面展示存在局限性的技术问题。

附图说明

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

图1是根据本发明实施例的静态页面中的场景显示方法的流程图；

图2是根据本发明实施例的静态页面中的场景显示装置的结构框图；

图3是根据本发明优选实施例的静态页面中的场景显示方案的流程图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为提高开发工作效率，利于开发调试，根据本发明实施例，提供了一种静态页面中的场景显示方案的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的静态页面中的场景显示方法的流程图，如图1所示，该方法包括如下步骤：

步骤S102，获取场景标记，所述场景标记用于标识当前场景；

步骤S104，根据所述场景标记向静态资源服务器请求获取所述当前场景对应的脚本文件；

步骤S106，执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景。

通过上述步骤，通过场景标记从静态资源服务器获取脚本文件，然后执行并显示在静态页面中，从而将展现场景所对应的脚本文件(例如JavaScript文件)放置在静态资源服务器一侧，便于开发者自由地对脚本文件进行调试以及调整，而不必依赖静态页面所在的应用的服务提供商以及其服务，可以实现静态页面中显示的内容随开发者在静态资源服务器中的调整而改变的技术效果，进而解决了相关技术中静态指引页面展示存在局限性的技术问题。

其中，文中的场景指的是静态页面对应的应用或页面内的用户界面UI或者其活动效果图。

可选地，上述步骤S102中，可以根据所述静态页面的标识来获取所述场景标记。例如，可以从所述静态页面的统一资源定位符(Uniform Resource Locator，简称为URL)中直接获取所述场景标记；或者，考虑到可靠性以及安全性等问题，也可以从所述静态页面的URL中先获取活动标记，然后根据该活动标记从应用服务器中再获取所述场景标记。

可选地，所述脚本文件中可以包括超文本标记语言(Hyper Text Mark-upLanguage，简称为HTML)模板和层叠样式表(Cascading Style Sheet，简称为CSS)。在这种情况下，步骤S106中的具体实现过程可以是：向所述静态页面中插入所述脚本文件中包含的CSS样式表，然后根据所述脚本文件中包含的HTML模板绘制所述静态页面。

进一步，可以将HTML模板与展示到模板中的数据进行分离，从而解决UI与逻辑结构的混杂问题，能满足推广运营的任何UI展示需求，提高用户体验。具体地，可以先获取展示数据；然后将所述脚本文件中包含的HTML模板与所述展示数据结合，并绘制到所述静态页面。

可选地，可以直接在静态页面的URL中携带所述展示数据，进而在上述过程中直接从所述静态页面的URL中获取所述展示数据；或者，考虑到可靠性以及安全性等问题，也可以将所述展示数据放置到应用服务器侧，在静态页面的URL中仅获取活动标记，然后根据所述活动标记从应用服务器获取所述展示数据。

本实施例中的方案是由静态页面基于ajax来展现各场景。JavaScript解析URL中的展示数据(例如可以为带“？”数据)，直接获取场景标记，或者获取活动标记然后向应用服务器发起ajax请求后获取场景标记，客户端拿到场景标记后向静态资源服务器发起请求，获取当前场景的JavaScript(JavaScript中可以包含有当前场景的HTML模板、CSS等)文件，执行JavaScript文件，将CSS插入页面，再将HTML模板与数据(来自URL中带“？”后的解析出的数据，或者应用服务器返回的数据，或者为空)结合，从而实现展示不同的场景。

通过本实施例中给出的上述方案，HTML模板由前端来开发调用，存放于静态资源服务器，通过ajax向应用服务端或者从URL中获取数据，在客户端进行合成页面片段。使用静态页面的主要原因是其能开发便捷、无开发调试环境限制、调试维护简单。其次静态页面存放在静态资源服务器，可以更快速展示页面(User Interface，简称为UI)给用户。

根据本发明实施例，还提供了一种静态页面中的场景显示方案的装置实施例。图2是根据本发明实施例的静态页面中的场景显示装置的结构框图，如图2所示，该装置包括：

获取模块22，用于获取场景标记，所述场景标记用于标识当前场景；

请求模块24，与获取模块22相连，用于根据所述场景标记向静态资源服务器请求获取所述当前场景对应的脚本文件；

显示模块26，与请求模块24相连，用于执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景。

通过上述模块，获取模块22获取到场景标记，请求模块24通过场景标记从静态资源服务器获取脚本文件，然后显示模块26执行并显示在静态页面中，从而将展现场景所对应的脚本文件(例如JavaScript文件)放置在静态资源服务器一侧，便于开发者自由地对脚本文件进行调试以及调整，而不必依赖静态页面所在的应用的服务提供商以及其服务，可以实现静态页面中显示的内容随开发者在静态资源服务器中的调整而改变的技术效果，进而解决了相关技术中静态指引页面展示存在局限性的技术问题。

可选地，所述获取模块22还可以用于：根据所述静态页面的标识获取所述场景标记。

可选地，所述获取模块22可以包括：第一获取单元，用于从所述静态页面的URL中获取所述场景标记；或者，第二获取单元，用于从所述静态页面的URL中获取活动标记，然后根据所述活动标记从应用服务器获取所述场景标记。

可选地，所述脚本文件可以包括：HTML模板和CSS样式表；则所述显示模块26可以包括：插入单元，用于向所述静态页面中插入所述脚本文件中包含的CSS样式表；绘制单元，用于根据所述脚本文件中包含的HTML模板绘制所述静态页面。

可选地，所述装置还可以包括：第三获取单元，用于获取展示数据；所述绘制单元可以包括：结合单元，用于将所述脚本文件中包含的HTML模板与所述展示数据结合，并绘制到所述静态页面。

可选地，所述第三获取单元可以包括：第一获取子单元，用于从所述静态页面的URL中获取所述展示数据；或者，第二获取子单元，用于从所述静态页面的URL中获取活动标记，然后根据所述活动标记从应用服务器获取所述展示数据。

下面结合优选实施例进行说明，以下优选实施例结合了上述实施例及其优选实施方式。

在以下优选实施例中，给出了一种较优的具体实现方式，图3是根据本发明优选实施例的静态页面中的场景显示方案的流程图，参考图3所示，该显示方案具体如下：

S302、在对外的静态页面的URL后添加当前场景的特殊标记，如:活动标记(http://xx？id＝xx)、场景标记(http://xxx？skinId＝xx)。

此处需要说明的是：(1)id和skinId为索引上述活动标记和场景标记的关键字(key)，可自行定义，当前使用仅用来演示区别；(2)URL中也可添加数据，例如http://xx？id＝xx&n＝xx&p＝xx，用于传递要展示的数据，该要展示的数据可以在后续步骤中添加到html模板中，生成场景片段。此处&后面的即为要展示的数据(即上文中的展示数据)。

S304、客户端解析URL。

S306、若直接解析到场景标记skinId，则直接跳至S314；若未解析到场景标记skinId，则转至S308。

S308、若解析到活动标记id＝xx，向应用服务端发起ajax请求(S310)，并跳转至S314；否则指定默认场景标记(S312)，并跳转至S314；在S310中，应用服务端(也称应用服务器)拿到客户端提交的活动id，返回对应记录的数据(包含用户数据、运营数据、展示数据、以及场景标记skinId，其中这里的用户数据指的是具体用户参与活动时的操作获得的数据，如抽中不同的奖品；这里运营数据指的是运营人员配置的数据，如A活动要用A文案，B活动用B文案)；这里通过应用服务端获取数据的原因主要是有些展示数据(即添加到html模板中，生成场景片段的数据，例如可以是活动的总数据，如A活动总共有XX人参加之类，也可以是其他展示过程中会发生变化的数据)和场景标记skinId因可靠性，安全性原因并不通过url进行传递，因此可以通过ajax向应用服务器进行获取。

S314、客户端拿到场景标记skinId，向静态资源服务器发起请求获取场景标记对应的JavaScript脚本，此脚本中包含HTML模板和CSS样式表；通过这种方式，将HTML模板和CSS样式表处理到JavaScript脚本中，解决浏览器对文本加载的跨域限制，其次HTML模板和CSS样式表都由前端开发维护，存放于静态资源服务器，可以降低与后台的开发成本，使代码复用、调试变得简单；使用HTML模板就可让页面展示更多样化，有利于运营推广。

S316、客户端执行静态资源服务端返回的JavaScript脚本。

S318、客户端动态向页面插入JavaScript脚本中包含的css样式表。

S320、客户端将JavaScript脚本中包含的html模板和数据(来自url中带“？”后的解析出的数据，或者应用服务器返回的数据，或者为空)结合，绘制到页面。

通过上述优选实施例给出的方案，以一种更为简单、高效的方法来实现展示多风格场景的技术：S302和S304步使用静态页面，减少后端开发，全由前端来进行开发，有利于开发敏捷、调试方便。S302-S312步，主要是解决场景标记数据传递问题，让数据传递简单。S314步，主要是html模板和数据进行分离，解决UI与逻辑结构的混杂问题。

通过上述流程，依据静态资源服务器中的脚本文件以及URL或者应用服务器中的展示数据，从而实现了对静态页面中显示内容的实时绘制，例如，可以根据当前时间来改变静态页面中的显示内容的状态，比如，针对一个和动植物有关的推广活动，可以根据当前时间来实时改变动植物的活动状态，在清晨动物从睡眠中苏醒，在吃饭时间进食，在夜晚进入睡眠，当然也可以依据春夏秋冬四季来相应变化植物的生活状态以及人的衣物等等，不过这种功能需要应用服务器提供足够的支持，以获取时间和地理位置等信息。再例如，可以根据当前地理位置来改变静态页面中的显示内容的状态，比如在不同地域人的衣物增减等。此外，也可以由开发者实施活动主题来改变静态页面中的显示内容的状态，比如春节主题和双11主题相应场景的不同等。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (4)

1.一种静态页面中的场景显示方法，其特征在于，包括：

获取场景标记，所述场景标记用于标识当前场景，所述场景至少为静态页面对应的页面内的用户界面或活动效果图；

根据所述场景标记向静态资源服务器请求获取所述当前场景对应的脚本文件；

执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景，

其中，所述脚本文件包括：超文本标记语言HTML模板和层叠样式表CSS；

执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景包括：向所述静态页面中插入所述脚本文件中包含的CSS；根据所述脚本文件中包含的HTML模板绘制所述静态页面；

在执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景之前，还包括：获取展示数据；

根据所述脚本文件中包含的HTML模板绘制所述静态页面包括：将所述脚本文件中包含的HTML模板与所述展示数据结合，并绘制到所述静态页面；

获取场景标记包括：根据所述静态页面的标识获取所述场景标记；根据静态页面的标识获取场景标记包括：从所述静态页面的统一资源定位符URL中获取所述场景标记；或者，从所述静态页面的URL中获取活动标记，然后根据所述活动标记从应用服务器获取所述场景标记。

2.根据权利要求1所述的方法，其特征在于，获取展示数据包括：

从所述静态页面的URL中获取所述展示数据；或者，

从所述静态页面的URL中获取活动标记，然后根据所述活动标记从应用服务器获取所述展示数据。

3.一种静态页面中的场景显示装置，其特征在于，包括：

获取模块，用于获取场景标记，所述场景标记用于标识当前场景，所述场景至少为静态页面对应的页面内的用户界面或活动效果图；

请求模块，用于根据所述场景标记向静态资源服务器请求获取所述当前场景对应的脚本文件；

显示模块，用于执行所述脚本文件以获得所述当前场景，并在静态页面中显示所述当前场景；

其中，所述脚本文件包括：超文本标记语言HTML模板和层叠样式表CSS；所述显示模块包括：

插入单元，用于向所述静态页面中插入所述脚本文件中包含的CSS；

绘制单元，用于根据所述脚本文件中包含的HTML模板绘制所述静态页面；

第三获取单元，用于获取展示数据；

所述绘制单元包括：结合单元，用于将所述脚本文件中包含的HTML模板与所述展示数据结合，并绘制到所述静态页面；

所述获取模块还用于：根据所述静态页面的标识获取所述场景标记；所述获取模块包括：第一获取单元，用于从所述静态页面的统一资源定位符URL中获取所述场景标记；或者，第二获取单元，用于从所述静态页面的URL中获取活动标记，然后根据所述活动标记从应用服务器获取所述场景标记。

4.根据权利要求3所述的装置，其特征在于，所述第三获取单元包括：

第一获取子单元，用于从所述静态页面的URL中获取所述展示数据；或者，

第二获取子单元，用于从所述静态页面的URL中获取活动标记，然后根据所述活动标记从应用服务器获取所述展示数据。