页面定制方法、装置及设备与流程

    专利2025-08-03  23


    本技术实施例涉及网页开发,尤其涉及一种页面定制方法、装置及设备。


    背景技术:

    1、开放银行是一种新的金融服务模式,旨在通过开放金融数据和应用程序编程接口(如h5页面)来促进不同金融机构之间的合作和互操作性。h5页面是指基于html5(hypertext markup language 5,第5代超文本标记语言)技术开发的页面,h5页面具有成熟度高、开箱即用的特点,得到了广泛地应用。

    2、在开放银行的场景下,金融机构对于合作方提供的h5页面存在定制化开发的需求,如修改主题、增加页面内容等,需要页面开发人员针对不同合作方各自的需求进行开发,页面开发工作量较大、开发周期较长,导致h5页面产品的灵活度低、无法快速上线满足业务开展的需求。

    3、因此,亟需一种页面定制方法,以提高页面上线速度。


    技术实现思路

    1、本技术实施例提供一种页面定制方法、装置及设备,基于web components技术,实现了h5页面的灵活、动态定制,提高了不同定制需求下h5页面上线的速度。

    2、第一方面,本技术实施例提供一种页面定制方法,应用于银行服务端,包括:

    3、基于h5页面的布局以及所述h5页面对应的业务流程,确定所述h5页面的自定义区域;

    4、基于网页组件的自定义元素,在所述h5页面的模板的源代码文件中,放置位于所述自定义区域内的占位自定义元素,并将所述占位自定义元素的样式设置为默认隐藏样式;

    5、发布所述h5页面的模板,以使第三方通过所述h5页面的模板中的占位自定义元素实现所述第三方的自定义组件,以得到所述第三方对应的第三方定制页面,所述第三方定制页面为包括第三方的自定义组件的h5页面。

    6、可选的,基于所述h5页面的布局以及所述h5页面对应的业务流程,确定所述h5页面的自定义区域,包括:

    7、基于所述h5页面对应的业务流程,确定所述h5页面对应的自定义组件的尺寸需求;

    8、基于所述尺寸需求以及所述h5页面的布局,从所述h5页面的空白区域中,确定所述h5页面的自定义区域。

    9、可选的,所述方法还包括:

    10、获取所述h5页面的模板,以及所述h5页面上自定义区域的属性信息,所述属性信息包括所述自定义区域的数量、位置和尺寸;

    11、发布所述h5页面的模板,包括:

    12、联合发布所述h5页面的模板以及所述h5页面上自定义区域的属性信息。

    13、可选的,获取所述h5页面的模板,包括:

    14、基于所述h5页面对应的业务流程,确定所述h5页面中的必要元素;

    15、在保留所述必要元素的前提下,对所述h5页面进行模板化改造,得到所述h5页面的模板。

    16、可选的,所述方法还包括:

    17、获取并存储多个第三方上传的基于所述网页组件实现的所述h5页面的自定义组件;

    18、在所述h5页面上线后,获取用户端终端发送的所述h5页面的加载请求;

    19、基于所述页面访问请求中对应的第三方标识,从存储的自定义组件中,获取所述第三方标识对应的自定义组件;

    20、向所述用户终端反馈所述第三方标识对应的自定义组件的存储地址以及所述h5页面的模板的存储地址,以使所述用户终端通过存储地址获取所述h5页面的模板以及所述第三方标识对应的自定义组件,以在所述用户终端加载所述h5页面以及所述第三方标识对应的自定义组件。

    21、可选的,在获取多个第三方上传的基于所述网页组件实现的所述h5页面的自定义组件之后,所述方法还包括:

    22、基于代码检查工具以及合规检查工具,对多个所述第三方上传的所述自定义组件进行代码审核和内容合规审核,以存储审核通过的所述自定义组件。

    23、可选的,所述h5页面的模板中设置有自定义配置开关变量,在获取用户端终端发送的所述h5页面的加载请求之后,所述方法还包括:

    24、若所述h5页面的自定义配置开关变量为开启状态,则执行基于所述页面访问请求中对应的第三方标识,获取该第三方标识对应的自定义组件的步骤;

    25、若所述h5页面的自定义配置开关变量为关闭状态,则向所述用户终端反馈所述h5页面的模板的存储地址,以使所述用户终端通过存储地址获取所述h5页面的模板,以在所述用户终端加载所述h5页面的初始版本。

    26、第二方面,本技术实施例还提供另一种页面定制方法,应用于第三方终端,包括:

    27、基于业务需求,从银行提供的多个h5页面的模板中,选择目标模板;

    28、基于所述目标模板自定义区域内放置的占位用的自定义元素以及网页组件,生成所述目标模板对应的h5页面的自定义组件;

    29、将所述自定义组件上传至银行服务端,以得到第三方定制页面,所述第三方定制页面为包括所述自定义组件的所述目标模板对应的h5页面。

    30、第三方面,本技术实施例还提供一种页面定制装置,应用于银行服务端,包括:

    31、自定义区域确定模块,用于基于h5页面的布局以及所述h5页面对应的业务流程,确定所述h5页面的自定义区域;

    32、自定义元素放置模块,用于基于网页组件中的自定义元素,在所述h5页面的模板的源代码文件中,放置位于所述自定义区域内的占位自定义元素,并将所述占位自定义元素的样式设置为默认隐藏样式;

    33、模板发布模块,用于发布所述h5页面的模板,以使第三方通过所述h5页面的模板中的占位自定义元素实现所述第三方的自定义组件,以得到所述第三方对应的第三方定制页面,所述第三方定制页面为包括第三方的自定义组件的h5页面。

    34、第四方面,本技术实施例还提供了一种页面定制设备,包括存储器和至少一个处理器;所述存储器存储计算机执行指令;所述至少一个处理器执行所述存储器存储的计算机执行指令,使得所述至少一个处理器执行本技术任意实施例提供的页面定制方法。

    35、第五方面,本技术实施例还提供了一种计算机可读存储介质,所述计算机可读存储介质中存储有计算机执行指令,所述计算机执行指令被处理器执行时用于实现如本技术任意实施例提供的页面定制方法。

    36、第六方面,本技术实施例还提供了一种计算机程序产品,包括计算机程序,所述计算机程序被处理器执行时实现如本技术任意实施例提供的页面定制方法。

    37、本技术实施例提供的一种页面定制方法、装置及设备,针对银行向第三方提供的可定制的h5页面,基于该h5页面的页面布局以及该h5页面对应的业务流程,从该h5页面的区域中确定可以定制的自定义区域;基于网页组件(web components)的自定义元素(custom elements),在该h5页面模板的源代码文件中,放置位于各自定义区域内的占位用的占位自定义元素,发布放置有占位自定义元素的h5页面的模板,从而使得一个或多个第三方通过该占位自定义元素实现h5页面元素或组件的自定义,通过h5页面的模板加载自定义组件,实现h5页面的定制,无需在需求变动或面临不同需求时,重新开发页面,提高了页面的复用程度,缩短了页面的开发周期,提高了h5页面的上线速度;且在未提供自定义组件时,由于占位自定义元素的样式默认为隐藏样式,不会在页面上展示,不影响页面内容的展示。


    技术特征:

    1.一种页面定制方法,其特征在于,所述方法应用于银行服务端,所述方法包括:

    2.根据权利要求1所述的方法,其特征在于,基于所述h5页面的布局以及所述h5页面对应的业务流程,确定所述h5页面的自定义区域,包括:

    3.根据权利要求1所述的方法,其特征在于,所述方法还包括:

    4.根据权利要求3所述的方法,其特征在于,获取所述h5页面的模板,包括:

    5.根据权利要求1-4任一项所述的方法,其特征在于,所述方法还包括:

    6.根据权利要求5所述的方法,其特征在于,在获取多个第三方上传的基于所述网页组件实现的所述h5页面的自定义组件之后,所述方法还包括:

    7.根据权利要求5所述的方法,其特征在于,所述h5页面的模板中设置有自定义配置开关变量,在获取用户端终端发送的所述h5页面的加载请求之后,所述方法还包括:

    8.一种页面定制方法,其特征在于,所述方法应用于第三方终端,所述方法包括:

    9.一种页面定制装置,其特征在于,所述装置应用于银行服务端,所述装置包括:

    10.一种页面定制设备,其特征在于,包括:存储器和至少一个处理器;


    技术总结
    本申请实施例提供一种页面定制方法、装置及设备,该页面定制方法包括:基于H5页面的布局以及H5页面对应的业务流程,确定H5页面的自定义区域;基于网页组件的自定义元素,在H5页面的模板的源代码文件中,放置位于自定义区域内的占位自定义元素,并将占位自定义元素的样式设置为默认隐藏样式;发布H5页面的模板,以使第三方通过H5页面的模板中的占位自定义元素实现第三方的自定义组件,以得到第三方对应的第三方定制页面,第三方定制页面为包括第三方的自定义组件的H5页面。实现了基于Web Components的H5页面定制,提高了页面定制的灵活性,通过页面的灵活定制,提高了不同定制需求下页面的上线速度。

    技术研发人员:吉国昌
    受保护的技术使用者:中国农业银行股份有限公司
    技术研发日:
    技术公布日:2024/4/29
    转载请注明原文地址:https://wp.8miu.com/read-90368.html

    最新回复(0)