App设计方法、App的页面渲染方法以及装置与流程

本公开涉及计算机技术领域，尤其涉及应用程序(application，简称app)开发、用户界面(userinterface，简称ui)设计和页面渲染等技术领域。具体涉及一种app设计方法、一种app的页面渲染方法、一种app设计装置、一种app的页面渲染装置、一种电子设备、一种存储有计算机指令的非瞬时计算机可读存储介质和一种计算机程序产品。

背景技术：

随着项目的壮大，一个app内往往包含多个模块，每个模块可能由不同的ui设计师负责。由于没有一套完整的设计规范，每个ui设计师的理念不同，对细节的偏好也不同，因而对于同一个颜色，不同ui设计师给出的具体颜色可能会存在细微差别。比如对于红色，不同ui设计师可能会给出大红、朱红、嫣红等多种颜色。

技术实现要素：

本公开提供了一种app设计方法、app的页面渲染方法、装置、设备、存储介质以及计算机程序产品。

根据本公开的一方面，提供了一种app设计方法，包括：获取配置文件，其中，所述配置文件中包含以下信息：多个共生编码，以及与所述多个共生编码中的每个共生编码一一关联的设计参数；以及将所述配置文件上传至中台，以便app开发端和ui设计端基于所述配置文件对app进行统一风格设计。

根据本公开的另一方面，提供了一种app的页面渲染方法，包括：确定编辑app页面时使用的至少一个共生编码；确定与所述至少一个共生编码中的每个共生编码一一关联的设计参数；以及基于所述设计参数，对所述app页面进行渲染。

根据本公开的另一方面，提供了一种app设计装置，包括：获取模块，用于获取配置文件，其中，所述配置文件中包含以下信息：多个共生编码，以及与所述多个共生编码中的每个共生编码一一关联的设计参数；以及第一上传模块，用于将所述配置文件上传至中台，以便app开发端和ui设计端基于所述配置文件对app进行统一风格设计。

根据本公开的另一方面，提供了一种app的页面渲染装置，包括：第一确定模块，用于确定编辑app页面时使用的至少一个共生编码；第二确定模块，用于确定与所述至少一个共生编码中的每个共生编码一一关联的设计参数；以及渲染模块，用于基于所述设计参数，对所述app页面进行渲染。

根据本公开的另一方面，提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本公开实施例所述的方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据本公开实施例所述的方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据本公开实施例所述的方法。

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

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1a示例性示出了适于本公开实施例的系统架构；

图1b～图1c示例性示出了可以实现本公开实施例的场景图；

图2示例性示出了根据本公开实施例的app设计方法的流程图；

图3a～3d示例性示出了根据本公开实施例的app设计风格动态调整前后的效果图；

图4示例性示出了根据本公开实施例的app的页面渲染方法的流程图；

图5示例性示出了根据本公开实施例的app设计装置的框图；

图6示例性示出了根据本公开实施例的app的页面渲染装置的框图；以及

图7示例性示出了用来实现本公开实施例的电子设备的框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

应该理解，在app设计中，如果没有一套完整的设计规范，整个app设计就无法做到风格(包括颜色、字体、字号、行间距、段间距等风格)统一，由此可能给用户带来不良体验。

并且，随着项目越来越庞大，越来越复杂，如果想对项目的颜色风格做一次整体微调，则不仅需要耗费大量的精力和时间去逐一修改，而且还需要对每一处修改都进行测试才能确保所有修改都与预期一致。

对此，本公开实施例提出了一种app设计方案，例如采用对颜色值进行编码，并将颜色值、颜色编码、以及颜色值与颜色编码之间的映射关系上传至中台(远程服务器)的方式，使得app开发端和ui设计端可以基于上传给中台的颜色信息，对app进行统一颜色风格设计。

以下将结合具体实施例详细阐述本公开。

适于本公开实施例的app设计方法、app的页面渲染方法和装置的系统架构介绍如下。

图1a示例性示出了适于本公开实施例的app设计方法、app的页面渲染方法和装置的系统架构。需要注意的是，图1a所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他环境或场景。

如图1a所示，系统架构100可以包括：ui设计端101、开发端102、中台103、客户端104和105、......。

以app颜色风格设计为例，在本公开实施例中，可以针对每个颜色值定义一个颜色编码，并在配置文件中记录各颜色值、各颜色编码及其映射关系，然后将配置文件上传至中台103。

ui设计师可以通过ui设计端101从中台103下载配置文件并存储在本地。在app开发过程中，ui设计师可以使用配置文件中定义的颜色编码代替具体的颜色值进行ui设计。即，ui设计师设计出的ui设计图中，不再标注任何具体的颜色值，而是可以统一标注与想使用的颜色对应的颜色编码即可。

同样地，app开发工程师则可以通过开发端102从中台103下载配置文件并存储在本地。在app开发过程中，app开发工程师无需关心具体的颜色值，可以直接使用ui设计图中标注的颜色编码进行编程。对于产出的app软件，运行时可以通过存储在本地的配置文件解析其中涉及的颜色编码，从而获取真正的颜色值进行app页面的填充与渲染。

用户在使用基于上述的颜色编码开发的app时，可以通过客户端104、105......等等，预先从中台103下载对应的配置文件并存储在本地。当运行app时，可以通过存储在本地的配置文件解析其中涉及的颜色编码，从而获取真正的颜色值进行app页面的填充与渲染。

通过本公开实施例，由于ui设计师和app开发工程师使用了统一的颜色规范，因而双方在对同一app进行颜色设计时，可以保持一致的颜色风格。

类似地，app字体、字号、段间距、行间距等样式风格设计，也可以采用本公开实施例提供的app设计方法，在此不再赘述。

应该理解，图1a中的ui设计端、开发端、中台、客户端的数目仅仅是示意性的。根据实现需要可以具有任意数目的ui设计端、开发端、中台、客户端。

适于本公开实施例的app设计方法和装置的应用场景介绍如下。

应该理解，本公开实施例提供的app设计方案，可以用于任何app的统一风格设计。比如，可以包括但不限于对app进行颜色、字体、字号、段间距、行间距等样式进行统一风格设计。

如图1b所示，对于app页面11、12和13中涉及的多个业务场景模块(如落地页标题01、落地页正文02、模板标题03等)，可以通过本公开实施例提供的技术方案进行字色统一设计和动态调整。

如图1c所示，对于app页面11、12和13中涉及的某个特定业务场景模块(如落地页标题01)，也可以通过本公开实施例提供的技术方案进行字色统一设计和动态调整。

根据本公开的实施例，本公开提供了一种app设计方法。

图2示例性示出了根据本公开实施例的app设计方法的流程图。

如图2所示，app设计方法200包括：操作s210和s220。

在操作s210，获取配置文件。其中，配置文件中包含以下信息：多个共生编码，以及与多个共生编码中的每个共生编码一一关联的设计参数。

在操作s220，将配置文件上传至中台，以便app开发端和ui设计端基于配置文件对app进行统一风格设计。

需要说明的是，在本公开实施例中，设计参数可以包括但不限于颜色值、字体信息、字号磅值、行间距值、段间距值等。

在本公开的一些实施例中，可以针对每类设计参数各自定义一套编码，如针对颜色值定义一套颜色编码。或者，在本公开的其他实施例中，可以针对所有类别的设计参数统一定义一套编码。

示例性的，以app颜色设计为例，可以统计app中想要使用的颜色，并收敛对应的颜色值，然后针对每个颜色值定义一个唯一的颜色编码(如共生编码)，并上传至中台。比如，可以由ui设计端定义颜色编码并上传至中台。

通过本公开实施例，ui设计端即ui设计师可以从中台获取配置文件，并在app开发过程中，使用配置文件中定义的颜色编码代替具体的颜色值进行ui设计。即，ui设计师设计ui设计图时，可以不再标注任何具体的颜色值，而是统一标注与想使用的颜色对应的颜色编码(如共生编码)即可。同样地，app开发端即开发工程师可以从中台下载配置文件并存储在本地。然后在app开发过程中，开发工程师无需关心具体的颜色值，可以直接使用ui设计图中标注的颜色编码进行编程。由此产出的app软件，运行时可以通过存储在本地的配置文件解析其中涉及的颜色编码，从而获取真正的颜色值进行app页面的填充与渲染。

因此，通过本公开实施例，ui设计端和app开发端可以遵循统一的设计规范(如颜色规范)，以便两端可以统一app设计风格。并且，app开发端无需关注具体的设计参数(如颜色值)，只需要关注ui设计图中标注的编码(如颜色编码)即可。因而ui设计端和app开发端在app设计中不会出现差异，进而两端不需要来回沟通和调整，因而更省时省力。

应该理解，仅仅在ui设计端或者仅仅在app开发端对设计参数进行编码来规范app设计风格，依然无法使ui设计端和app开发端遵循统一的设计规范(如颜色规范)，因而这种情况下两端很难统一app设计风格。因而，本公开实施例采用将app设计规范(如上述配置文件)上传至中台，以便使两端能够遵循统一的设计规范，进而实现使两端统一app设计风格。

作为一种可选的实施例，上述的多个共生编码可以包括：多个第一共生编码。并且，上述的配置文件中还可以包含以下信息：与该多个第一共生编码中的每个第一共生编码关联的至少一个业务编码。其中，该至少一个业务编码中的每个业务编码对应于一个业务场景模块。

应该理解，在本公开实施例中，如果仅仅针对每个设计参数，如针对每个颜色值定义一个唯一的颜色编码，则如果想对app的颜色风格做一次整体微调，则还是需要对每个颜色逐一进行调整，因而依然需要耗费大量的精力和时间去逐一修改。

因此，在本公开实施例中，除了针对每个设计参数，如针对每个颜色值，定义一个唯一的颜色编码(该颜色编码可以称为共生编码)之外，还可以针对每个业务场景模块定义一个唯一的颜色编码(该颜色编码可以称为业务编码)。并且，多个业务编码可以同时关联至同一个共生编码。由于每个共生编码对应于一个特定的颜色值，因而同时关联至同一个共生编码的所有业务编码对应的所有业务场景模块在app页面中显示为相同的颜色。

此外，在本公开实施例中，共生编码可以不带有语义信息，业务编码可以带有语义信息。

示例性的，如app页面中，落地页标题的业务编码可以定义f1、落地页正文的业务编码可以定义f2、模板标题的业务编码可以定义f3。并且，业务编码f1～f3可以同时关联至共生编码cam_x350。这种情况下，由于cam_x350与某个颜色值一一对应，因而app页面中，落地页标题、落地页正文和模板标题显示为相同的颜色。

此外，应该理解，在本公开实施例中，共生编码与颜色值一一对应既可以表示一个共生编码对应于一个唯一的颜色值，又可以表示一个共生编码对应于一个唯一的颜色值组合。

示例性的，cam_x350对应的颜色值组合可以是(#000000，100；#ffffff，100；#666666，100)。“#000000，100”表示某颜色在日间模式下的显示效果；“#ffffff，100”表示某颜色在黑暗模式下的显示效果；“#666666，100”表示某颜色在夜间模式下的显示效果。

通过本公开实施例，由于同时定义了共生编码和业务编码，并且共生编码与设计参数(如颜色值)一一关联，多个业务编码可以同时关联同一个共生编码。因而可以对多个业务场景模块进行统一风格设计。并且，在本公开实施例中，修改任一共生编码与颜色值之间的映射关系，或者，修改业务编码与共生编码之间的映射关系，都可以同时修改多个业务场景模块的颜色。因而，通过本公开实施例，可以同时调整多个业务场景模块的颜色。因而，本方案相对于逐一调整每个模块的颜色而言，不需要耗费很大的工作量。

应该理解，在本公开实施例中，通过定义共生编码和业务编码两种编码，并且由于共生编码可以覆盖所有想要使用的颜色值，因而可以确保ui设计全部按照已规范的设计颜色进行设计。此外，业务编码可以适于针对不同的业务场景做定制化实验使用。

还应用理解，在本公开实施例中，上述的多个共生编码除了可以包括多个第一共生编码之外，还可以包括至少一个第二共生编码。第二共生编码可以仅与设计参数一一对应，不与任何业务编码建立关联关系。如app页面中使用的“按钮控件”不需要与任何业务场景关联。但是，app页面中所有的“按钮控件”可以关联至同一第二共生编码，以便将同一app中出现的所有“按钮控件”可以设置为同一颜色风格，并且可以统一进行风格调整。

作为一种可选的实施例，上述的设计参数可以包括以下至少之一：颜色值、字体信息、字号磅值、行间距值、段间距值。因而，本公开实施例中，可以对app的多种样式风格进行统一规范设计。各样式风格统一规范设计的具体方法与app颜色风格统一规范设计的方法类似，本公开在此不再赘述。

进一步，作为一种可选的实施例，该方法还包括如下操作。

针对配置文件，对于关联于同一个第一共生模块的所有业务编码，将与该所有业务编码关联的第一共生编码修改为另一个第一共生编码，得到更新后的配置文件。

将更新后的配置文件上传至中台。

在本公开实施例中，可以通过更新app的配置文件来修改app页面中各应用场景模块的颜色。

在本公开的一些实施例中，可以将与某个共生编码关联的所有业务编码统一修改为与另一共生编码同时关联。

示例性的，如app页面中，落地页标题的业务编码可以定义f1、落地页正文的业务编码可以定义f2、模板标题的业务编码可以定义f3。初始定义时，假设业务编码f1～f3同时关联至共生编码cam_x350。在本公开实施例中，可以将业务编码f1～f3同时关联的共生编码统一修改另一共生编码如cam_x626，并将更新后的配置文件重新上传至中台，以便用户下载至客户端使用。应该理解，映射关系修改之后，app重启时，可以基于更新后的配置文件渲染app页面，从而实现对落地页标题、落地页正文和模板标题颜色的动态统一调整。其中，修改前的显示效果如图3a所示，修改后的显示效果如图3b所示。

在本公开的其他实施例中，还可以将与某个共生编码关联的所有业务编码中的一个或者多个统一修改为与另一共生编码同时关联。

继续参考上述示例，还可以仅为业务编码f1～f3中的业务编码f1修改共生编码，如，将与业务编码f1关联的共生编码由cam_x350修改为cam_x626。由此，可以仅对特定的一个或者多个应用场景模块进行动态颜色调整。

通过本公开实施例，通过修改任意一个或者多个业务编码与共生编码之间的关联关系，可以同时对某个或者某几个业务场景模块进行风格调整(如颜色调整)，也不需要耗费很大的工作量。进一步，本公开实施例中，这种app风格调整方式，不需要重新编程，也不需要重新进行程序调试，即不需要再次发版，可以通过修改并更新app的配置文件，实现app风格的动态调整，因而可以进一步减少工作量的消耗。

作为一种可选的实施例，该方法还可以包括如下操作。

针对配置文件中的任意一个或多个业务编码，修改与该任意一个或多个业务编码关联的第一共生编码，得到更新后的配置文件。

将更新后的配置文件上传至中台。

继续参考上述示例，落地页标题的业务编码可以定义f1、落地页正文的业务编码可以定义f2、模板标题的业务编码可以定义f3。初始定义时，假设业务编码f1～f3同时关联至共生编码cam_x350。此种情况下，可以仅将业务编码f1关联的共生编码由cam_x350修改为另一共生编码cam_x626，并将更新后的配置文件重新上传至中台，以便用户下载至客户端使用。应该理解，此示例中，映射关系修改后，app重启时，可以基于更新后的配置文件渲染app页面，从而实现对落地页标题动态调整。其中，修改前的显示效果如图3c所示，修改后的显示效果如图3d所示。

通过本公开实施例，可以仅对一个或多个业务场景模块(不一定关联于同一共生编码)的设计风格灵活进行动态调整。此方案也不需要耗费很大的工作量。

作为一种可选的实施例，该方法还包括如下操作。

针对配置文件中的任意一个或多个第一共生编码，修改与该任意一个或多个第一共生编码关联的设计参数，得到更新后的配置文件。

将更新后的配置文件上传至中台。

继续参考上述示例，落地页标题的业务编码可以定义f1、落地页正文的业务编码可以定义f2、模板标题的业务编码可以定义f3。初始定义时，假设业务编码f1～f3同时关联至共生编码cam_x350。此种情况下，还可以通过修改共生编码cam_x350关联的颜色值，来统一对落地页标题、落地页正文和模板标题进行颜色动态调整。比如可以将共生编码cam_x350初始关联的颜色值x修改为颜色值y。此方案尤其适应于在app中引入新颜色的应用场景。

通过本公开实施例，可以通过修改与共生编码关联的设计参数(如颜色值)来对一个或者多个业务场景模块(不一定关联于同一共生编码)的设计风格统一进行动态调整。此方案也不需要耗费很大的工作量。

根据本公开的实施例，本公开提供了一种app的页面渲染方法。

图4示例性示出了根据本公开实施例的app的页面渲染方法的流程图。

如图4所示，app的页面渲染方法400包括：操作s410和s430。

在操作s410，确定编辑app页面时使用的至少一个共生编码。

在操作s420，确定与至少一个共生编码中的每个共生编码一一关联的设计参数。

在操作s430，基于设计参数，对app页面进行渲染。

应该理解，在本公开实施例中，app页面可以是基于上述实施例中提供的app设计方案设计的，具体设计方法本公开实施例在此不再赘述。

因而，在本公开实施例中，用户在使用这种app时，可以从中台下载对应的配置文件，以便在运行app时，对编辑app所使用的共生编码进行解析，从而获取对应的设计参数来填充和渲染app页面。

应该理解，本公开实施例中，从中台下载对应的配置文件与上述实施例中上传至中台的配置文件相同，本公开在此不再赘述。

通过本公开实施例，ui设计端和app开发端可以遵循统一的设计规范(如颜色规范)，以便两端可以统一app设计风格。并且，app开发端无需关注具体的设计参数(如颜色值)，只需要关注并直接使用ui设计图中标注的颜色编码进行编码即可。因而ui设计端和app开发端在app设计中不会出现差异，进而两端不需要来回沟通和调整，因而更省时省力。而在运行app时，可以通过解析app页面中使用的共生编码，来获取对应的设计参数，并利用获取的设计对页面进行填充和渲染。

作为一种可选的实施例，该方法还包括如下操作。

针对app，预下载对应的配置文件。

其中，配置文件用于辅助app开发端和ui设计端对app进行统一风格设计，配置文件中包含以下信息：多个共生编码，以及与多个共生编码中的每个共生编码一一关联的设计参数。

其中，确定与至少一个共生编码中的每个共生编码一一关联的设计参数，包括：基于配置文件，确定与至少一个共生编码中的每个共生编码一一关联的设计参数。

应该理解，本公开实施例中，配置文件可以预先从中台下载，并且该配置文件与上述实施例中上传至中台的配置文件相同，本公开在此不再赘述。

在本公开实施例中，可以基于配置文件对app页面中包含的共生编码进行解析，以确定与各共生编码一一关联的设计参数(如颜色值)，并利用解析结果对页面中各模块进行填充和渲染。

作为一种可选的实施例，该方法还包括如下操作。

确定至少一个共生编码中包含的至少一个第一共生编码。

确定与至少一个第一共生编码中的每个第一共生编码关联的至少一个业务编码，其中，至少一个业务编码中的每个业务编码对应于一个业务场景模块。

其中，基于设计参数，对app页面进行渲染，包括：基于设计参数，对app页面中与至少一个业务编码对应的业务场景模块进行渲染。

在本公开实施例中，可以先基于配置文件对app页面中包含的各业务编码进行解析，以确定各业务编码关联的共生编码，再基于配置文件对对确定出的各共生编码进行解析，以确定与各共生编码一一关联的设计参数(如颜色值)，并利用解析结果对页面中各模块进行填充和渲染。

作为一种可选的实施例，该方法还包括：针对app，下载对应的更新后的配置文件，以便重启app后，基于更新后的配置文件，对编辑app页面时使用的共生编码进行解析。

通过本公开实施例，在app的配置文件发生更新后，还可以下载更新后的配置文件，以便在重启app后基于更新后的配置文件，对编辑app页面时使用的共生编码进行解析。通过本公开实施例，可以通过更新配置文件，对app中的某个或者某几个模块进行动态调整，因而无需发版，可以提高用户的体验度。

根据本公开的实施例，本公开还提供了一种app设计装置。

图5示例性示出了根据本公开实施例的app设计装置的框图。

如图5所示，app设计装置500包括：获取模块510和第一上传模块520。

具体地，获取模块510，用于获取配置文件，其中，该配置文件中包含以下信息：多个共生编码，以及与该多个共生编码中的每个共生编码一一关联的设计参数。

第一上传模块520，用于将该配置文件上传至中台，以便app开发端和ui设计端基于该配置文件对app进行统一风格设计。

作为一种可选的实施例，该多个共生编码包括：多个第一共生编码；

该配置文件中还包含以下信息：与该多个第一共生编码中的每个第一共生编码关联的至少一个业务编码；其中，该至少一个业务编码中的每个业务编码对应于一个业务场景模块。

作为一种可选的实施例，该设计参数包括以下至少之一：颜色值、字体信息、字号磅值、行间距值、段间距值。

作为一种可选的实施例，该装置还包括：第一更新模块，用于针对该配置文件，对于关联于同一个第一共生模块的所有业务编码，将与该所有业务编码关联的第一共生编码修改为另一个第一共生编码，得到更新后的配置文件；以及第二上传模块，用于将该更新后的配置文件上传至该中台。

作为一种可选的实施例，该装置还包括：第二更新模块，用于针对该配置文件中的任意一个或多个业务编码，修改与该任意一个或多个业务编码关联的第一共生编码，得到更新后的配置文件；以及第三上传模块，用于将该更新后的配置文件上传至该中台。

作为一种可选的实施例，该装置还包括：第三更新模块，用于针对该配置文件中的任意一个或多个第一共生编码，修改与该任意一个或多个第一共生编码关联的设计参数，得到更新后的配置文件；以及第四上传模块，用于将该更新后的配置文件上传至该中台。

应该理解，本公开装置部分的实施例与本公开方法部分的实施例对应相同或类似，解决的技术问题和所达到的技术效果也对应相同或类似，本公开在此不再赘述。

根据本公开的实施例，本公开还提供了一种app的页面渲染装置。

图6示例性示出了根据本公开实施例的app的页面渲染装置的框图。

如图6所示，app的页面渲染装置600包括：第一确定模块610、第二确定模块620和渲染模块630。

具体地，第一确定模块610，用于确定编辑app页面时使用的至少一个共生编码。

第二确定模块620，用于确定与该至少一个共生编码中的每个共生编码一一关联的设计参数。

渲染模块630，用于基于该设计参数，对该app页面进行渲染。

作为一种可选的实施例，该装置还包括：预下载模块，用于针对该app，预下载对应的配置文件，其中，该配置文件用于辅助app开发端和ui设计端对该app进行统一风格设计，该配置文件中包含以下信息：多个共生编码，以及与该多个共生编码中的每个共生编码一一关联的设计参数；其中，该第二确定模块还用于：基于该配置文件，确定与该至少一个共生编码中的每个共生编码一一关联的设计参数。

作为一种可选的实施例，该装置还包括：第三确定模块，用于确定该至少一个共生编码中包含的至少一个第一共生编码；第四确定模块，用于确定与该至少一个第一共生编码中的每个第一共生编码关联的至少一个业务编码，其中，该至少一个业务编码中的每个业务编码对应于一个业务场景模块；其中，该渲染模块还用于：基于该设计参数，对该app页面中与该至少一个业务编码对应的业务场景模块进行渲染。

作为一种可选的实施例，该装置还包括：下载模块，用于针对该app，下载对应的更新后的配置文件，以便重启该app后，基于该更新后的配置文件，对编辑该app页面时使用的共生编码进行解析。

应该理解，本公开装置部分的实施例与本公开方法部分的实施例对应相同或类似，解决的技术问题和所达到的技术效果也对应相同或类似，本公开在此不再赘述。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

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

如图7所示，电子设备700包括计算单元701，其可以根据存储在只读存储器(rom)702中的计算机程序或者从存储单元708加载到随机访问存储器(ram)703中的计算机程序，来执行各种适当的动作和处理。在ram703中，还可存储电子设备700操作所需的各种程序和数据。计算单元701、rom702以及ram703通过总线704彼此相连。输入/输出(i/o)接口705也连接至总线704。

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

计算单元701可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元701的一些示例包括但不限于中央处理单元(cpu)、图形处理单元(gpu)、各种专用的人工智能(ai)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(dsp)、以及任何适当的处理器、控制器、微控制器等。计算单元701执行上文所描述的各个方法和处理，例如app设计方法(或者，app的页面渲染方法)。例如，在一些实施例中，app设计方法(或者，app的页面渲染方法)可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元708。在一些实施例中，计算机程序的部分或者全部可以经由rom702和/或通信单元709而被载入和/或安装到设备700上。当计算机程序加载到ram703并由计算单元701执行时，可以执行上文描述的app设计方法(或者，app的页面渲染方法)的一个或多个步骤。备选地，在其他实施例中，计算单元701可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行app设计方法(或者，app的页面渲染方法)。

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

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

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

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

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

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

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

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