CN112130853B - 一种实现前端h5业务能力开放的方法及系统 - Google Patents

Abstract

本发明提供一种实现前端H5业务能力开放的方法及系统，涉及互联网触点营销技术领域，包括步骤：对平台内各页面所有的元素进行编码，编制元素编码表；定义元素的可编辑形式和内容，对应编制元素的可编辑css文件及元素编辑参照表；将编制的可编辑css文件引入到平台或页面的固定资源存放目录下；根据元素编码表和元素编辑参照表，对各元素的可编辑css文件进行编辑，对H5页面进行设计；H5页面展示时，调用资源存放目录下的css文件，显示编辑后的H5页面。该发明的有益效果是：对H5页面元素进行编码、定义可编辑内容，给出元素编辑参照表，使各触点可以根据自己的页面风格，对产品的H5页面中提前定义好的可编辑项进行编辑，实现个性化、并快速上线产品。

Description

一种实现前端H5业务能力开放的方法及系统

技术领域

本发明涉及互联网触点营销技术领域，尤其是涉及一种实现前端H5业务能力开放的方法及系统。

背景技术

随着运营商向互联网转型，与互联网企业合作运营，在互联网触点、内部触点同时推广其自身业务、售卖其自身产品，增加产品的推广力度和覆盖范围，使消费者更方便的购买产品；但是在该推广过程中，由于各触点(包括不同的互联网触点和内部触点)技术框架、页面风格均不同，为适应不同触点的页面风格，需要对页面进行差异化、模板化、配置化的定制，实现各触点自助编辑、配置符合触点风格的个性化业务模板。

发明内容

针对上述问题，本发明提供了一种实现前端H5业务能力开放的方法及系统，实现各触点自助编辑、配置符合触点风格的个性化业务模板。

为实现上述目的，本发明提供了一种实现前端H5业务能力开放的方法，包括步骤：

对平台内各页面所有的元素进行编码，并编制元素编码表；

定义所述元素的可编辑形式和内容，对应编制元素的可编辑css文件及元素编辑参照表；

将编制的所述可编辑css文件引入到平台或页面的固定资源存放目录下；

根据所述元素编码表和元素编辑参照表，对各元素的可编辑css文件进行编辑，完成H5页面的个性化设计；

H5页面展示时，调用资源存放目录下的css文件，显示编辑后的H5页面。

作为本发明的进一步改进，

所述元素编码表中包括元素名称和元素编码；

所述元素编辑参照表中包括元素编码、编辑形式和编辑内容选项。

作为本发明的进一步改进，

所述定义所述元素的可编辑形式和内容中，所述可编辑形式包括可插拔和可调整，可插拔编辑内容包括元素的显示和隐藏；可调整的编辑内容包括元素背景色、字体颜色、字体、大小。

作为本发明的进一步改进，

将所述可编辑css文件引入平台的固定资源存放目录下时，文件名称格式满足cop_common*.css，其中，符号*为下划线和css文件的修改日期；

将所述可编辑css文件引入页面的固定资源存放目录下时，文件名称格式满足cop_busi*.css，其中，符号*为下划线和css文件的修改日期。

作为本发明的进一步改进，

当将所述可编辑css文件引入平台的固定资源存放目录下时，对所述可编辑css文件中所述元素背景色的编辑，适用于平台内的所有页面；

当将所述可编辑css文件引入页面的固定资源存放目录下时，对所述可编辑css文件中所述元素背景色的编辑，只适用于该页面。

本发明还提供了一种实现前端H5业务能力开放的系统，包括元素编码模块、编辑定义模块、css文件编制模块、css文件引入模块和css文件编辑模块；

所述元素编码模块，用于：

对平台内各页面所有的元素进行编码，并编制元素编码表；

所述编辑定义模块，用于：

定义所述元素的可编辑形式和内容；

所述css文件编制模块，用于：

根据所述元素的可编辑形式和内容，对应编制元素的可编辑css文件及元素编辑参照表；

所述css文件引入模块，用于：

将编制的所述可编辑css文件引入到平台或页面的固定资源存放目录下；

所述css文件编辑模块，用于：

根据所述元素编码表和元素编辑参照表，对各元素的可编辑css文件进行编辑，完成H5页面的个性化设计。

作为本发明的进一步改进，所述元素编码模块编制的元素编码表中包括元素名称和元素编码；

所述css文件编制模块编制的元素编辑参照表中包括元素编码、编辑形式和编辑内容选项。

作为本发明的进一步改进，所述编辑定义模块定义元素的可编辑形式包括可插拔和可调整，可插拔编辑内容包括元素的显示和隐藏；可调整的编辑内容包括元素背景色、字体颜色、字体、大小。

作为本发明的进一步改进，所述css文件引入模块，

若将所述可编辑css文件引入平台的固定资源存放目录下时，文件名称格式要满足cop_common*.css，其中，符号*为下划线和css文件的修改日期；

若将所述可编辑css文件引入页面的固定资源存放目录下时，文件名称格式满足cop_busi*.css，其中，符号*为下划线和css文件的修改日期。

作为本发明的进一步改进，所述css文件引入模块，

当将所述可编辑css文件引入平台的固定资源存放目录下时，对所述可编辑css文件中所述元素背景色的编辑，适用于平台内的所有页面；

当将所述可编辑css文件引入页面的固定资源存放目录下时，对所述可编辑css文件中所述元素背景色的编辑，只适用于该页面。

与现有技术相比，本发明的有益效果为：

通过对H5页面元素进行编码、定义可编辑内容，给出元素编辑参照表；使各触点上架该产品，展示该产品页面时，各触点可以根据自己的页面风格，对产品的H5页面中提前定义好的可编辑项进行快速便捷的差异化、个性化配置和调整，进而不影响产品商的产品核心内容的同时，实现个性化、并快速上线产品。

设计中，将可编辑的css文件，引入平台级或页面级，主要针对所有页面中部分内容的编辑调整具有统一性，将具有统一性的编辑直接引入平台级，使修改更加方便快捷。

附图说明

图1为本发明一种实施例公开的实现前端H5业务能力开放的方法流程图；

图2为本发明一种实施例公开的实现前端H5业务能力开放的系统示意图；

图3为本发明一种实施例公开的联通99元冬梦卡销售H5页面示意图；

图4为本发明一种实施例公开的沃易售平台99元冬梦卡销售H5页面示意图；

图5为本发明一种实施例公开的固定资源存放目录结构示意图。

具体实施方式

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

下面结合附图对本发明做进一步的详细描述：

如图1所示，根据本发明提供的一种实现前端H5业务能力开放的方法，包括步骤：

对平台内各页面所有的元素进行编码，并编制元素编码表；

其中，元素编码表中包括元素名称和元素编码。

定义元素的可编辑形式和内容，对应编制元素的可编辑css文件及元素编辑参照表；

其中，可编辑形式包括可插拔和可调整，可插拔编辑内容包括元素的显示和隐藏；可调整的编辑内容包括元素背景色、字体颜色、字体、大小；

元素编辑参照表中包括元素编码、编辑形式和编辑内容选项。

将编制的可编辑css文件引入到平台或页面的固定资源存放目录下；

其中，将可编辑css文件引入平台的固定资源存放目录下时，文件名称格式满足cop_common*.css，其中，符号*为下划线和css文件的修改日期；对可编辑css文件中元素背景色的编辑，适用于平台内的所有页面；

将可编辑css文件引入页面的固定资源存放目录下时，文件名称格式满足cop_busi*.css，其中，符号*为下划线和css文件的修改日期；对可编辑css文件中元素背景色的编辑，只适用于该页面。

根据元素编码表和元素编辑参照表，对各元素的可编辑css文件进行编辑，完成H5页面的个性化设计；

H5页面展示时，调用资源存放目录下的css文件，显示编辑后的H5页面。

如图2所示，本发明还提供了一种实现前端H5业务能力开放的系统，包括元素编码模块、编辑定义模块、css文件编制模块、css文件引入模块和css文件编辑模块；

元素编码模块，用于：

对平台内各页面所有的元素进行编码，并编制元素编码表；

其中，元素编码表中包括元素名称和元素编码；

编辑定义模块，用于：

定义元素的可编辑形式和内容；

其中，编辑定义模块定义元素的可编辑形式包括可插拔和可调整，可插拔编辑内容包括元素的显示和隐藏；可调整的编辑内容包括元素背景色、字体颜色、字体、大小。

css文件编制模块，用于：

根据元素的可编辑形式和内容，对应编制元素的可编辑css文件及元素编辑参照表；

其中，元素编辑参照表中包括元素编码、编辑形式和编辑内容选项。

css文件引入模块，用于：

将编制的可编辑css文件引入到平台或页面的固定资源存放目录下；

其中，将可编辑css文件引入平台的固定资源存放目录下时，文件名称格式要满足cop_common*.css，其中，符号*为下划线和css文件的修改日期；对可编辑css文件中元素背景色的编辑，适用于平台内的所有页面；

将可编辑css文件引入页面的固定资源存放目录下时，文件名称格式满足cop_busi*.css，其中，符号*为下划线和css文件的修改日期；对可编辑css文件中元素背景色的编辑，只适用于该页面。

css文件编辑模块，用于：

根据元素编码表和元素编辑参照表，对各元素的可编辑css文件进行编辑，完成H5页面的个性化设计。

实施例：

以联通公司99元冬梦卡销售H5页面为例，联通触点显示H5页面如图3所示，对H5页面底层css文件进行设置。

S1：对平台内各页面所有的元素进行编码，并编制元素编码表；

其中，元素编码表中包括元素名称和元素编码。

元素编码表如下：

S2：定义元素的可编辑形式和内容，对应编制元素的可编辑css文件及元素编辑参照表；

其中，元素编辑参照表中包括元素编码、编辑形式和编辑内容选项；

可编辑形式包括可插拔和可调整，可插拔编辑内容包括元素的显示和隐藏；可调整的编辑内容包括元素背景色、字体颜色、字体、大小。

以图3页面为例，元素编辑参照表如下：

以S007的可插拔，编制可编辑css文件示例：

(1)可插拔通过display属性控制，blcok表示显示，none表示隐藏；

(2)将display的值在可编辑css文件中设为变量，变量命名规范：％#元素编码#_display％；

(3)S007的可编辑的css文件即为：

.display_customize{

display:‘${s001_display}’

}

以S001的可调整中调整背景颜色和字体颜色，编制可编辑css文件示例：

(1)可调整背景颜色和字体颜色通过background属性控制，采用16进制表示颜色值；

(2)将background的值在可编辑css文件中设为变量，变量命名规范：％#元素编码#_background％；

(3)S007的可编辑的css文件即为：

S3：将编制的可编辑css文件引入到平台或页面的固定资源存放目录下；

其中，将可编辑css文件引入平台的固定资源存放目录下时，文件名称格式满足cop_common*.css，其中，符号*一般为下划线和css文件的修改日期；对可编辑css文件中元素背景色的编辑，适用于平台内的所有页面；

将可编辑css文件引入页面的固定资源存放目录下时，文件名称格式满足cop_busi*.css，其中，符号*一般为下划线和css文件的修改日期；对可编辑css文件中元素背景色的编辑，只适用于该页面。

*部分是为了解决样式文件缓存问题，文件路径不限制，按照本平台默认样式文件存放地址定义即可；

以图5所示固定资源存放目录结构，引入css文件示例：

(1)引入平台的固定资源存放目录下样式举例：

<link rel＝"stylesheet"type＝"text/css"href＝"/pub_ui/portal/css/cop_common_20200528.css"/>

(2)引入页面的固定资源存放目录下样式举例：

<link rel＝"stylesheet"type＝"text/css"href＝"/pub_ui/portal/busi001/css/cop_busi_20200528.css"/>

S4：根据元素编码表和元素编辑参照表，对各元素的可编辑css文件进行编辑，完成H5页面的个性化设计；

(1)若触点平台将元素编号S007处设为显示，则编辑后的css文件为：

.display_customize{

display:‘blcok’

}

若触点平台将元素编号S007处设为隐藏，则编辑后的css文件为：

.display_customize{

display:‘none’

}

(2)若触点平台将元素编号S001处背景颜色设为#b5a789，字体颜色设为#675c47，则编辑后的css文件为：

S5：沃易售平台H5页面展示时，调用资源存放目录下的css文件，显示编辑后的H5页面，如图4所示。

本发明的优点：

通过对H5页面元素进行编码、定义可编辑内容，给出元素编辑参照表；使各触点上架该产品，展示该产品页面时，各触点可以根据自己的页面风格，对产品的H5页面中提前定义好的可编辑项进行快速便捷的差异化、个性化配置和调整，进而不影响产品商的产品核心内容的同时，实现个性化、并快速上线产品。

设计中，将可编辑的css文件，引入平台级或页面级，主要针对所有页面中部分内容的编辑调整具有统一性，将具有统一性的编辑直接引入平台级，使修改更加方便快捷。

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

Claims (8)

1.一种实现前端H5业务能力开放的方法，其特征在于，包括步骤：

对平台内各页面所有的元素进行编码，并编制元素编码表；

定义所述元素的可编辑形式和内容，对应编制元素的可编辑css文件及元素编辑参照表；

将编制的所述可编辑css文件引入到平台或页面的固定资源存放目录下，当将所述可编辑css文件引入平台的固定资源存放目录下时，对所述可编辑css文件中所述元素背景色的编辑，适用于平台内的所有页面；当将所述可编辑css文件引入页面的固定资源存放目录下时，对所述可编辑css文件中所述元素背景色的编辑，只适用于该页面；

根据所述元素编码表和元素编辑参照表，对各元素的可编辑css文件进行编辑，完成H5页面的个性化设计；

H5页面展示时，调用资源存放目录下的css文件，显示编辑后的H5页面。

2.根据权利要求1所述的一种实现前端H5业务能力开放的方法，其特征在于：

所述元素编码表中包括元素名称和元素编码；

所述元素编辑参照表中包括元素编码、编辑形式和编辑内容选项。

3.根据权利要求1所述的一种实现前端H5业务能力开放的方法，其特征在于：

所述定义所述元素的可编辑形式和内容中，所述可编辑形式包括可插拔和可调整，可插拔编辑内容包括元素的显示和隐藏；可调整的编辑内容包括元素背景色、字体颜色、字体、大小。

4.根据权利要求1所述的一种实现前端H5业务能力开放的方法，其特征在于：

将所述可编辑css文件引入平台的固定资源存放目录下时，文件名称格式满足cop_common*.css，其中，符号*为下划线和css文件的修改日期；或，

将所述可编辑css文件引入页面的固定资源存放目录下时，文件名称格式满足cop_busi*.css，其中，符号*为下划线和css文件的修改日期。

5.一种实现前端H5业务能力开放的系统，其特征在于：包括元素编码模块、编辑定义模块、css文件编制模块、css文件引入模块和css文件编辑模块；

所述元素编码模块，用于：

对平台内各页面所有的元素进行编码，并编制元素编码表；

所述编辑定义模块，用于：

定义所述元素的可编辑形式和内容；

所述css文件编制模块，用于：

根据所述元素的可编辑形式和内容，对应编制元素的可编辑css文件及元素编辑参照表；

所述css文件引入模块，用于：

将编制的所述可编辑css文件引入到平台或页面的固定资源存放目录下，当将所述可编辑css文件引入平台的固定资源存放目录下时，对所述可编辑css文件中所述元素背景色的编辑，适用于平台内的所有页面；当将所述可编辑css文件引入页面的固定资源存放目录下时，对所述可编辑css文件中所述元素背景色的编辑，只适用于该页面；

所述css文件编辑模块，用于：

根据所述元素编码表和元素编辑参照表，对各元素的可编辑css文件进行编辑，完成H5页面的个性化设计。

6.根据权利要求5所述的一种实现前端H5业务能力开放的系统，其特征在于：

所述元素编码模块编制的元素编码表中包括元素名称和元素编码；

所述css文件编制模块编制的元素编辑参照表中包括元素编码、编辑形式和编辑内容选项。

7.根据权利要求5所述的一种实现前端H5业务能力开放的系统，其特征在于：

所述编辑定义模块定义元素的可编辑形式包括可插拔和可调整，可插拔编辑内容包括元素的显示和隐藏；可调整的编辑内容包括元素背景色、字体颜色、字体、大小。

8.根据权利要求5所述的一种实现前端H5业务能力开放的系统，其特征在于：所述css文件引入模块，

若将所述可编辑css文件引入平台的固定资源存放目录下时，文件名称格式要满足cop_common*.css，其中，符号*为下划线和css文件的修改日期；

若将所述可编辑css文件引入页面的固定资源存放目录下时，文件名称格式满足cop_busi*.css，其中，符号*为下划线和css文件的修改日期。