CN114594934A - 一种可视化页面生成方法、装置、设备及介质 - Google Patents

Abstract

本发明实施例发明了一种可视化页面生成方法、装置、设备及介质。该方法包括：配置活动页面的属性参数以及至少两个页面展示渠道；根据预设页面组件生成活动页面的目标预览页，并基于目标预览页生成对应各页面展示渠道的展示代码；配置各页面展示渠道的路由匹配规则以使客户端根据路由匹配规则访问对应的活动页面。本发明实施例，根据预设页面组件生成活动页面的目标预览页，并基于目标预览页生成对应各页面展示渠道的展示代码，配置各页面展示渠道的路由匹配规则以使客户端根据路由匹配规则访问对应的活动页面，解决了不同客户端之间交互差异化的问题，使得应用一套代码可以应用在不同客户端上，减少了项目迭代的开发成本和运营成本。

Description

一种可视化页面生成方法、装置、设备及介质

技术领域

本发明实施例涉及研发管理技术领域，尤其涉及一种可视化页面生成方法、装置、设备及介质。

背景技术

智能终端的迅速发展，使得很多平台可以通过不同平台的页面向智能终端的用户传递业务信息，例如：页面营销类活动信息、页面游戏类活动等等，大部分前端应用的需求现状已转变，需要投放到不同平台引流，满足运营同时在多个平台实施营销的诉求。对于前端开发人员来说会存在多端差异化的交互流程，对于不同平台的原生端需要兼容逻辑。现有技术中，对于不同平台的客户端，没有通用的页面模板，前端开发人员需要维护多套代码，在不同的客户端应用均对应有不同平台的登录、授权等流程，增加了项目迭代的开发成本和运营成本。

发明内容

有鉴于此，本发明提供一种可视化页面生成方法、装置、设备及介质，能够解决不同客户端之间交互差异化问题，使得应用一套代码可以应用在不同客户端上，减少项目迭代的开发成本和运营成本。

根据本发明的一方面，本发明实施例提供了一种可视化页面生成方法，该方法包括：

配置活动页面的属性参数以及至少两个页面展示渠道，其中，各所述页面展示渠道对应的功能代码位于相同程序文件；

根据预设页面组件生成所述活动页面的目标预览页，并基于所述目标预览页生成对应各所述页面展示渠道的展示代码；

配置各所述页面展示渠道的路由匹配规则以使客户端根据所述路由匹配规则访问对应的所述活动页面。

根据本发明的另一方面，本发明实施例还提供了一种可视化页面生成装置，该装置包括：

渠道配置模块，配置活动页面的属性参数以及至少两个页面展示渠道，其中，各所述页面展示渠道对应的功能代码位于相同程序文件；

代码生成模块，根据预设页面组件生成所述活动页面的目标预览页，并基于所述目标预览页生成对应各所述页面展示渠道的展示代码；

规则配置模块，配置各所述页面展示渠道的路由匹配规则以使客户端根据所述路由匹配规则访问对应的所述活动页面。

根据本发明的另一方面，本发明实施例还提供了一种电子设备，所述电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例所述的可视化页面生成方法。

根据本发明的另一方面，本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现本发明任一实施例所述的可视化页面生成方法。

本发明实施例的技术方案，通过配置活动页面的属性参数以及至少两个页面展示渠道，其中，各页面展示渠道对应的功能代码位于相同程序文件；根据预设页面组件生成活动页面的目标预览页，并基于目标预览页生成对应各页面展示渠道的展示代码；配置各页面展示渠道的路由匹配规则以使客户端根据路由匹配规则访问对应的活动页面。本发明实施例，根据预设页面组件生成活动页面的目标预览页，并基于目标预览页生成对应各页面展示渠道的展示代码，配置各页面展示渠道的路由匹配规则以使客户端根据路由匹配规则访问对应的所述活动页面，解决了不同客户端之间交互差异化的问题，使得应用一套代码可以应用在不同客户端上，减少了项目迭代的开发成本和运营成本。

应当理解，本部分所描述的内容并非旨在标识本发明的实施例的关键或重要特征，也不用于限制本发明的范围。本发明的其它特征将通过以下的说明书而变得容易理解。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例一提供的一种可视化页面生成的流程图；

图2为本发明实施例二提供的又一种可视化页面生成方法的流程图；

图3为本发明实施例二提供的一种活动页面配置流程图；

图4为本发明实施例二提供的又一种活动页面配置流程图；

图5为本发明实施例二提供的一种可视化页面生成方法的架构示意图；

图6为本发明实施例二提供的一种后台元数据产出元数据示意图；

图7为本发明实施例二提供的一种多端代码生成示意图；

图8为本发明实施例二提供的一种多端代码转换为目标代码示意图；

图9为本发明实施例二提供的一种实现活动页面的展示的流程示意图；

图10是本发明实施例三提供的一种可视化页面生成装置的结构框图；

图11示出了可以用来实施本发实施例四提供的一种电子设备的结构示意图。

具体实施方式

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

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

实施例一

在一实施例中，图1为本发明实施例一提供的一种可视化页面生成的流程图，本实施例可适用于对可视化页面进行生成时的情况，该方法可以由可视化页面生成装置来执行，该可视化页面生成装置可以采用硬件和/或软件的形式实现，该可视化页面生成装置可配置于电子设备中。如图1所示，该方法包括：

S110、配置活动页面的属性参数以及至少两个页面展示渠道，其中，各页面展示渠道对应的功能代码位于相同程序文件。

其中，活动页面可以理解为相关业务活动页面，例如可以是营销类活动，游戏类活动等等，活动页面中包含有相关业务活动的活动基本详情。属性参数可以包含相关业务活动名称、展示有效期、参与有效期、展示渠道、活动管理员、域名以及活动备注。页面展示渠道可以理解为对页面活动进行展示的不同客户端。页面展示渠道可以为Web端，也可以为APP端，还可以为微信小程序插件以及微信小程序端，本实施例在此不做限制。

在本实施例中，功能代码可以理解为将页面活动的展示代码进行一定的转换之后，所得到的各页面展示渠道的功能代码。不同的页面展示渠道所对应的相关逻辑代码。其中，各页面展示渠道对应的功能代码位于相同程序文件，可以理解为不同的页面展示渠道所对应的触发逻辑代码为相同的程序文件。需要说明的是，程序文件中对不同的页面展示渠道进行了相关通信逻辑的定义，以及相关接口的定义，可以理解为，不同页面展示渠道的相关通信逻辑，触发逻辑不同等等。

在本实施例中，可以配置活动页面的相关业务活动名称、展示有效期、参与有效期、展示渠道、活动管理员、域名以及活动备注以及至少两个页面展示渠道。具体的，活动页面的属性参数可以通过用户进行输入，也可以根据以往经验进行设置，也可以预先进行一定的设置；页面展示渠道可以通过用户进行选择，也可以预先进行设置，本实施例在此不做限制。

可选的，程序文件中定义不同页面展示渠道的标准出入参数，其中，各标准出入参数的交互方法名不同。

其中，标准出入参数可以为不同页面展示渠道进行授权的标准出入参数，也可以为不同页面展示渠道进行登陆时的标准输入参数。

在本实施例中，程序文件中定义了在不同的页面展示渠道下的相关标准输入参数，各相关标准输入参数的交互方法名是不同的，但是不同页面展示渠道的标准接口是相同的。Web端和APP端、微信小程序插件和微信小程序端共同约定交互的方法名，交互的方法名可以作为交互的传输数据的唯一标识。

S120、根据预设页面组件生成活动页面的目标预览页，并基于目标预览页生成对应各页面展示渠道的展示代码。

其中，预设页面组件可以理解为预先设置的页面相关组件。预设组件里可以包括通用UI组件、营销类组件、多媒体组件、玩法类组件、相关游戏组件、通用页面模板以及悬浮类组件等。展示代码可以理解为各页面展示渠道根据预设页面组件生成活动页面的目标预览页所对应的代码。目标预览页可以理解为根据预先生成的页面组件通过某种方式所组成的不同页面展示渠道所生成的相关活动页面的预览页。

在本实施例中，可以由预先设置的相关页面组件以生成不同页面展示渠道的相关活动页面的预览页，并根据所生成的预览页以生成个页面展示渠道的相关展示代码。具体的，可以根据用户所需以选择相关的页面组件，并将选择的页面组件添加至预先设置的目标预览页中，以将页面组件的相关展示代码以DSL标准转换输出对应个页面渠道的功能代码。

S130、配置各页面展示渠道的路由匹配规则以使客户端根据路由匹配规则访问对应的活动页面。

其中，路由匹配规则可以理解为各页面展示渠道与客户端之间的匹配规则。需要说明的是，路由匹配规则可以包含个页面展示渠道的路由匹配使用的基础信息，也可以包含个页面展示渠道的相关通信逻辑，本实施例在此不做限制。客户端也可以称为用户端，可以理解为与服务器相对应，为客户提供本地服务的程序，客户端可以根据不同页面展示渠道的相关路由匹配规则，以访问相对应的活动页面渠道，例如可以为Web端和APP端、微信小程序插件和微信小程序端等等。

在本实施例中，可以配置各页面展示渠道的相关路由匹配规则，以使客户端可以根据路不同页面展示渠道的匹配规则，以访问与其相对应的活动页面。具体的，可以配置各页面展示渠道的路由匹配所使用的相关基础信息，根据配置的不同页面展示渠道所使用的相关基础信息，以做出差异化显示。

本发明实施例的技术方案，配置活动页面的属性参数以及至少两个页面展示渠道，其中，各页面展示渠道对应的功能代码位于相同程序文件；根据预设页面组件生成活动页面的目标预览页，并基于目标预览页生成对应各页面展示渠道的展示代码；配置各页面展示渠道的路由匹配规则以使客户端根据路由匹配规则访问对应的活动页面。本发明实施例，根据预设页面组件生成活动页面的目标预览页，并基于目标预览页生成对应各页面展示渠道的展示代码，配置各页面展示渠道的路由匹配规则以使客户端根据路由匹配规则访问对应的活动页面，解决了不同客户端之间交互差异化的问题，使得应用一套代码可以应用在不同客户端上，减少了项目迭代的开发成本和运营成本。

可选的，可视化页面生成方法，还包括：

接收客户端的页面访问请求，并根据页面访问请求中的页面展示渠道的标识信息按照对应的展示代码以及功能代码实现活动页面的展示。

其中，标识信息可以理解为各页面展示渠道在进行页面访问请求时的相关标识信息。

在本实施例中，在接收客户端的页面访问请求时，可以根据页面访问请求中的页面展示渠道的标识信息，并按照对应的展示代码以及功能代码实现活动页面的展示。示例性的，在接收到原生APP端的页面请求时，可以根据执行标准应用程序编程接口(Application Programming Interface，API)方法创建一个子线程用于数据通信，原生APP端启动活动页面通过提供的标准API传入Token完成初始化，当Web端发起，原生APP端返回值的时候可以同步返回，实时触发交互逻辑，达到快速响应，使用Web view打开web部署的活动页面。

需要说明的是，当宿主端为微信小程序端时，需要安装相应的微信小程序插件进行打开。小程序插件可以理解为打包出来提交到微信插件市场，所有的小程序均可以在小程序插件市场进行申请，管理员通过申请就可以使用，在应用小程序插件时，具有一定的标准对接方案。示例性的，首先安装小程序插件，然后微信小程序端启动活动通过提供的标准API传入loginCode、encryptedData、iv、授权地址及Webview地址完成数初始化即完成对接实施安装使用原生动态路由中转插件活动页面，以进行活动页面的展示。

实施例二

在一实施例中，图2为本发明实施例二提供的又一种可视化页面生成方法的流程图，本实施例在上述各实施例地基础上，对配置活动页面的属性参数以及至少两个页面展示渠道、根据预设页面组件生成活动页面的目标预览页，并基于目标预览页生成对应各页面展示渠道的展示代码以及配置各页面展示渠道的路由匹配规则以使客户端根据路由匹配规则访问对应的活动页面进行了进一步的细化，如图2所示，本实施例中的可视化页面生成方法具体可以包含如下步骤：

S210、通过可视化界面采集用户输入的页面活动的活动名称、展示有效期、参与有效期、展示渠道、活动管理员、域名以及活动备注，作为活动页面的属性参数信息。

其中，可视化界面可以理解为通过一些通用的代码设置成菜单模式，此时菜单模式即为可视化。

在本实施例中，可以通过可视化界面输入的页面活动的活动名称、展示有效期、参与有效期、展示渠道等属性作为活动页面的属性参数信息。示例性的，展示渠道可以选为微信公众号以及H5等等。

S220、通过可视化界面采集用户选择的至少两个页面展示渠道。

在本实施例中，可以通过可视化界面，以采集用户所选择的至少两个页面展示渠道，当然，用户进行选择的页面渠道，可以通过点触的方式进行选择，也可以通过拖拽的方式进行选择，本实施例在此不做限制。示例性的，可以通过点触的方式，以选择APP以及公众号，两个页面展示渠道；也可以通过点触的方式，以选择APP、web以及公众号，三个页面展示渠道。

S230、展示预设画布，并将用户选择的页面组件添加到预设画布以构成目标预览页。

其中，预设画布可以理解为预先设置的各页面展示渠道的展示画布。

在本实施例中，根据预先设置的各页面展示渠道的展示画布，可以通过用户选择的页面组件添加到预设画布中，以构成目标预览页。当然，可以通过点触的方式进行选择，也可以通过拖拽的方式进行选择。示例性的，页面组件为占位组件以及悬浮组件，其中，占位组件中包含单列图片、双列图片、三列图片、轮番图、占位色块、按钮等等，悬浮组件可以包括悬浮按钮、悬浮文字、悬浮分享、悬浮图片以及相关背景音乐等等，在选择相应的页面组件后，将其添加到预设画布以构成各页面展示渠道的目标预览页，供客户端用户观赏。

S240、在预设画布中添加至少一个页面组件到目标预览页中。

在本实施例中，在将用户选择的页面组件添加到预设画布以构成目标预览页时，用户需要将至少一个相应的页面组件添加至目标预览页面中。

S250、将目标预览页存储为DSL标准格式的源代码。

其中，源代码可以理解为以React语法代码为DSL标准格式的源代码。

在本实施例中，可以将形成目标预览页的页面组件代码存储为DSL标准格式的源代码，以通过相应的代码转换工具，转换为个页面展示渠道的功能代码。

S260、使用代码转换工具将源代码转换为对应各页面展示渠道的展示代码。

其中，代码转换工具可以理解为将形成目标预览页的页面组件的源代码转换为个页面展示渠道的代码转换工具。示例性的，代码转换工具可以为TARO开源工具，也可以为cobol代码转换工具。

在本实施例中，可以使用代码转换工具，只书写一套代码，再通过代码转换工具的编译工具，将将形成目标预览页的页面组件的源代码分别编译出可以在不同页面展示渠道，例如可以是微信小程序、H5、App端，可以运行的代码。同时代码转换工具还提供了开箱即用的语法检测和自动补全等功能。

在本实施例中，形成目标预览页的页面组件代码以React JSX作为DSL标准，页面组件提供标准的props入参，JSX可转换输出不同页面展示渠道的功能代码，然后通过代码转换工具的编译工具，配合构建脚本及基础设施完成DSL解析抽象语法树(AbstractSyntax Tree，AST)转换功能代码，将形成目标预览页的页面组件的源代码分别编译出可以在不同页面展示渠道，配合运营在后台GUI配置标准元数据作为props渲染不同平台的原生UI及交互反馈。

需要说明的是，将形成目标预览页的页面组件的源代码转换为个页面展示渠道的功能代码的过程可以为首先对源代码进行词法分析，对代码字符串进行语法分析，构建语法树，并进行语义分析，然后检查程序的正确性，进行程序转换操作进行语法树转换，最终得到目标代码，也可以称为对应各页面展示渠道的功能代码。

S270、配置各页面展示渠道的路由匹配使用的基础信息。

其中，基础信息可以理解为各页面展示渠道的相关路由匹配所使用的相关基础信息。示例性的，基础信息可以包含相关接口的参数信息、回调函数的相关逻辑信息。

在本实施例中，配置各页面展示渠道的路由匹配使用的基础信息，控制路由地址。需要说明的是，各页面展示渠道的路由匹配使用的基础信息是不同的。示例性的，页面展示渠道匹配到当前运行时，即可合法打开活动页面，读取活动元数据执行入口函数时内部处理对应平台进行授权登录，UI组件根据元数据匹配对应平台的差异化显示规则，最终显示活动页面。

需要说明的是，各页面展示渠道具有一定的通信逻辑，例如可以为app通信协议、小程序通信协议、web埋点统计sdk以及小程序埋点统计sdk等,各页面展示渠道在启动时执行初始化通信，APP端需要额外开启监听js通信方法，web发起通知后，各页面展示渠道执行回调原生逻辑，以触发交互逻辑。

S280、按照页面展示渠道的类型设置对应的差异化显示规则。

其中，页面展示渠道的类型可以为原生应用程序，也可以为浏览器，还可以为微信应用程序或微信小程序插件，本实施例在此不做限制。

在本实施例中，差异化显示规则可以为可视化页面控件的在不同页面展示渠道的差异化显示，也可以为在不同页面展示渠道的类型的情况下，使用不同的方式进行个页面展示渠道的授权、登录以及相关登录绑定关系，本实施例在此不做限制。

在本实施例中，可以按照页面展示渠道的类型，例如可以是原生应用程序、浏览器，设置与其相对应的差异化显示规则，进行相应的页面显示。

可选的，差异化显示规则包括以下至少之一：在页面展示渠道为原生应用程序时，使用JS bridge交换验证信息完成登录；在页面展示渠道为微信应用程序时，依次进行验签、授权以及基于账户登陆绑定关系的登录；在页面展示渠道为浏览器时，使用账户登陆关系完成登录；在页面展示确定为微信小程序插件时，使用Mini APP bridge向开放接口注入登陆参数以完成授权以及登陆账户。

在本实施例中，在页面展示渠道为原生应用程序的情况下，可以使用JS bridge交换验证信息完成登录；在页面展示渠道为微信应用程序的情况下，依次进行验签、授权以及基于账户登陆绑定关系的登录；在页面展示渠道为浏览器的情况下，可以使用账户登陆关系完成登录；在页面展示确定为微信小程序插件的情况下，可以使用Mini APP bridge向开放接口注入登陆参数以完成授权以及登陆账户，之后进行相应的渲染活动页面。

本发明实施例的上述技术方案，通过将用户选择的页面组件添加到预设画布以构成目标预览页，在预设画布中添加至少一个页面组件到目标预览页中，将目标预览页存储为DSL标准格式的源代码；使用代码转换工具将源代码转换为对应各页面展示渠道的展示代码，配置各页面展示渠道的路由匹配使用的基础信息；按照页面展示渠道的类型设置对应的差异化显示规则，进一步解决不同客户端之间交互差异化问题，减少了交互的复杂度，使得应用一套代码可以应用在不同客户端上，可以兼容不同客户端的登录、授权等流程，减少项目迭代的开发成本和运营成本。

示例性的，为便于更好的理解可视化页面的生成方法，本实施例作为一个优选实施例，对可视化页面的生成方法进行说明，本发明实施例给出了一种使用工具类，组件库，通信包进行可视化页面的生成详细过程的说明，其中，Web端、APP端、微信小程序插件和微信小程序端可以理解为本发明中的不同客户端。具体可以包括以下步骤：

a1、接入准备

在本实施例中，Web端、APP端、微信小程序插件和微信小程序端共同约定交互的方法名，作为交互的传输数据的唯一标识，定义标准的出入参，标准的接口，以进行不同客户端的交互。

a2、匹配规则

在本实施例中，监听活动配置的基础信息，控制路由地址。如渠道匹配当前运行时，各页面展示渠道即可合法打开活动页面，读取活动页面元数据执行入口函数时内部处理对应页面展示渠道进行授权登录，UI组件根据元数据匹配对应平台的差异化显示规则，最终显示界面。

a3、通信逻辑(宿主端：APP端或微信小程序端)

在本实施例中，宿主端启动时执行初始化通信，APP端需要额外开启监听js通信方法，web发起通知后，宿主执行回调原生逻辑，以触发相应的交互逻辑。

在本实施例中，APP端中可能也需要分享给微信用户或者其他平台的用户，在微信平台需要分享给微信的用户，在小程序需要分享给小程序的用户，这一系列的宿主端的分享，需要有相应的通信逻辑、配置参数等。

a4、UI渲染

组件代码以React JSX作为DSL标准，组件提供标准的props入参，JSX可转换输出不同端代码，配合运营在后台GUI配置标准元数据作为props渲染不同平台的原生UI及交互反馈。

a5、端对接

在本实施例中，可以做到多端交互，不需要引入外部中间层，交互更简单，对宿主端代码无侵入，无兼容性问题，开发人员不需要熟悉外部调用仅使用提供的标准API进行对接。

a6、生成多终端代码

TARO开源工具配合构建脚本及基础设施完成DSL解析AST转换终端代码(H5/微信小程序插件)。

示例性的，在为微信小程序方案时，需使用小程序插件，此时的宿主为微信小程序端，微信小程序端启动活动页面，通过提供的标准API传入login Code、encrypted Data、iv、授权地址及Web view地址完成数初始化即完成对接实施，使用原生动态路由中转插件活动页。

需要说明的是，小程序插件是打包出来提交到微信插件市场，所有的小程序均可以在小程序插件市场进行申请，管理员通过申请就可以使用，在应用小程序插件时，具有一定的标准对接方案。

示例性的，在为原生APP方案时，此时的宿主端为原生APP，原生APP根据执行标准API方法创建一个子线程用于数据通信，原生APP启动活动通过提供的标准API传入Token完成初始化，当Web端发起事件，原生APP返回值的时候可以同步返回，实时触发交互逻辑，达到快速响应，可以使用Web view打开web部署的活动页。

示例性的，在为微信APP端，此时的宿主端为微信APP，可以通过web部署打开活动页面，自动授权回调活动页面。

示例性的，在为浏览器端时，此时的宿主端为浏览器，可以通过web部署打开活动页面。

示例性的，图3为本发明实施例二提供的一种活动页面配置流程图，其中，活动页面中包含有相关业务活动的活动基本详情。属性参数可以包含相关业务活动名称、展示有效期、参与有效期、展示渠道等。

示例性的，图4为本发明实施例二提供的又一种活动页面配置流程图，其中，活动页面配置中包含：游戏详情、游戏结果、抽奖页面、中奖纪录、活动周期、登录弹窗、页面组件为占位组件以及悬浮组件，其中，占位组件中包含单列图片、双列图片、三列图片、轮番图、占位色块、按钮等等，悬浮组件可以包括悬浮按钮、悬浮文字、悬浮分享、悬浮图片以及相关背景音乐等等，在选择相应的页面组件后，将其添加到预设画布以构成各页面展示渠道的目标预览页，供客户端用户观赏。

示例性的，图5为本发明实施例二提供的一种可视化页面生成方法的架构示意图，如图5所示，可视化页面生成方法的架构示意图中包含客户端、活动渠道、基础设施、核心设施、编辑类组件的通信、数据服务以及一套代码转换单体应用等。

示例性的，图6为本发明实施例二提供的一种后台元数据产出元数据示意图，可以根据UI配置、埋点配置、路由配置、渠道差异配置进行得出。

示例性的，图7为本发明实施例二提供的一种使用统一语言：react语法转换多种渠道示意图，其中，React语法也可以称为源代码，由React语法代码生成web端Nerv代码、小程序端的小程序代码以及其它端的代码。

示例性的，图8为本发明实施例二提供的一种多端代码转换为目标代码示意图。由图8可知，多端代码转换为目标代码的过程为：首先对源代码进行词法分析，对代码字符串进行语法分析，构建语法树，并进行语义分析，然后检查程序的正确性，进行程序转换操作进行语法树转换，最终得到目标代码

示例性的，图9为本发明实施例二提供的一种实现活动页面的展示的流程示意图。由图9可知，React代码解析AST转换，得到web端的目标代码以及微信小程序端的目标代码，宿主端可以为原生APP、微信APP、浏览器以及微信小程序，需要说明的是，当宿主端为微信小程序端时，需要安装相应的微信小程序插件进行打开，根据不同的宿主端，读取活动元数据执行入口函数时内部处理对应不同宿主端的授权登录以及登录账号绑定等，UI组件根据元数据匹配对应不同宿主端的差异化显示规则，最终显示活动页面。

实施例三

在一实施例中，图10是本发明实施例三提供的一种可视化页面生成装置的结构框图，该装置适用于对可视化页面进行生成时的情况，该装置可以由硬件/软件实现。可配置于电子设备中来实现本发明实施例中的一种可视化页面生成方法。如图10所示，该装置包括：渠道配置模块1010、代码生成模块1020以及规则配置模块1030。

其中，渠道配置模块1010，配置活动页面的属性参数以及至少两个页面展示渠道，其中，各所述页面展示渠道对应的功能代码位于相同程序文件；

代码生成模块1020，根据预设页面组件生成所述活动页面的目标预览页，并基于所述目标预览页生成对应各所述页面展示渠道的展示代码；

规则配置模块1030，配置各所述页面展示渠道的路由匹配规则以使客户端根据所述路由匹配规则访问对应的所述活动页面。

本发明实施例的技术方案，通过渠道配置模块，配置活动页面的属性参数以及至少两个页面展示渠道，其中，各页面展示渠道对应的功能代码位于相同程序文件；代码生成模块，根据预设页面组件生成活动页面的目标预览页，并基于目标预览页生成对应各页面展示渠道的展示代码；规则配置模块，配置各页面展示渠道的路由匹配规则以使客户端根据路由匹配规则访问对应的活动页面。本发明实施例，根据预设页面组件生成活动页面的目标预览页，并基于目标预览页生成对应各页面展示渠道的展示代码，配置各页面展示渠道的路由匹配规则以使客户端根据路由匹配规则访问对应的所述活动页面，解决了不同客户端之间交互差异化的问题，使得应用一套代码可以应用在不同客户端上，并兼容不同客户端的登录、授权等流程，减少了项目迭代的开发成本和运营成本。

可选的，渠道配置模块1010，包括：

信息采集单元，用于通过可视化界面采集用户输入的所述页面活动的活动名称、展示有效期、参与有效期、展示渠道、活动管理员、域名以及活动备注，作为所述活动页面的属性参数信息；

渠道展示单元，用于通过可视化界面采集用户选择的所述至少两个页面展示渠道。

可选的，代码生成模块1020，包括：

预览页构成单元，用于展示预设画布，并将用户选择的页面组件添加到所述预设画布以构成所述目标预览页；

组件添加单元，用于在所述预设画布中添加至少一个页面组件到所述目标预览页中；

代码存储单元，用于将所述目标预览页存储为DSL标准格式的源代码；

代码转换单元，用于使用代码转换工具将所述源代码转换为对应各所述页面展示渠道的展示代码。

可选的，规则配置模块1030，包括：

信息配置单元，用于配置各所述页面展示渠道的路由匹配使用的基础信息；

规则设置单元，用于按照所述页面展示渠道的类型设置对应的差异化显示规则。

可选的，所述差异化显示规则包括以下至少之一：

在所述页面展示渠道为原生应用程序时，使用JS bridge交换验证信息完成登录；

在所述页面展示渠道为微信应用程序时，依次进行验签、授权以及基于账户登陆绑定关系的登录；

在所述页面展示渠道为浏览器时，使用账户登陆关系完成登录；

在所述页面展示确定为微信小程序插件时，使用Mini APP bridge向开放接口注入登陆参数以完成授权以及登陆账户。

可选的，所述程序文件中定义不同所述页面展示渠道的标准出入参数，其中，各所述标准出入参数的交互方法名相同。

可选的，所述可视化页面生成装置，还包括：

页面展示单元，用于接收客户端的页面访问请求，并根据所述页面访问请求中的所述页面展示渠道的标识信息按照对应的所述页面代码以及所述功能代码实现活动页面的展示。

本发明实施例所提供的可视化页面生成装置可执行本发明任意实施例所提供的可视化页面生成方法，具备执行方法相应的功能模块和有益效果。

实施例四

在一实施例中，图11示出了可以用来实施本发实施例四提供的一种电子设备的结构示意图。电子设备10旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备(如头盔、眼镜、手表等)和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本发明的实现。

如图11所示，电子设备10包括至少一个处理器11，以及与至少一个处理器11通信连接的存储器，如只读存储器(ROM)12、随机访问存储器(RAM)13等，其中，存储器存储有可被至少一个处理器执行的计算机程序，处理器11可以根据存储在只读存储器(ROM)12中的计算机程序或者从存储单元18加载到随机访问存储器(RAM)13中的计算机程序，来执行各种适当的动作和处理。在RAM 13中，还可存储电子设备10操作所需的各种程序和数据。处理器11、ROM 12以及RAM 13通过总线14彼此相连。输入/输出(I/O)接口15也连接至总线14。

电子设备10中的多个部件连接至I/O接口15，包括：输入单元16，例如键盘、鼠标等；输出单元17，例如各种类型的显示器、扬声器等；存储单元18，例如磁盘、光盘等；以及通信单元19，例如网卡、调制解调器、无线通信收发机等。通信单元19允许电子设备10通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

处理器11可以是各种具有处理和计算能力的通用和/或专用处理组件。处理器11的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的处理器、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。处理器11执行上文所描述的各个方法和处理，例如可视化页面生成方法。

在一些实施例中，可视化页面生成方法可被实现为计算机程序，其被有形地包含于计算机可读存储介质，例如存储单元18。在一些实施例中，计算机程序的部分或者全部可以经由ROM 12和/或通信单元19而被载入和/或安装到电子设备10上。当计算机程序加载到RAM 13并由处理器11执行时，可以执行上文描述的可视化页面生成方法的一个或多个步骤。备选地，在其他实施例中，处理器11可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行可视化页面生成方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本发明的方法的计算机程序可以采用一个或多个编程语言的任何组合来编写。这些计算机程序可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，使得计算机程序当由处理器执行时使流程图和/或框图中所规定的功能/操作被实施。计算机程序可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本发明的上下文中，计算机可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的计算机程序。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。备选地，计算机可读存储介质可以是机器可读信号介质。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在电子设备上实施此处描述的系统和技术，该电子设备具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给电子设备。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、区块链网络和互联网。

计算系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务中，存在的管理难度大，业务扩展性弱的缺陷。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发明中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本发明的技术方案所期望的结果，本文在此不进行限制。

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

Claims (10)

1.一种可视化页面生成方法，其特征在于，所述方法包括：

配置活动页面的属性参数以及至少两个页面展示渠道，其中，各所述页面展示渠道对应的功能代码位于相同程序文件；

根据预设页面组件生成所述活动页面的目标预览页，并基于所述目标预览页生成对应各所述页面展示渠道的展示代码；

配置各所述页面展示渠道的路由匹配规则以使客户端根据所述路由匹配规则访问对应的所述活动页面。

2.根据权利要求1所述的方法，其特征在于，所述配置活动页面的属性参数以及至少两个页面展示渠道，包括：

通过可视化界面采集用户输入的所述页面活动的活动名称、展示有效期、参与有效期、展示渠道、活动管理员、域名以及活动备注，作为所述活动页面的属性参数信息；

通过可视化界面采集用户选择的所述至少两个页面展示渠道。

3.根据权利要求1所述的方法，其特征在于，所述根据页面组件生成所述活动页面的目标预览页，并基于所述目标预览页生成对应各所述页面展示渠道的展示代码，包括：

展示预设画布，并将用户选择的页面组件添加到所述预设画布以构成所述目标预览页；

在所述预设画布中添加至少一个页面组件到所述目标预览页中；

将所述目标预览页存储为DSL标准格式的源代码；

使用代码转换工具将所述源代码转换为对应各所述页面展示渠道的展示代码。

4.根据权利要求1所述的方法，其特征在于，所述配置各所述页面展示渠道的路由匹配规则以使客户端根据所述路由匹配规则访问对应的所述活动页面，包括：

配置各所述页面展示渠道的路由匹配使用的基础信息；

按照所述页面展示渠道的类型设置对应的差异化显示规则。

5.根据权利要求4所述的方法，其特征在于，所述差异化显示规则包括以下至少之一：

在所述页面展示渠道为原生应用程序时，使用JS bridge交换验证信息完成登录；

在所述页面展示渠道为微信应用程序时，依次进行验签、授权以及基于账户登陆绑定关系的登录；

在所述页面展示渠道为浏览器时，使用账户登陆关系完成登录；

在所述页面展示确定为微信小程序插件时，使用Mini APP bridge向开放接口注入登陆参数以完成授权以及登陆账户。

6.根据权利要求1所述的方法，其特征在于，所述程序文件中定义不同所述页面展示渠道的标准出入参数，其中，各所述标准出入参数的交互方法名相同。

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

接收客户端的页面访问请求，并根据所述页面访问请求中的所述页面展示渠道的标识信息按照对应的所述展示代码以及所述功能代码实现活动页面的展示。

8.一种可视化页面生成装置，其特征在于，所述装置包括：

渠道配置模块，配置活动页面的属性参数以及至少两个页面展示渠道，其中，各所述页面展示渠道对应的功能代码位于相同程序文件；

代码生成模块，根据预设页面组件生成所述活动页面的目标预览页，并基于所述目标预览页生成对应各所述页面展示渠道的展示代码；

规则配置模块，配置各所述页面展示渠道的路由匹配规则以使客户端根据所述路由匹配规则访问对应的所述活动页面。

9.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的可视化页面生成方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现权利要求1-7中任一项所述的可视化页面生成方法。

Images