CN113868565A - 皮肤样式的文件编辑方法及装置 - Google Patents

皮肤样式的文件编辑方法及装置 Download PDF

Info

Publication number
CN113868565A
CN113868565A CN202111114489.1A CN202111114489A CN113868565A CN 113868565 A CN113868565 A CN 113868565A CN 202111114489 A CN202111114489 A CN 202111114489A CN 113868565 A CN113868565 A CN 113868565A
Authority
CN
China
Prior art keywords
style
file
variable
target
dynamic
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
CN202111114489.1A
Other languages
English (en)
Other versions
CN113868565B (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.)
Shenzhen Tencent Domain Computer Network Co Ltd
Original Assignee
Shenzhen Tencent Domain Computer Network 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 Shenzhen Tencent Domain Computer Network Co Ltd filed Critical Shenzhen Tencent Domain Computer Network Co Ltd
Priority to CN202111114489.1A priority Critical patent/CN113868565B/zh
Publication of CN113868565A publication Critical patent/CN113868565A/zh
Application granted granted Critical
Publication of CN113868565B publication Critical patent/CN113868565B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供了一种皮肤样式的文件编辑方法、装置、设备及计算机可读存储介质;方法包括:获取目标应用的页面对应第一皮肤样式的静态样式文件;当接收到针对页面中目标元素的样式调整指令时,获取静态样式文件中标记的目标元素的位置信息,该位置信息,用于表征目标元素对应的代码在目标应用的源文件中的位置;根据位置信息,从对应目标元素的代码中,确定目标元素的动态样式变量;响应于针对动态样式变量的修改指令,对确定的动态样式变量进行修改;根据修改后的动态样式变量,进行静态样式文件编译,得到第二皮肤样式的静态样式文件。通过本申请,能够快速对皮肤样式进行编辑,进而提升皮肤样式的静态样式文件的生成效率。

Description

皮肤样式的文件编辑方法及装置
技术领域
本申请涉及计算机技术,尤其涉及一种皮肤样式的文件编辑方法及装置。
背景技术
随着互联网技术的飞速发展,网站的种类和数量越来越多,用户通过浏览网页来获取各种各样的信息。为了给用户提供更好的浏览体验,网页应用在不同场景下需要提供不同的皮肤样式来展示网页应用的页面,因此开发人员需要为网页应用开发不同皮肤样式对应的静态样式文件。
为得到不同皮肤样式对应的静态样式文件,通常是为不同的皮肤样式创建不同的动态样式变量文件(如Less/Sass变量文件),定义相同变量名称,覆盖默认变量值。根据不同皮肤样式的动态样式变量文件和默认变量文件,编译生成不同皮肤样式对应的静态样式文件。然而,上述方式的操作复杂,导致皮肤样式的静态样式文件生成效率低。
发明内容
本申请实施例提供一种皮肤样式的文件编辑方法、装置、计算机设备及计算机可读存储介质,能够快速对皮肤样式进行编辑,进而提升皮肤样式的静态样式文件的生成效率。
本申请实施例的技术方案是这样实现的:
本申请实施例提供一种皮肤样式的文件编辑方法,包括:
获取目标应用的页面对应第一皮肤样式的静态样式文件;
当接收到针对所述页面中目标元素的样式调整指令时,获取所述静态样式文件中标记的所述目标元素的位置信息,所述位置信息,用于表征所述目标元素对应的代码在所述目标应用的源文件中的位置;
根据所述位置信息,从对应所述目标元素的代码中,确定所述目标元素的动态样式变量;
响应于针对所述动态样式变量的修改指令,对确定的所述动态样式变量进行修改;
根据修改后的所述动态样式变量,进行静态样式文件编译,得到第二皮肤样式的静态样式文件。
本申请实施例提供一种皮肤样式的文件编辑装置,包括:
第一获取模块,用于获取目标应用的页面对应第一皮肤样式的静态样式文件;
第二获取模块,用于当接收到针对所述页面中目标元素的样式调整指令时,获取所述静态样式文件中标记的所述目标元素的位置信息,所述位置信息,用于表征所述目标元素对应的代码在所述目标应用的源文件中的位置;
确定模块,用于根据所述位置信息,从对应所述目标元素的代码中,确定所述目标元素的动态样式变量;
修改模块,用于响应于针对所述动态样式变量的修改指令,对确定的所述动态样式变量进行修改;
编译模块,根据修改后的所述动态样式变量,进行静态样式文件编译,得到第二皮肤样式的静态样式文件。
上述方案中,所述装置还包括:
展示模块,用于通过所述第一皮肤样式展示所述目标应用的页面;
所述得到第二皮肤样式的静态样式文件之后,所述装置还包括:
渲染模块,用于基于所述第二皮肤样式的静态样式文件进行页面渲染,以将所述目标应用的页面由通过所述第一皮肤样式展示切换为通过所述第二皮肤样式展示。
上述方案中,所述第一获取模块,还用于对所述目标应用的源文件进行编译,得到所述第一皮肤样式的静态样式文件;
在编译过程中获取各组件在源文件中的组件位置信息,并
在所述静态样式文件中,将所述组件位置信息注入相应组件的根元素上,以实现对所述组件的目标元素进行位置信息标记。
上述方案中,所述第一获取模块,还用于当接收到针对所述页面中目标元素的样式调整指令时,获取所述目标元素的标识信息;
根据所述目标元素的标识信息,在所述第一皮肤样式的静态样式文件中,根据所述静态样式文件中的样式层次结构,逐层向上查询,以确定所述目标元素对应的根元素;
获取确定的所述根元素中注入的所述组件位置信息,并将所述组件位置信息作为标记的所述目标元素的位置信息。
上述方案中,所述确定模块,还用于根据所述位置信息,在对应所述目标元素的代码中查找所述目标元素的样式信息;
获取所述样式信息中所述动态样式变量的标识信息;
根据所述动态样式变量的标识信息,在全局变量文件中确定所述动态样式变量的值。
上述方案中,所述修改模块,还用于当所述源文件中包括第一皮肤样式的第一全局变量文件、及所述第二皮肤样式的第二全局变量文件时,响应于针对所述动态样式变量的修改指令,获取所要修改的目标动态样式变量及相应的目标值;
将目标动态样式变量分别与所述第一全局变量文件中的动态样式变量、及所述第二全局变量文件中的动态样式变量进行匹配,得到匹配结果;
根据所述匹配结果,对确定的所述动态样式变量进行修改。
上述方案中,所述修改模块,还用于当所述匹配结果表征所述第一全局变量文件与所述第二全局变量文件中均存在所述目标动态样式变量、且所述第一全局变量文件中所述目标动态样式变量的值与所述目标值相同时,删除所述第二全局变量文件中的所述目标动态样式变量。
上述方案中,所述修改模块,还用于当所述匹配结果表征所述第一全局变量文件中不存在值为目标值的目标动态样式变量、且所述第二全局变量文件中不存在所述目标动态样式变量时,在所述第二全局变量文件中添加所述目标动态样式变量,并将添加的所述目标动态样式变量的值设置为所述目标值。
上述方案中,所述修改模块,还用于当所述匹配结果表征所述第一全局变量文件中不存在值为目标值的目标动态样式变量、且所述第二全局变量文件中存在值不为目标值的所述目标动态样式变量时,将所述第二全局变量文件中目标动态样式变量的值修改为目标值。
本申请实施例提供一种计算机设备,包括:
存储器,用于存储可执行指令;
处理器,用于执行所述存储器中存储的可执行指令时,实现本申请实施例提供的皮肤样式的文件编辑方法。
本申请实施例提供一种计算机可读存储介质,存储有可执行指令,用于引起处理器执行时,实现本申请实施例提供的皮肤样式的文件编辑方法。
本申请实施例具有以下有益效果:
应用上述实施例,当接收到针对页面中目标元素的样式调整指令时,获取目标应用的页面对应第一皮肤样式的静态样式文件中标记的目标元素的位置信息,然后根据所述位置信息,从对应目标元素的代码中,确定目标元素的动态样式变量,响应于针对动态样式变量的修改指令,对确定的动态样式变量进行修改,从而根据修改后的动态样式变量编译得到第二皮肤样式的静态样式文件;
由于本申请在第一皮肤样式的静态样式文件中标记了目标元素的位置信息,且该位置信息,用于表征目标元素对应的代码在目标应用的源文件中的位置,如此,能够在接收到针对目标元素的样式调整指令时,根据获取的位置信息自动获取到该目标元素的动态样式变量,然后通过针对该动态样式变量的修改,实现在源文件中对动态样式变量的修改,进而实现快速生成第二皮肤样式的静态样式文件,提升不同皮肤样式的静态样式文件的生成效率。
附图说明
图1是相关技术提供的皮肤样式的文件编辑方法的流程示意图;
图2A-2B是本申请实施例提供的网页应用的页面示意图;
图3是本申请实施例提供的皮肤样式的文件编辑系统100的一个可选的架构示意图;
图4是本申请实施例提供的计算机设备500的结构示意图;
图5是本申请实施例提供的皮肤样式的文件编辑方法的流程示意图;
图6是本申请实施例提供的编译过程示意图;
图7是本申请实施例提供的动态样式变量的查找过程示意图;
图8是本申请实施例提供的动态样式变量的修改过程示意图;
图9是本申请实施例提供的动态样式变量的修改过程示意图;
图10是本申请实施例提供的动态样式变量的修改过程示意图;
图11是本申请实施例提供的皮肤样式的文件编辑方法的流程示意图;
图12是本申请实施例提供的皮肤样式的文件编辑方法的流程示意图;
图13是本申请实施例提供的执行皮肤样式的文件编辑方法的模块示意图;
图14是本申请实施例提供的皮肤样式的文件编辑方法的流程示意图。
具体实施方式
为了使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请作进一步地详细描述,所描述的实施例不应视为对本申请的限制,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本申请保护的范围。
在以下的描述中,涉及到“一些实施例”,其描述了所有可能实施例的子集,但是可以理解,“一些实施例”可以是所有可能实施例的相同子集或不同子集,并且可以在不冲突的情况下相互结合。
在以下的描述中,所涉及的术语“第一\第二\第三”仅仅是区别类似的对象,不代表针对对象的特定排序,可以理解地,“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序,以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。
除非另有定义,本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的,不是旨在限制本申请。
对本申请实施例进行进一步详细说明之前,对本申请实施例中涉及的名词和术语进行说明,本申请实施例中涉及的名词和术语适用于如下的解释。
1)皮肤样式:页面的一种展示形式。
2)层叠样式表(CSS,Cascading Style Sheets):是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
3)Less::是一种动态样式语言,对CSS赋予了动态语言的特性,如变量、继承、运算、函数。
4)Sass:是一种动态样式语言,Sass语法属于缩排语法,比CSS多出一些功能,如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等,更容易阅读。
5)编译:利用编译程序从源语言编写的源程序产生目标程序的过程,如将Less、Sass等CSS预处理语言转换成CSS样式。
6)响应于:响应于,用于表示所执行的操作所依赖的条件或者状态,当满足所依赖的条件或状态时,所执行的一个或多个操作可以是实时的,也可以具有设定的延迟;在没有特别说明的情况下,所执行的多个操作不存在执行先后顺序的限制。
图1是相关技术提供的皮肤样式的文件编辑方法示意图,参见图1,首先从项目组件中抽取可变的超文本标记语言(HTML)元素,将抽取的HTML元素的样式属性值到公共文件作为默认Less/Sass变量文件;对于特定的皮肤,为特定皮肤样式创建不同的Less/Sass变量文件,定义相同变量名称,覆盖默认的变量值。根据不同皮肤的Less/Sass变量文件和默认变量文件,编译生成不同皮肤样式的CSS样式文件。
申请人在实施本申请实施例时发现上述方法需要用户查到找HTML元素,根据HTML元素查找到对应的样式信息,根据样式信息中定义的Less/Sass变量名称,在当前定义的Less/Sass变量文件中定义相同变量进行覆盖;并且不能很快根据设计稿找到需要修改的元素,而需要先进行网页调试,查找到当前元素,再到源文件中进行修改,导致操作复杂,文件编辑效率低。
图2A-2B是本申请实施例提供的网页应用的页面示意图,参见图2A-2B,图2A和图2B是网页应用在不同业务的展示页面,其功能相同,仅展示样式上存在差异,也即皮肤样式不同,比如,图2A和图2B都提供的公共功能,客服界面,社区界面,攻略视频列表页面等;而仅只有背景图片,字体大小,文字颜色,元素大小等有差异。
申请人在实施本申请实施例时发现只需要修改图片、颜色、位置、大小等就可以适应不同业务的场景,基于此,提出本申请实施例提供的皮肤样式的文件编辑方法、装置、计算机设备和计算机可读存储介质,能够快速对皮肤样式进行编辑,进而提升皮肤样式文件的生成效率。
参见图3,图3是本申请实施例提供的皮肤样式的文件编辑系统100的一个可选的架构示意图,为实现支撑一个示例性应用,终端(示例性示出了终端400-1和终端400-2)通过网络300连接服务器200,网络300可以是广域网或者局域网,又或者是二者的组合。
在一些实施例中,源文件存储在服务器中,终端和服务器200协同实施本申请实施例提供的皮肤样式的文件编辑方法,终端(如400-1)从服务器200获取目标应用的页面对应第一皮肤样式的静态样式文件;开发人员可通过触发针对目标应用的页面中目标元素的样式调整指令,实现对皮肤样式的调整;当终端接收到针对页面中目标元素的样式调整指令时,获取静态样式文件中标记的目标元素的位置信息,该位置信息,用于表征目标元素对应的代码在目标应用的源文件中的位置;终端将位置信息发送给服务器200,服务器根据该位置信息在存储的源文件中对应目标元素的代码中查找目标元素的动态样式变量,并返回给终端;终端展示接收到的目标元素的动态样式变量;开发人员可以根据展示的动态样式变量执行调整操作,如修改动态样式变量的值等;终端在接收到针对动态样式变量的修改指令后,发送与该调整操作相对应的修改请求至服务器200;服务器200根据修改请求,对源文件中的动态样式变量进行修改,并根据修改后的动态样式变量编译得到第二皮肤样式的静态样式文件。
在一些实施例中,源文件存储在终端本地,终端单独实施本申请实施例提供的皮肤样式的文件编辑方法,终端获取目标应用的页面对应第一皮肤样式的静态样式文件;开发人员可通过触发针对目标应用的页面中目标元素的样式调整指令,实现对皮肤样式的调整;当终端接收到针对页面中目标元素的样式调整指令时,获取静态样式文件中标记的目标元素的位置信息,该位置信息,用于表征目标元素对应的代码在目标应用的源文件中的位置;终端根据位置信息在本地存储的源文件中对应目标元素的代码中查找目标元素的动态样式变量,并在得到目标元素的动态样式变量后,展示该目标元素的动态样式变量;开发人员可以根据展示的动态样式变量执行调整操作,如修改动态样式变量的值等;终端在接收到针对动态样式变量的修改指令后,修改展示的动态样式变量,并对源文件中的动态样式变量进行修改;根据修改后的动态样式变量编译得到第二皮肤样式的静态样式文件。
在一些实施例中,服务器200可以是独立的物理服务器,也可以是多个物理服务器构成的服务器集群或者分布式系统,还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(CDN,ContentDelivery Network)、以及大数据和人工智能平台等基础云计算服务的云服务器。终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表、车载设备、智能电视等,但并不局限于此。
参见图4,图4是本申请实施例提供的计算机设备500的结构示意图,在实际应用中,计算机设备500可以为图3中的终端(如400-1)或服务器200,以计算机设备为图3所示的终端为例,对实施本申请实施例的皮肤样式的文件编辑方法的计算机设备进行说明。图4所示的计算机设备500包括:一个或多个处理器510、存储器550、一个或多个网络接口520和用户接口530。计算机设备500中的各个组件通过总线系统540耦合在一起。可理解,总线系统540用于实现这些组件之间的连接通信。总线系统540除包括数据总线之外,还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见,在图4中将各种总线都标为总线系统540。
处理器510可以是一种集成电路芯片,具有信号的处理能力,例如通用处理器、数字信号处理器(DSP,Digital Signal Processor),或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等,其中,通用处理器可以是微处理器或者任何常规的处理器等。
用户接口530包括使得能够呈现媒体内容的一个或多个输出装置531,包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口530还包括一个或多个输入装置532,包括有助于用户输入的用户接口部件,比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。
存储器550可以是可移除的,不可移除的或其组合。示例性的硬件设备包括固态存储器,硬盘驱动器,光盘驱动器等。存储器550可选地包括在物理位置上远离处理器510的一个或多个存储设备。
存储器550包括易失性存储器或非易失性存储器,也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM,Read Only Memory),易失性存储器可以是随机存取存储器(RAM,Random Access Memory)。本申请实施例描述的存储器550旨在包括任意适合类型的存储器。
在一些实施例中,存储器550能够存储数据以支持各种操作,这些数据的示例包括程序、模块和数据结构或者其子集或超集,下面示例性说明。
操作系统551,包括用于处理各种基本系统服务和执行硬件相关任务的系统程序,例如框架层、核心库层、驱动层等,用于实现各种基础业务以及处理基于硬件的任务;
网络通信模块552,用于经由一个或多个(有线或无线)网络接口520到达其他计算设备,示例性的网络接口520包括:蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB,Universal Serial Bus)等;
呈现模块553,用于经由一个或多个与用户接口530相关联的输出装置531(例如,显示屏、扬声器等)使得能够呈现信息(例如,用于操作外围设备和显示内容和信息的用户接口);
输入处理模块554,用于对一个或多个来自一个或多个输入装置532之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。
在一些实施例中,本申请实施例提供的皮肤样式的文件编辑装置可以采用软件方式实现,图4示出了存储在存储器550中的皮肤样式的文件编辑装置555,其可以是程序和插件等形式的软件,包括以下软件模块:第一获取模块5551、第二获取模块5552、确定模块5553、修改模块5554和编译模块5555,这些模块是逻辑上的,因此根据所实现的功能可以进行任意的组合或进一步拆分。
将在下文中说明各个模块的功能。
在另一些实施例中,本申请实施例提供的皮肤样式的文件编辑装置可以采用硬件方式实现,作为示例,本申请实施例提供的皮肤样式的文件编辑装置可以是采用硬件译码处理器形式的处理器,其被编程以执行本申请实施例提供的表情的处理方法,例如,硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路(ASIC,ApplicationSpecific Integrated Circuit)、DSP、可编程逻辑器件(PLD,Programmable LogicDevice)、复杂可编程逻辑器件(CPLD,Complex Programmable Logic Device)、现场可编程门阵列(FPGA,Field-Programmable Gate Array)或其他电子元件。
将结合本申请实施例提供的终端的示例性应用和实施,说明本申请实施例提供的皮肤样式的文件编辑方法。
参见图5,图5是本申请实施例提供的皮肤样式的文件编辑方法的流程示意图,将结合图5示出的步骤进行说明。
步骤501:终端获取目标应用的页面对应第一皮肤样式的静态样式文件。
在实际应用中,终端可通过不同的皮肤样式展示目标应用的页面,用户(比如开发者)可以对该皮肤样式进行编辑修改,以得到不同的皮肤样式,具体可以通过修改皮肤样式的静态样式文件以实现相应皮肤样式的修改。这里,终端通过第一皮肤样式展示目标应用的页面,当需要对第一皮肤样式进行编辑时,终端可以获取目标应用的页面对应第一皮肤样式的静态样式文件。在实际实施时,可以提供一个样式编辑页面,该样式编辑页面嵌入有目标应用的页面,其中,目标应用为网页应用。在实际实施时,浏览器根据第一皮肤样式的静态样式文件进行页面渲染,展示样式编辑页面,并在样式编辑页面中展示目标应用的页面。这里目标应用的页面的皮肤样式与获取到的静态样式文件相对应。这里的静态样式文件可以为CSS样式文件。
在一些实施例中,根据第一皮肤样式的静态样式文件,采用第一皮肤样式展示目标应用的页面之前,还可以对目标应用的源文件进行编译,得到第一皮肤样式的静态样式文件;在编译过程中获取各组件在源文件中的组件位置信息,并在静态样式文件中,将组件位置信息注入相应组件的根元素上,以实现对组件的目标元素进行位置信息标记。
这里,每个组件由多个元素组成,通过组件的组件位置信息来表示该组件所包括的多个元素的位置信息,也即通过在组件的根元素上注入组件位置信息,来实现该组件包括的各元素的位置信息标记。
在实际实施时,对目标应用的源文件进行编译以得到静态样式文件,在编译的过程中,对于每个组件,获取该组件的在源文件中的组件位置信息,这里的组件位置信息指的是该组件对应的代码在源文件中的相对位置,如组件位置信息可以为“/component/Hello”,其表示组件对应的代码在源文件中component文件夹下的Hello文件中;在获取该组件位置信息后,可以将其注入相应组件的根元素中,这里可以通过data-position属性注入组件位置信息。
作为示例,图6是本申请实施例提供的编译过程示意图,参见图6,对如6A所示的对应vue组件的代码进行编译,得到如6B所示的代码,其中,编译后的根元素中增加了一个属性,即data-position属性,该属性值为“/component/Hello”,以实现对该组件所包含元素的位置信息进行标记,也即,对于该组件的“hello-text”元素,该元素的位置信息就为“/component/Hello”。
步骤502:当接收到针对页面中目标元素的样式调整指令时,获取静态样式文件中标记的目标元素的位置信息。
其中,该位置信息,用于表征目标元素对应的代码在目标应用的源文件中的位置。
在实际实施时,目标元素为HTML元素,目标元素的位置信息用于指示目标元素对应的代码在目标应用的源文件中的位置(如相对位置),第一皮肤样式的静态样式文件中标记有目标元素的位置信息,当终端接收到针对目标元素的选取操作时,可以获取目标元素的标识信息,以根据动态元素的标识信息,从动态样式文件中获取该位置信息。
在一些实施例中,可以通过以下方式获取第一皮肤样式的静态样式文件中标记的目标元素的位置信息:当接收到针对页面中目标元素的样式调整指令时,获取目标元素的标识信息;根据目标元素的标识信息,在第一皮肤样式的静态样式文件中,根据静态样式文件中的样式层次结构,逐层向上查询,以确定目标元素对应的根元素;获取确定的根元素中注入的组件位置信息,并将组件位置信息作为标记的目标元素的位置信息。
在实际实施时,终端会对页面中触发的指令进行监听,当监听到针对页面中目标元素的样式调整指令时,通过相应的处理函数获取该样式调整指令所针对的目标元素的标识信息,如元素的class,id等信息,在实际实施时,该样式调整指令可通过针对目标元素的选取操作、点击操作等方式触发;然后根据该标识信息在静态样式文件中查找该目标元素所在的位置,然后根据其所属的样式层次逐层向上查询,直至查找到最顶层,也即根元素所对应的层,由于根元素中注入由组件位置信息,且元素所处的文件位置与其组件所处的文件位置时相同的,获取该组件位置信息,并将该组件位置信息作为目标元素的位置信息。
作为示例,这里的样式调整指令可以是通过针对目标元素的点击操作触发,那么当监听到针对目标元素的点击操作时,会触发已经绑定的点击事件处理函数,处理函数中会获取当前点击元素的class,id等标识信息,然后根据获取的标识信息,在静态样式文件(如CSS样式文件)中按照样式层次结构向上查找到根元素中的data-position属性,并将data-position属性的值作为目标元素的位置信息。
步骤503:根据位置信息,从对应目标元素的代码中,确定目标元素的动态样式变量。
在实际实施时,源文件可以是存储在本地的,也可以是存储在服务器中的。当源文件存储在本地时,终端可以直接根据位置信息,如文件夹及文件名,找到相应的文件,并从文件中获取目标元素的动态样式变量;当源文件存储在服务器时,终端需要根据位置信息生成包含位置信息的动态样式变量的查询请求,并将该查询请求发送至服务器,以使服务器根据该位置信息,在源文件中查找目标元素的动态样式变量,然后将查找到的动态样式变量发送给终端,终端在接收该动态样式变量,并展示该动态样式变量。在展示动态样式变量时,可以是展示该动态样式变量的标识信息及对应的值。其中,动态样式变量可以是Less变量,也可以是Sass变量。
这里,动态样式变量的数量可以为一个或者多个,可以是获取该目标元素的全部动态样式变量,也可以是预先设置所要获取的动态样式变量,例如,可以是在程序中预先设置好的,也可以是通过样式编辑页面进行人为选择的,如在样式编辑页面呈现可选的动态样式变量,然后通过点击操作来进行选择,将根据选择的动态样式变量,从目标元素的全部动态样式变量中筛选出选择的动态样式变量。
例如,目标元素的动态样式变量包括$hellowrapperPadding、$hellowrapperMargin、$hellolrapperBg;可以仅选择展示$hellowrapperPadding、$hellowrapperMargin。
在实际应用中,在确定目标元素的动态样式变量后,可以对该目标元素的动态样式变量进行展示。在展示动态样式变量时可以是展示动态样式变量的标识信息及该动态样式变量的值,当动态样式变量的数量为多个时,可以是采用列表的形式展示多个动态样式变量,在列表中动态样式变量的标识信息和值是一一对应的。
在一些实施例中,可以通过以下方式确定并展示目标应用的源文件中目标元素的动态样式变量:根据位置信息,在源文件中对应目标元素的代码中查找目标元素的样式信息;获取样式信息中动态样式变量的标识信息;根据动态样式变量的标识信息,在全局变量文件中确定动态样式变量的值;展示动态样式变量的标识信息及相应的值。
在实际实施时,位置信息用于指示目标元素的样式信息所在的文件的相对位置,根据位置信息,可以在源文件中查找到目标元素的样式信息所在的文件,该文件则对应目标元素的代码,通常一个组件包括的一个或多个元素都在该组件定义的文件中,也即该文件中可以包含一个或多个元素的样式信息。当该文件中包含多个元素的样式信息时,可以是在查找到目标元素的样式信息所在的文件后,根据目标元素的标识信息在文件中获取目标元素的样式信息。其中,样式信息中包含动态样式变量的标识信息,如动态样式变量的名称。在得到样式信息后,从样式信息中确定出动态样式变量的标识信息,再从全局变量文件中查找到动态样式变量的标识信息及对应的值。
在实际应用中,每个皮肤样式都创建有对应的全局变量文件,这里用于查找动态样式变量的标识信息及对应的值的全局变量文件可以是第一皮肤样式的全局变量文件,即默认皮肤样式的全局变量文件,也可以是第二皮肤样式的全局变量文件,也即正在编辑的皮肤样式的全局变量文件。这里可以是获取并展示第一皮肤样式的全局变量文件中动态样式变量的值,也可以是获取并展示第二皮肤样式的全局变量文件中的动态样式变量的值。
需要说明的是,当动态样式变量的数量为多个时,对于每个动态样式变量,都可以从第一皮肤样式的全局变量文件中获取,或从第二皮肤样式的变量文件中获取,也即获取的动态样式变量的值就可以是同一全局变量文件中的,也可以是不同全局变量文件汇总。例如,当动态样式变量的数量为三个时,可以是从第二皮肤样式的全局变量文件中获取其中两个动态样式变量的值,然后从第一皮肤样式的全局变量文件中获取另一个动态样式变量的值。
在一些实施例中,可以是优先获取第二皮肤样式的全局变量文件中的动态样式变量的值,也即,对于每个动态样式变量,先在第二皮肤样式的全局变量文件中查找该动态样式变量,判断是否有该动态样式变量,若有,则从第二皮肤样式的全局变量文件中获取该动态样式变量的值;否则,在第一皮肤样式的全局变量文件中获取该动态样式变量的值。
作为示例,图7是本申请实施例提供的动态样式变量的查找过程示意图,参见图7,当位置信息为目标元素所属组件的组件位置信息,首先根据位置信息查找目标元素组件的文件,如位置信息为“/component/Hello”,根据该位置信息查找到文件“Hello.vue”,然后获取目标元素的标识信息,当目标元素的标识信息为class名称,在“Hello.vue”的文件中,根据目标元素的class名称查找目标元素的样式信息,如class名称为“hello.text”,目标元素的样式信息如701所示;701示出了目标元素的动态样式变量的名称,如$helloTextFontsize、$helloTextTextAlign、$helloTextColor,在全局变量文件中查找上述名称的动态样式变量的值。这里,全局变量文件包括默认皮肤样式的全局变量文件(第一皮肤样式的全局变量文件)702和编辑的皮肤样式的全局变量文件(第二皮肤样式的全局变量文件)703,首先在编辑的皮肤样式的全局变量文件中查找$helloTextFontsize、$helloTextTextAlign及$helloTextColor的值,由于编辑的皮肤样式的全局变量文件中仅存在$helloTextColor的值,因此,从于编辑的皮肤样式的全局变量文件中获取$helloTextColor的值,然后从默认皮肤样式的全局变量文件中获取找$helloTextFontsize和$helloTextTextAlign的值,以得到$helloTextFontsize、$helloTextTextAlign及$helloTextColor的值,如704所示。
步骤504:响应于针对动态样式变量的修改指令,对确定的动态样式变量进行修改。
这里,该修改指令可以用于指示对展示的动态样式变量的值进行修改,或者新增新的动态样式变量;需要说明的是新增动态变量时,需要新增动态样式变量的标识信息及对应的值。
在实际实施时,当终端接收到针对动态样式变量的调整操作,会对展示的动态样式变量进行修改,以使用户可以直观的看到修改的内容。当源文件存储在终端本地时,终端会根据对展示的动态样式变量的修改,对应修改源文件中的动态样式变量的值,这里,在对源文件中的动态样式变量进行修改时,需要在源文件中查找到目标元素的动态样式变量所处的位置,然后对该动态样式变量进行修改。当源文件存储在服务器中时,需要根据对展示的动态样式变量的修改,生成一个对应的修改请求,然后发送修改请求至服务器,以使服务器根据该修改请求所指示修改的内容,在源文件中对动态样式变量进行修改。
在实际应用中,在对动态样式变量进行修改之后,可以根据修改后的动态样式变量,对源文件进行编译,得到第二皮肤样式的静态样式文件。这里对源文件进行编译的过程,根据源文件的存储位置的不同,也是可以由终端执行的,或者由服务器执行。
在一些实施例中,终端可通过如下方式对确定的动态样式变量进行修改,包括:当源文件中包括第一皮肤样式的第一全局变量文件、及第二皮肤样式的第二全局变量文件时,响应于针对动态样式变量的修改指令,获取所要调整的目标动态样式变量及相应的目标值;将目标动态样式变量分别与第一全局变量文件中的动态样式变量、及第二全局变量文件中的动态样式变量进行匹配,得到匹配结果;根据匹配结果,对源文件中的动态样式变量进行修改。
在实际实施时,每个皮肤样式都创建有相应的全局变量文件,也即源文件中包括第一皮肤样式的第一全局变量文件、及第二皮肤样式的第二全局变量文件;当接收到针对动态样式变量的修改指令时,可以获取所要修改的目标动态样式变量及相应的目标值,如可以是所新增的动态样式变量及对应的值,或者也可以是动态样式变量及修改后的值。然后分别将目标动态样式变量与第一全局变量文件中的动态样式变量、及第二全局变量文件中的动态样式变量进行匹配,也即分别判断第一全局变量文件和第二全局变量文件中是否存在该目标动态样式变量,若存在,则进一步判断存在的目标动态样式变量的值是否与目标值相同,以得到匹配结果,进而根据匹配结果,对源文件中的动态样式变量进行修改。
在实际应用中,调整操作所针对的目标动态样式变量的数量可以是多个,当存在多个需要调整的动态样式变量时,对于每个目标动态样式变量,分别执行以上操作,并在针对所有目标动态样式变量的修改均完成时,执行编译操作,以得到第二皮肤样式的静态样式文件。
在一些实施例中,可以通过以下方式对源文件中的动态样式变量进行修改:当匹配结果表征第一全局变量文件与第二全局变量文件中均存在目标动态样式变量、且第一全局变量文件中目标动态样式变量的值与目标值相同时,删除第二全局变量文件中的目标动态样式变量。
这里,第一全局变量文件中定义有目标动态样式变量,并且所定义的值与修改后的目标值相同,那么可以直接使用第一全局变量文件中的目标动态样式变量来进行编译,得到第二皮肤样式的静态样式文件,而无需在第二全局变量文件中重复定义目标动态样式变量,也即无论第二全局变量文件中的目标动态样式变量的值是什么,都会删除该第二全局变量文件中的目标动态样式变量,也即删除目标动态样式变量的标识信息及对应的值。
本申请通过当匹配结果表征第一全局变量文件与第二全局变量文件中均存在目标动态样式变量、且第一全局变量文件中目标动态样式变量的值与目标值相同时,删除第二全局变量文件中的目标动态样式变量,可以避免代码的冗余。
作为示例,图8是本申请实施例提供的动态样式变量的修改过程示意图,参见图8,801所示为默认皮肤样式的全局变量文件,802所示为当前编辑的全局变量文件,当需要调整的动态样式变量为$helloTextTextAlign,相应的目标值为center时,由于801中$helloTextTextAlign的值为center,802中$helloTextTextAlign的值为right,因此将当前编辑的全局变量文件中$helloTextTextAlign及相应的值删除,修改后的第二全局变量文件如803所示。
在一些实施例中,可以通过以下方式对源文件中的动态样式变量进行修改:当匹配结果表征第一全局变量文件中不存在值为目标值的目标动态样式变量、且第二全局变量文件中不存在目标动态样式变量时,在第二全局变量文件中添加目标动态样式变量,并将添加的目标动态样式变量的值设置为目标值。
在实际实施时,第一全局变量文件中不存在值为目标值的目标动态样式变量,包含两种情况,一种是第一全局变量文件中存在目标动态样式变量,但目标动态样式变量的值不为目标值,另一种是第一全局变量文件中不存在目标动态样式变量;当属于上述任一种情况时,都表示需要在第二全局变量文件中定义一个值为目标值的目标动态样式变量。这里,若第二全局变量文件中不存在目标动态样式变量,那么需要先新增目标动态样式变量,再将新增的目标动态样式变量的值设置为目标值。
作为示例,图9是本申请实施例提供的动态样式变量的修改过程示意图,参见图9,901所示为默认皮肤样式的全局变量文件,902所示为当前编辑的全局变量文件,当需要调整的动态样式变量为$helloTextFontSize,相应的目标值为16时,由于901中$helloTextTextAlign的值为14,902中没有$helloTextTextAlign,因此将当前编辑的全局变量文件中新增$helloTextTextAlign,并将$helloTextTextAlign的值设置为16,如903所示。
在一些实施例中,可以通过以下方式对源文件中的动态样式变量进行修改:当匹配结果表征第一全局变量文件中不存在值为目标值的目标动态样式变量、且第二全局变量文件中存在值不为目标值的目标动态样式变量时,将第二全局变量文件中目标动态样式变量的值修改为目标值。
在实际实施时,第一全局变量文件中不存在值为目标值的目标动态样式变量,与上述相同,也包含两种情况。当属于上述任一种情况时,都表示需要在第二全局变量文件中定义一个值为目标值的目标动态样式变量。这里,第二全局变量文件中存在目标动态样式变量,但目标动态样式变量的值不为目标值,那么直接将该动态样式变量的值为目标值即可。
作为示例,图10是本申请实施例提供的动态样式变量的修改过程示意图,参见图10,1001所示为默认皮肤样式的全局变量文件,1002所示为当前编辑的全局变量文件,当需要调整的动态样式变量为$helloTextColor,相应的目标值为#666666时,由于1001中$helloTextColor的值为#000,1002中$helloTextColor的值为#C0C0C0,因此将当前编辑的全局变量文件中$helloTextColor的值修改为#666666。
在一些实施例中,若第一全局变量文件中不存在值为目标值的目标动态样式变量、但第二全局变量文件中存在值为目标值的目标动态样式变量,那么不对源文件进行任何修改。
步骤505:根据修改后的动态样式变量,进行静态样式文件编译,得到第二皮肤样式的静态样式文件。
在一些实施例中,终端还可以根据对动态样式变量进行修改所得到的动态样式变量值,编译得到第二皮肤样式的静态样式文件;基于第二皮肤样式的静态样式文件进行页面渲染,以将目标应用的皮肤样式由第一皮肤样式切换为第二皮肤样式。
在实际实施时,在编译得到第二皮肤样式的静态样式文件后,便可以基于静态样式文件进行页面渲染,以第二皮肤样式展示目标应用的页面,也即实现了将第一皮肤样式切换为第二皮肤样式。也即,本申请在修改之后,可以即时刷新页面,达到所见即所得的效果。
在一些实施例中,当编译操作是由服务器执行时,可以直接获取该第二皮肤样式的静态样式文件,然后基于该静态样式文件进行页面渲染,以将目标应用的皮肤样式由第一皮肤样式切换为第二皮肤样式。
应用上述实施例,当接收到针对页面中目标元素的样式调整指令时,获取目标应用的页面对应第一皮肤样式的静态样式文件中标记的目标元素的位置信息,然后根据所述位置信息,从对应目标元素的代码中,确定目标元素的动态样式变量,响应于针对动态样式变量的修改指令,对确定的动态样式变量进行修改,从而根据修改后的动态样式变量编译得到第二皮肤样式的静态样式文件;
由于本申请在第一皮肤样式的静态样式文件中标记了目标元素的位置信息,且该位置信息,用于表征目标元素对应的代码在目标应用的源文件中的位置,如此,能够在接收到针对目标元素的样式调整指令时,根据获取的位置信息自动获取到该目标元素的动态样式变量,然后通过针对该动态样式变量的修改,实现在源文件中对动态样式变量的修改,进而实现快速生成第二皮肤样式的静态样式文件,提升不同皮肤样式的静态样式文件的生成效率。
图11是本申请实施例提供的皮肤样式的文件编辑方法的流程示意图,参见图11,以第一皮肤样式为默认皮肤样式,第二皮肤样式为正在编辑的皮肤样式为例,本申请实施例提供的皮肤样式的文件编辑方法由终端和服务器系统实施,本申请实施例提供的皮肤样式的文件编辑方法包括:
步骤1101:服务器对目标应用的源文件进行编译,得到第一皮肤样式的静态样式文件。
步骤1102:服务器在编译过程中获取各组件在源文件中组件位置信息,并在静态样式文件中,将组件位置信息注入相应组件的根元素上。
步骤1103:终端从服务器获取第一皮肤样式的静态样式文件。
步骤1104:终端根据第一皮肤样式的静态样式文件,进行页面渲染,并在样式编辑页面中,采用第一皮肤样式展示目标应用的页面。
步骤1105:终端响应于针对页面中目标元素的样式调整指令,获取目标元素的标识信息。
步骤1106:终端根据目标元素的标识信息,在第一皮肤样式的静态样式文件中,根据静态样式文件中的样式层次结构,逐层向上查询,以确定目标元素对应的根元素。
步骤1107:终端获取确定的根元素中注入的组件位置信息。
步骤1108:终端生成包含组件位置信息及目标元素的标识信息的查询请求,并发送查询请求至服务器。
步骤1109:服务器根据组件位置信息,查找目标元素所属组件的组件文件。
步骤1110:服务器根据目标元素的标识信息,在组件文件中获取目标元素的动态样式变量的名称。
步骤1111:服务器根据动态样式变量的名称,从默认皮肤样式的第一全局变量文件或正在编辑的皮肤样式的第二全局变量文件中获取动态样式变量及相应的值。
步骤1112:将获取的动态样式变量及相应的值返回终端。
步骤1113:终端展示获取的动态样式变量及相应的值。
步骤1114:响应于针对动态样式变量的修改指令,修改展示的动态样式变量,并生成并发送修改请求至服务器。
步骤1115:服务器根据修改请求,将所要修改的目标动态样式变量分别与第一全局变量文件中的动态样式变量、及第二全局变量文件中的动态样式变量进行匹配,得到匹配结果。
步骤1116:根据匹配结果,对源文件中的动态样式变量进行修改。
步骤1117:根据修改后的动态样式变量的值,对源文件进行编译,得到正在编辑的皮肤样式对应的静态样式文件。
步骤1118:将正在编辑的皮肤样式对应的静态样式文件发送给终端。
步骤1119:终端根据正在编辑的皮肤样式对应的静态样式文件,进行页面渲染。
应用上述实施例,能够在触发针对目标元素的样式调整指令的时候,自动获取到该目标元素的动态样式变量,然后通过针对该动态样式变量的修改操作,实现在源文件中对动态样式变量进行修改,进而实现快速生成第二皮肤样式的静态样式文件,提升不同皮肤样式的静态样式文件的生成效率。
下面,将说明本申请实施例在一个实际的应用场景中的示例性应用。图12是本申请实施例提供的皮肤样式的文件编辑方法的流程示意图,参见图12,本申请实施例提供的皮肤样式的文件编辑方法包括:
步骤1201:对项目的源文件进行编译,并在对源文件进行编译时,标记每个组件的源码文件在项目中的位置信息。
其中,源文件指的是web源码,包括默认Less/Sass全局配置文件、当前编辑的皮肤样式的Less/Sass全局配置文件、源码文件,如vue、tsx、jsx、less、Sass文件。这里的位置信息指的是相对路径。
步骤1202:浏览器根据编译得到的静态样式文件,进行页面渲染。
步骤1203:浏览器监听点击事件,将点击的目标元素的class,id和编译时标记的位置信息传给后端。
步骤1204:后端收到查询请求,查找Less/Sass变量的值,并返回到浏览器。
这里,后端指后端程序,可以位于服务器,也可以位于终端本地;后端可以访问源文件,本地调试代码时,源文件存储在本地,在平台调试代码时,源文件存储在服务器上。
步骤1205:浏览器展示可以修改的Less/Sass变量,提供修改的表单。
步骤1206:浏览器接收到修改操作,并发送修改Less/Sass变量的修改请求到后端。
步骤1207:后端根据修改请求,修改源文件中的Less/Sass变量值。
步骤1208:对项目的源文件进行重新编译,浏览器采用修改后的皮肤样式展示页面。
步骤1209:重复步骤1201-步骤1207,直至得到新业务下的皮肤样式。
图13是本申请实施例提供的执行皮肤样式的文件编辑方法的模块示意图,参见图13,执行皮肤样式的文件编辑方法的模块包括浏览器、后端程序、源文件。其中,浏览器具有展示页面效果、提供选择元素能力、提供展示元素对应Less/Sass变量能力、提供修改和抽取Less/Sass变量能力;源文件包括默认Less/Sass全局配置文件、当前编辑的皮肤样式的Less/Sass全局配置文件、源码文件,如vue、tsx、jsx、less、Sass文件。
在对源文件进行编译,以得到静态样式文件时,在组件的根元素对组件位置信息进行标记,以确保可以根据标记组件位置信息查找到组件的源码文件。
以vue组件为例,在编译过程中,会获取该组件在源文件中的位置信息,然后将该位置信息用data-position属性注入到vue组件的根元素上。根据data-position属性就可以反向获取该vue组件在源文件中的位置。
浏览器提供一个样式编辑页面,样式编辑页面为嵌入换肤的页面,监听页面上触发的点击操作。通过点击操作选择待编辑的目标元素时,会触发已经绑定的点击事件处理函数,处理函数会获取目标元素的class,id等信息,并且向上查找到根元素标记的文件位置信息,发送查询请求到后端查找当前点击的目标元素的Less/Sass变量。
后端在收到查询请求时,查询请求中包括文件位置信息、目标元素的class名称,id等信息;后端根据文件位置信息查找到定义目标元素的源码文件,在源码文件中或者源码文件引入的CSS/Less/Sass文件中,根据class名称或id查找定义的样式信息。根据定义的样式信息中的Less/Sass变量,在全局变量文件中查找该Less/Sass变量的值,并返回给浏览器端。
这里对Less/Sass变量的查找过程进行详细说明。第一步,根据组件的根元素标记的位置信息,找到组件的源码文件位置。第二步,在找到的源码文件中根据目标元素的class名称,找到该目标元素的样式信息(样式的具体定义)。第三步,根据样式信息中的Less/Sass变量的名称,查找默认的全局变量文件和当前编辑的特定皮肤的全局变量文件。第四步,对比默认的全局变量文件和当前编辑的特定皮肤的全局变量文件中定义的Less/Sass变量的值,优先使用当前编辑的特定皮肤的全局变量文件中定义的值,返回查找到的less/sass定义给到浏览器。
浏览器展示接收到的Less/Sass变量,包括名称、对应的值。用户可以根据展示的Less/Sass变量进行修改,在修改完成后,浏览器会发送修改Less/Sass变量的修改请求至后端程序。
后端程序收到浏览器发送的Less/Sass变量的修改请求,会将新的Less/Sass变量值分别与默认的全局变量文件中的Less/Sass变量值及当前编辑的特定皮肤的全局变量文件中的Less/Sass变量值进行对比。如果新的Less/Sass变量值和默认的全局变量文件中定义的值相同,并且当前编辑的特定皮肤的全局变量文件中定义有该Less/Sass变量,就删除当前编辑的特定皮肤的全局变量文件中的定义;如果新的Less/Sass变量值和默认的全局变量文件中定义的值相同,并且当前编辑的特定皮肤的全局变量文件中未定义有该Less/Sass变量,则不做处理。
如果新的Less/Sass变量值分别与默认的全局变量文件中的Less/Sass变量值不同,并且当前编辑的特定皮肤的全局变量文件中未定义有该Less/Sass变量,就在当前编辑的特定皮肤的全局变量文件中新增一个同名称less/sass变量,并将值设置为用户提交的值;如果新的Less/Sass变量值分别与默认的全局变量文件中的Less/Sass变量值不同,并且当前编辑的特定皮肤的全局变量文件中定义有该Less/Sass变量,则将当前编辑的特定皮肤的全局变量文件中该Less/Sass变量值修改为用户提交的值。
下面继续对本申请实施例提供的皮肤样式的文件编辑方法进行说明,图14是本申请实施例提供的皮肤样式的文件编辑方法的流程示意图,参见图14,本申请实施例提供的皮肤样式的文件编辑方法包括:
步骤1401:浏览器接收到针对目标元素的点击操作。
步骤1402:将目标元素所属组件的根元素标记的位置信息、及目标元素的class名称发送给后端。
步骤1403:后端根据位置信息查找组件的源码文件。
步骤1404:后端根据class名称,获取Less/Sass变量名称。
步骤1405:后端根据Less/Sass变量名称,获取相应的变量值和注释信息。
步骤1406:后端返回Less/Sass变量列表。
步骤1407:浏览器展示Less/Sass变量列表。
步骤1408:接收到针对Less/Sass变量的修改操作,将修改后的Less/Sass变量列表发送给后端。
步骤1409:后端修改源文件中的Less/Sass变量。
步骤1410:后端编译更新。
步骤1411:浏览器展示更改效果。
应用上述实施例,具有以下有益效果:
1)减少web项目接入新的业务时的效率;
2)降低开发难度,非开发人员可以根据设计稿进行配置。
下面继续说明本申请实施例提供的皮肤样式的文件编辑装置555的实施为软件模块的示例性结构,在一些实施例中,如图2所示,存储在存储器550的皮肤样式的文件编辑装置555中的软件模块可以包括:
第一获取模块5551,用于获取目标应用的页面对应第一皮肤样式的静态样式文件;
第二获取模块5552,用于当接收到针对所述页面中目标元素的样式调整指令时,获取所述静态样式文件中标记的所述目标元素的位置信息,所述位置信息,用于表征所述目标元素对应的代码在所述目标应用的源文件中的位置;
确定模块5553,用于根据所述位置信息,从对应所述目标元素的代码中,确定所述目标元素的动态样式变量;
修改模块5554,用于响应于针对所述动态样式变量的修改指令,对确定的所述动态样式变量进行修改;
编译模块5555,根据修改后的所述动态样式变量,进行静态样式文件编译,得到第二皮肤样式的静态样式文件。
在一些实施例中,所述装置还包括:
展示模块,用于通过所述第一皮肤样式展示所述目标应用的页面;
所述得到第二皮肤样式的静态样式文件之后,所述装置还包括:
渲染模块,用于基于所述第二皮肤样式的静态样式文件进行页面渲染,以将所述目标应用的页面由通过所述第一皮肤样式展示切换为通过所述第二皮肤样式展示。
在一些实施例中,所述第一获取模块5551,还用于对所述目标应用的源文件进行编译,得到所述第一皮肤样式的静态样式文件;
在编译过程中获取各组件在源文件中的组件位置信息,并
在所述静态样式文件中,将所述组件位置信息注入相应组件的根元素上,以实现对所述组件的目标元素进行位置信息标记。
在一些实施例中,所述第一获取模块5551,还用于当接收到针对所述页面中目标元素的样式调整指令时,获取所述目标元素的标识信息;
根据所述目标元素的标识信息,在所述第一皮肤样式的静态样式文件中,根据所述静态样式文件中的样式层次结构,逐层向上查询,以确定所述目标元素对应的根元素;
获取确定的所述根元素中注入的所述组件位置信息,并将所述组件位置信息作为标记的所述目标元素的位置信息。
在一些实施例中,所述确定模块5553,还用于根据所述位置信息,在对应所述目标元素的代码中查找所述目标元素的样式信息;
获取所述样式信息中所述动态样式变量的标识信息;
根据所述动态样式变量的标识信息,在全局变量文件中确定所述动态样式变量的值。
在一些实施例中,所述修改模块5554,还用于当所述源文件中包括第一皮肤样式的第一全局变量文件、及所述第二皮肤样式的第二全局变量文件时,响应于针对所述动态样式变量的修改指令,获取所要修改的目标动态样式变量及相应的目标值;
将目标动态样式变量分别与所述第一全局变量文件中的动态样式变量、及所述第二全局变量文件中的动态样式变量进行匹配,得到匹配结果;
根据所述匹配结果,对确定的所述动态样式变量进行修改。
在一些实施例中,所述修改模块5554,还用于当所述匹配结果表征所述第一全局变量文件与所述第二全局变量文件中均存在所述目标动态样式变量、且所述第一全局变量文件中所述目标动态样式变量的值与所述目标值相同时,删除所述第二全局变量文件中的所述目标动态样式变量。
在一些实施例中,所述修改模块5554,还用于当所述匹配结果表征所述第一全局变量文件中不存在值为目标值的目标动态样式变量、且所述第二全局变量文件中不存在所述目标动态样式变量时,在所述第二全局变量文件中添加所述目标动态样式变量,并将添加的所述目标动态样式变量的值设置为所述目标值。
在一些实施例中,所述修改模块5554,还用于当所述匹配结果表征所述第一全局变量文件中不存在值为目标值的目标动态样式变量、且所述第二全局变量文件中存在值不为目标值的所述目标动态样式变量时,将所述第二全局变量文件中目标动态样式变量的值修改为目标值。
应用本申请上述实施例,当接收到针对页面中目标元素的样式调整指令时,获取目标应用的页面对应第一皮肤样式的静态样式文件中标记的目标元素的位置信息,然后根据所述位置信息,从对应目标元素的代码中,确定目标元素的动态样式变量,响应于针对动态样式变量的修改指令,对确定的动态样式变量进行修改,从而根据修改后的动态样式变量编译得到第二皮肤样式的静态样式文件;
由于本申请在第一皮肤样式的静态样式文件中标记了目标元素的位置信息,且该位置信息,用于表征目标元素对应的代码在目标应用的源文件中的位置,如此,能够在接收到针对目标元素的样式调整指令时,根据获取的位置信息自动获取到该目标元素的动态样式变量,然后通过针对该动态样式变量的修改,实现在源文件中对动态样式变量的修改,进而实现快速生成第二皮肤样式的静态样式文件,提升不同皮肤样式的静态样式文件的生成效率。
本申请实施例提供了一种计算机程序产品或计算机程序,该计算机程序产品或计算机程序包括计算机指令,该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令,处理器执行该计算机指令,使得该计算机设备执行本申请实施例上述的皮肤样式的文件编辑方法。
本申请实施例提供一种存储有可执行指令的计算机可读存储介质,其中存储有可执行指令,当可执行指令被处理器执行时,将引起处理器执行本申请实施例提供的皮肤样式的文件编辑方法。
在一些实施例中,计算机可读存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器;也可以是包括上述存储器之一或任意组合的各种设备。
在一些实施例中,可执行指令可以采用程序、软件、软件模块、脚本或代码的形式,按任意形式的编程语言(包括编译或解释语言,或者声明性或过程性语言)来编写,并且其可按任意形式部署,包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。
作为示例,可执行指令可以但不一定对应于文件系统中的文件,可以可被存储在保存其它程序或数据的文件的一部分,例如,存储在超文本标记语言(HTML,Hyper TextMarkup Language)文档中的一个或多个脚本中,存储在专用于所讨论的程序的单个文件中,或者,存储在多个协同文件(例如,存储一个或多个模块、子程序或代码部分的文件)中。
作为示例,可执行指令可被部署为在一个计算设备上执行,或者在位于一个地点的多个计算设备上执行,又或者,在分布在多个地点且通过通信网络互连的多个计算设备上执行。
以上所述,仅为本申请的实施例而已,并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等,均包含在本申请的保护范围之内。

Claims (10)

1.一种皮肤样式的文件编辑方法,其特征在于,包括:
获取目标应用的页面对应第一皮肤样式的静态样式文件;
当接收到针对所述页面中目标元素的样式调整指令时,获取所述静态样式文件中标记的所述目标元素的位置信息,所述位置信息,用于表征所述目标元素对应的代码在所述目标应用的源文件中的位置;
根据所述位置信息,从对应所述目标元素的代码中,确定所述目标元素的动态样式变量;
响应于针对所述动态样式变量的修改指令,对确定的所述动态样式变量进行修改;
根据修改后的所述动态样式变量,进行静态样式文件编译,得到第二皮肤样式的静态样式文件。
2.如权利要求1所述的方法,其特征在于,所述方法还包括:
通过所述第一皮肤样式展示所述目标应用的页面;
所述得到第二皮肤样式的静态样式文件之后,所述方法还包括:
基于所述第二皮肤样式的静态样式文件进行页面渲染,以将所述目标应用的页面由通过所述第一皮肤样式展示切换为通过所述第二皮肤样式展示。
3.如权利要求1所述的方法,其特征在于,所述方法还包括:
对所述目标应用的源文件进行编译,得到所述第一皮肤样式的静态样式文件;
在编译过程中获取各组件在源文件中的组件位置信息,并
在所述静态样式文件中,将所述组件位置信息注入相应组件的根元素上,以实现对所述组件的目标元素进行位置信息标记。
4.如权利要求3所述的方法,其特征在于,所述当接收到针对所述页面中目标元素的样式调整指令时,获取所述静态样式文件中标记的所述目标元素的位置信息,包括:
当接收到针对所述页面中目标元素的样式调整指令时,获取所述目标元素的标识信息;
根据所述目标元素的标识信息,在所述第一皮肤样式的静态样式文件中,根据所述静态样式文件中的样式层次结构,逐层向上查询,以确定所述目标元素对应的根元素;
获取确定的所述根元素中注入的所述组件位置信息,并将所述组件位置信息作为标记的所述目标元素的位置信息。
5.如权利要求1所述的方法,其特征在于,所述根据所述位置信息,从对应所述目标元素的代码中,确定所述目标元素的动态样式变量,包括:
根据所述位置信息,在对应所述目标元素的代码中查找所述目标元素的样式信息;
获取所述样式信息中所述动态样式变量的标识信息;
根据所述动态样式变量的标识信息,在全局变量文件中确定所述动态样式变量的值。
6.如权利要求1所述的方法,其特征在于,所述响应于针对所述动态样式变量的修改指令,对确定的所述动态样式变量进行修改,包括:
当所述源文件中包括第一皮肤样式的第一全局变量文件、及所述第二皮肤样式的第二全局变量文件时,响应于针对所述动态样式变量的修改指令,获取所要修改的目标动态样式变量及相应的目标值;
将目标动态样式变量分别与所述第一全局变量文件中的动态样式变量、及所述第二全局变量文件中的动态样式变量进行匹配,得到匹配结果;
根据所述匹配结果,对确定的所述动态样式变量进行修改。
7.如权利要求6所述的方法,其特征在于,所述根据所述匹配结果,对确定的所述动态样式变量进行修改,包括:
当所述匹配结果表征所述第一全局变量文件与所述第二全局变量文件中均存在所述目标动态样式变量、且所述第一全局变量文件中所述目标动态样式变量的值与所述目标值相同时,删除所述第二全局变量文件中的所述目标动态样式变量。
8.如权利要求6所述的方法,其特征在于,所述根据所述匹配结果,对确定的所述动态样式变量进行修改,包括:
当所述匹配结果表征所述第一全局变量文件中不存在值为目标值的目标动态样式变量、且所述第二全局变量文件中不存在所述目标动态样式变量时,在所述第二全局变量文件中添加所述目标动态样式变量,并将添加的所述目标动态样式变量的值设置为所述目标值。
9.如权利要求6所述的方法,其特征在于,所述根据所述匹配结果,对确定的所述动态样式变量进行修改,包括:
当所述匹配结果表征所述第一全局变量文件中不存在值为目标值的目标动态样式变量、且所述第二全局变量文件中存在值不为目标值的所述目标动态样式变量时,将所述第二全局变量文件中目标动态样式变量的值修改为目标值。
10.一种皮肤样式的文件编辑装置,其特征在于,包括:
第一获取模块,用于获取目标应用的页面对应第一皮肤样式的静态样式文件;
第二获取模块,用于当接收到针对所述页面中目标元素的样式调整指令时,获取所述静态样式文件中标记的所述目标元素的位置信息,所述位置信息,用于表征所述目标元素对应的代码在所述目标应用的源文件中的位置;
确定模块,用于根据所述位置信息,从对应所述目标元素的代码中,确定所述目标元素的动态样式变量;
修改模块,用于响应于针对所述动态样式变量的修改指令,对确定的所述动态样式变量进行修改;
编译模块,根据修改后的所述动态样式变量,进行静态样式文件编译,得到第二皮肤样式的静态样式文件。
CN202111114489.1A 2021-09-23 2021-09-23 皮肤样式的文件编辑方法及装置 Active CN113868565B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111114489.1A CN113868565B (zh) 2021-09-23 2021-09-23 皮肤样式的文件编辑方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111114489.1A CN113868565B (zh) 2021-09-23 2021-09-23 皮肤样式的文件编辑方法及装置

Publications (2)

Publication Number Publication Date
CN113868565A true CN113868565A (zh) 2021-12-31
CN113868565B CN113868565B (zh) 2024-05-24

Family

ID=78993338

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111114489.1A Active CN113868565B (zh) 2021-09-23 2021-09-23 皮肤样式的文件编辑方法及装置

Country Status (1)

Country Link
CN (1) CN113868565B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114422858A (zh) * 2022-03-25 2022-04-29 北京智象信息技术有限公司 一种Linux智能电视皮肤快速生成方法、系统、设备及介质

Citations (29)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030120686A1 (en) * 2001-12-21 2003-06-26 Xmlcities, Inc. Extensible stylesheet designs using meta-tag and/or associated meta-tag information
US20050114771A1 (en) * 2003-02-26 2005-05-26 Bea Systems, Inc. Methods for type-independent source code editing
US20080065982A1 (en) * 2006-09-11 2008-03-13 International Business Machines Corporation User Driven Computerized Selection, Categorization, and Layout of Live Content Components
WO2009124584A1 (en) * 2008-04-07 2009-10-15 Ackermann Eike N Browser based text and code processing
FR2953311A1 (fr) * 2009-12-01 2011-06-03 Shoopz Procede de modification dynamique du rendu d'une page web.
US20130232430A1 (en) * 2011-08-26 2013-09-05 Reincloud Corporation Interactive user interface
CN104050002A (zh) * 2014-06-24 2014-09-17 广州金山网络科技有限公司 一种应用软件界面换肤方法及装置
CN104166656A (zh) * 2013-05-17 2014-11-26 阿里巴巴集团控股有限公司 流量统计的网页化展示方法及装置
CN104572668A (zh) * 2013-10-15 2015-04-29 阿里巴巴集团控股有限公司 基于多个样式文件生成合并样式文件的方法和设备
CN105447198A (zh) * 2015-12-30 2016-03-30 深圳市瑞铭无限科技有限公司 页面脚本便捷导入的方法及装置
CN106294816A (zh) * 2016-08-16 2017-01-04 腾讯科技(深圳)有限公司 页面信息的处理方法和装置
US20170039169A1 (en) * 2015-08-04 2017-02-09 Google Inc. Systems and methods for interactively presenting a visible portion of a rendering surface on a user device
CN108090069A (zh) * 2016-11-22 2018-05-29 北京神州泰岳软件股份有限公司 一种在浏览器中显示网页资源的方法和装置
WO2019095968A1 (zh) * 2017-11-20 2019-05-23 华为技术有限公司 一种动态加载方法、目标文件的制作方法及装置
CN110020316A (zh) * 2017-12-22 2019-07-16 航天信息股份有限公司 一种列表的显示方法及装置
CN110543298A (zh) * 2018-05-28 2019-12-06 北京京东尚科信息技术有限公司 网页样式生成方法及装置、网页生成方法及装置
CN110688600A (zh) * 2019-09-09 2020-01-14 平安普惠企业管理有限公司 基于html页面的在线编辑方法、装置、设备及存储介质
US20200019583A1 (en) * 2018-07-11 2020-01-16 University Of Southern California Systems and methods for automated repair of webpages
CN110727482A (zh) * 2018-07-16 2020-01-24 阿里巴巴集团控股有限公司 一种界面的更新方法和装置
CN110750683A (zh) * 2019-09-20 2020-02-04 平安普惠企业管理有限公司 数据修改方法、装置、计算机设备及存储介质
CN110990731A (zh) * 2019-10-12 2020-04-10 平安国际智慧城市科技股份有限公司 一种静态网页的渲染方法、装置、设备及计算机存储介质
WO2020119435A1 (zh) * 2018-12-13 2020-06-18 深圳壹账通智能科技有限公司 iOS页面布局方法、终端设备及计算机可读存储介质
CN111581565A (zh) * 2020-05-09 2020-08-25 北京思特奇信息技术股份有限公司 一种页面样式配置方法、系统、介质及设备
CN111666123A (zh) * 2020-05-28 2020-09-15 平安医疗健康管理股份有限公司 页面主题控制方法、系统和计算机设备
CN112287255A (zh) * 2020-07-13 2021-01-29 上海柯林布瑞信息技术有限公司 页面构建方法及装置、计算设备、计算机可读存储介质
CN112632437A (zh) * 2020-11-27 2021-04-09 中国银联股份有限公司 一种网页页面生成方法、装置及计算机可读存储介质
CN112783783A (zh) * 2021-01-29 2021-05-11 广州繁星互娱信息科技有限公司 网页埋点方法、装置、设备及可读存储介质
CN113051514A (zh) * 2021-03-26 2021-06-29 挂号网(杭州)科技有限公司 元素的定位方法、装置、电子设备及存储介质
CN113268232A (zh) * 2020-02-17 2021-08-17 腾讯科技(深圳)有限公司 一种页面皮肤生成方法、装置和计算机可读存储介质

Patent Citations (29)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030120686A1 (en) * 2001-12-21 2003-06-26 Xmlcities, Inc. Extensible stylesheet designs using meta-tag and/or associated meta-tag information
US20050114771A1 (en) * 2003-02-26 2005-05-26 Bea Systems, Inc. Methods for type-independent source code editing
US20080065982A1 (en) * 2006-09-11 2008-03-13 International Business Machines Corporation User Driven Computerized Selection, Categorization, and Layout of Live Content Components
WO2009124584A1 (en) * 2008-04-07 2009-10-15 Ackermann Eike N Browser based text and code processing
FR2953311A1 (fr) * 2009-12-01 2011-06-03 Shoopz Procede de modification dynamique du rendu d'une page web.
US20130232430A1 (en) * 2011-08-26 2013-09-05 Reincloud Corporation Interactive user interface
CN104166656A (zh) * 2013-05-17 2014-11-26 阿里巴巴集团控股有限公司 流量统计的网页化展示方法及装置
CN104572668A (zh) * 2013-10-15 2015-04-29 阿里巴巴集团控股有限公司 基于多个样式文件生成合并样式文件的方法和设备
CN104050002A (zh) * 2014-06-24 2014-09-17 广州金山网络科技有限公司 一种应用软件界面换肤方法及装置
US20170039169A1 (en) * 2015-08-04 2017-02-09 Google Inc. Systems and methods for interactively presenting a visible portion of a rendering surface on a user device
CN105447198A (zh) * 2015-12-30 2016-03-30 深圳市瑞铭无限科技有限公司 页面脚本便捷导入的方法及装置
CN106294816A (zh) * 2016-08-16 2017-01-04 腾讯科技(深圳)有限公司 页面信息的处理方法和装置
CN108090069A (zh) * 2016-11-22 2018-05-29 北京神州泰岳软件股份有限公司 一种在浏览器中显示网页资源的方法和装置
WO2019095968A1 (zh) * 2017-11-20 2019-05-23 华为技术有限公司 一种动态加载方法、目标文件的制作方法及装置
CN110020316A (zh) * 2017-12-22 2019-07-16 航天信息股份有限公司 一种列表的显示方法及装置
CN110543298A (zh) * 2018-05-28 2019-12-06 北京京东尚科信息技术有限公司 网页样式生成方法及装置、网页生成方法及装置
US20200019583A1 (en) * 2018-07-11 2020-01-16 University Of Southern California Systems and methods for automated repair of webpages
CN110727482A (zh) * 2018-07-16 2020-01-24 阿里巴巴集团控股有限公司 一种界面的更新方法和装置
WO2020119435A1 (zh) * 2018-12-13 2020-06-18 深圳壹账通智能科技有限公司 iOS页面布局方法、终端设备及计算机可读存储介质
CN110688600A (zh) * 2019-09-09 2020-01-14 平安普惠企业管理有限公司 基于html页面的在线编辑方法、装置、设备及存储介质
CN110750683A (zh) * 2019-09-20 2020-02-04 平安普惠企业管理有限公司 数据修改方法、装置、计算机设备及存储介质
CN110990731A (zh) * 2019-10-12 2020-04-10 平安国际智慧城市科技股份有限公司 一种静态网页的渲染方法、装置、设备及计算机存储介质
CN113268232A (zh) * 2020-02-17 2021-08-17 腾讯科技(深圳)有限公司 一种页面皮肤生成方法、装置和计算机可读存储介质
CN111581565A (zh) * 2020-05-09 2020-08-25 北京思特奇信息技术股份有限公司 一种页面样式配置方法、系统、介质及设备
CN111666123A (zh) * 2020-05-28 2020-09-15 平安医疗健康管理股份有限公司 页面主题控制方法、系统和计算机设备
CN112287255A (zh) * 2020-07-13 2021-01-29 上海柯林布瑞信息技术有限公司 页面构建方法及装置、计算设备、计算机可读存储介质
CN112632437A (zh) * 2020-11-27 2021-04-09 中国银联股份有限公司 一种网页页面生成方法、装置及计算机可读存储介质
CN112783783A (zh) * 2021-01-29 2021-05-11 广州繁星互娱信息科技有限公司 网页埋点方法、装置、设备及可读存储介质
CN113051514A (zh) * 2021-03-26 2021-06-29 挂号网(杭州)科技有限公司 元素的定位方法、装置、电子设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
朱永生;王军;: "基于Web内容的一种数据自动抽取方法", 计算机技术与发展, no. 05, 10 May 2012 (2012-05-10) *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114422858A (zh) * 2022-03-25 2022-04-29 北京智象信息技术有限公司 一种Linux智能电视皮肤快速生成方法、系统、设备及介质
CN114422858B (zh) * 2022-03-25 2022-11-18 北京智象信息技术有限公司 一种Linux智能电视皮肤快速生成方法、系统、设备及介质

Also Published As

Publication number Publication date
CN113868565B (zh) 2024-05-24

Similar Documents

Publication Publication Date Title
US20190310835A1 (en) Application development method, tool, and device, and storage medium
CN107577459B (zh) 一种基于组件化的拖拽式跨平台应用开发系统及方法
CN100444158C (zh) 使用外部计划主题的Web网页绘制机制
US10108715B2 (en) Transformation and presentation of on-demand native application crawling results
CN104731589A (zh) 用户界面的自动生成方法及自动生成装置
US9817811B2 (en) Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method
US20230229406A1 (en) Page rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product
Murphy et al. Beginning Android 3
CN111679818A (zh) 编辑展示软件的方法和系统
CN108959475A (zh) 一种网页设置方法及装置
CN110941779A (zh) 加载页面的方法、装置、存储介质及电子设备
US10114617B2 (en) Rapid visualization rendering package for statistical programming language
CN113868565B (zh) 皮肤样式的文件编辑方法及装置
CN113792208A (zh) 基于网页的图片交互方法、装置、设备、介质及程序产品
CN113656005A (zh) 应用组件库构建方法、应用组件配置方法及相关装置
CN117093386A (zh) 页面截图方法、装置、计算机设备和存储介质
CN112558957B (zh) 生成网页表格的方法、装置、电子设备及可读存储介质
CN113934959B (zh) 一种程序预览方法、装置、计算机设备和存储介质
CN114168875A (zh) 一种页面程序的生成方法、装置、计算机设备及存储介质
KR102191458B1 (ko) 웹 데이터 수집 장치 및 방법
KR101987183B1 (ko) 프론트-앤드 개발을 지원하는 앱 저작 장치, 앱 저작 도구를 사용한 앱 저작 방법 및 앱 개발 서버
CN111694723B (zh) 产品在h5下运行时对节点及组件编辑的方法、存储介质
CN111949266B (zh) 网页生成方法、装置及电子设备
CN112988136B (zh) 一种用户界面编辑方法及装置
Bendoraitis Web Development with Django Cookbook

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant