CN115113874A - 基于小程序的配置开发方法、系统、设备及存储介质 - Google Patents

Abstract

本申请公开了一种基于小程序的配置开发方法、系统、设备及存储介质，该方法包括：在小程序端定义全局引擎组件，并设计小程序UI协议；基于全局引擎组件，请求小程序UI协议并进行解析，渲染解析后的协议生成小程序UI页面；所述小程序UI协议在配置端界面生成。本申请通过一套完善的可扩展的小程序UI协议以及配套的全局引擎解析组件，只要开发人员了解掌握该UI协议的规范，并通过配置式界面进行协议的新增和更新操作，就能实时渲染和更新小程序页面，从而简单便捷的进行小程序开发工作，不仅开发效率高，且大大降低了开发成本。

Description

基于小程序的配置开发方法、系统、设备及存储介质

技术领域

本申请涉及小程序开发技术领域，尤其涉及一种基于小程序的配置开发方法、系统、设备及存储介质。

背景技术

随着移动互联网的发展，小程序日益普及，越来越多的企业都有开发和运营小程序的需求。其中，小程序是一种无需下载安装即可使用的手机应用。一般情况下，程序员会基于产品经理的需求原型、设计师的UI设计稿以及小程序官方文档API来开发小程序。

目前，开发小程序时最常用的方法是先引入一个小程序UI组件库，利用这个组件库提供的各种组件和公共方法来开发小程序页面，这种方式虽说可以节省一部分组件的开发时间，但其本质还是在小程序的框架和流程上进行开发，属于业界通用常规开发方式，这种开发方式需要开发人员详细阅读小程序的开发文档和组件库的API文档，必须在学会上述两者的开发模式的基础上，才有可能根据需求进行开发，不仅开发成本高，后期维护成本大，且开发周期较长。此外，按照这种常规开发方式，每次更改小程序时都需要把新代码发布到官网进行审核，审核通过后才可以重新发布小程序，因此也无法满足产品快速迭代的需求。

发明内容

本申请的目的在于提供一种基于小程序的配置开发方法、系统、设备及存储介质，以解决现有的小程序开发方法中存在的开发成本高和开发周期长的问题。

为实现上述目的，本申请提供一种基于小程序的配置开发方法，包括：

在小程序端定义全局引擎组件，并设计小程序UI协议，包括：

采用info节点描述页面信息、view节点描述页面UI结构、presenter节点存放页面事件逻辑以及model节点存储页面数据接口；

确定控件类型及控件的通用属性和私有属性，所述控件类型包括view容器控件、input文本框控件以及button按钮控件；其中，每个控件都有对应的事件触发点trigger；

基于全局引擎组件，请求小程序UI协议并进行解析，渲染解析后的协议生成小程序UI页面；所述小程序UI协议在配置端界面生成。

进一步地，所述通用属性包括：type表示控件类型，id表示该控件在页面的唯一值，title表示控件标题，name表示控件名称，hidden表示控件是否隐藏，style节点赋予用户自定义该控件样式的能力，eventlist节点与presenter事件关联；

所述私有属性包括：view控件有content属性，用于表示可以包含其他控件，input控件有required属性，用于决定控件是否必填。

进一步地，所述页面信息包括页面id，页面标题及页面生命周期。

进一步地，所述基于全局引擎组件，请求小程序UI协议并进行解析，包括：

获取页面id并请求所述页面id的协议，将协议缓存在pact对象中；

解析pact对象，创建页面实例。

进一步地，所述渲染解析后的协议生成小程序UI页面，包括：

基于预设的控件模板清单和控件渲染模块，通过递归调用控件渲染模块初步生成页面UI视图；

基于页面UI视图，把每个控件id与生成的控件实例作为键值对，储存在controlMap对象中；

创建事件执行器和所有事件实例，为控件设置对应的事件钩子；

执行页面初始化的生命周期函数和时间，更新控件属性和控件值，生成最新的小程序UI页面。

进一步地，所述的基于小程序的配置开发方法，还包括：

设计配置端界面，包括设计界面的控件列表区、UI实时预览区以及控件属性编辑区。

本申请还提供了一种基于小程序的配置开发系统，包括：

定义单元，用于在小程序端定义全局引擎组件，并设计小程序UI协议，包括：采用info节点描述页面信息、view节点描述页面UI结构、presenter节点存放页面事件逻辑以及model节点存储页面数据接口；确定控件类型及控件的通用属性和私有属性，所述控件类型包括view容器控件、input文本框控件以及button按钮控件；其中，每个控件都有对应的事件触发点trigger；

页面生成单元，用于基于全局引擎组件，请求小程序UI协议并进行解析，渲染解析后的协议生成小程序UI页面；所述小程序UI协议在配置端界面生成。

本申请还提供一种终端设备，包括：

一个或多个处理器；

存储器，与所述处理器耦接，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上任一项所述的基于小程序的配置开发方法。

本申请还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上任一项所述的基于小程序的配置开发方法。

相对于现有技术，本申请的有益效果在于：

1）采用预设UI协议的方式去配置开发小程序界面，做到了低代码甚至零代码的配置，开发人员不用掌握小程序开发能力亦可进行小程序的开发，降低小程序开发成本。

2）配置式开发方便实现小程序的实时预览和更新。

附图说明

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

图1是本申请某一实施例提供的基于小程序的配置开发方法的流程示意图；

图2是本申请某一实施例提供的全局引擎组件的工作流程图；

图3是本申请某一实施例提供的用户访问小程序的时序图；

图4是本申请某一实施例提供的基于小程序的配置开发系统的结构示意图；

图5是本申请某一实施例提供的终端设备的结构示意图。

具体实施方式

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

应当理解，文中所使用的步骤编号仅是为了方便描述，不对作为对步骤执行先后顺序的限定。

应当理解，在本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本申请。如在本申请说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

请参阅图1，本申请某一实施例提供一种基于小程序的配置开发方法。如图1所示，该基于小程序的配置开发方法包括步骤S10至步骤S20。各步骤具体如下：

S10、在小程序端定义全局引擎组件，设计小程序UI协议，包括：

S101、采用info节点描述页面信息、view节点描述页面UI结构、presenter节点存放页面事件逻辑以及model节点存储页面数据接口；

S102、确定控件类型及控件的通用属性和私有属性，所述控件类型包括view容器控件、input文本框控件以及button按钮控件；其中，每个控件都有对应的事件触发点trigger；

S20、基于全局引擎组件，请求小程序UI协议并进行解析，渲染解析后的协议生成小程序UI页面；所述小程序UI协议在配置端界面生成。

本实施例中，主要基于小程序页面UI协议，在配置端进行组合搭建生成UI协议，在全局引擎组件端解析并渲染，最终生成小程序页面。

首先执行步骤S10，即在小程序端定义全局引擎组件，然后进一步设计小程序UI协议。具体地，设计小程序UI协议又包括步骤S101和步骤S102。

在设计小程序UI协议时，采用mvp模式，mvp全称为model-view-presenter，model提供数据，view负责UI显示，presenter负责事件逻辑的处理，另外协议还附加了页面信息节点info。具体地，该协议的内容如下：

（1.1）info节点描述页面信息，比如页面唯一id，页面标题，页面生命周期等等。

（1.2）view节点描述页面UI结构，由控件协议ctrlRule组合而成，控件分为两大类：容器控件和普通控件，容器控件的content属性节点可以包含普通控件。

（1.3）以下页面协议以3种控件类型来进行说明，分别是：view容器控件，input文本框控件，button按钮控件。需要说明的是，实际情况并不仅限于3种，可以基于业务需求定义多种不同类型的控件，此处不作任何限定。

（1.4）所有控件都有一些通用属性，比如：type表示控件类型，id表示该控件在页面的唯一值，title表示控件标题，name表示控件名称（用来与控件逻辑做关联），hidden表示控件是否隐藏，style节点赋予用户自定义该控件样式的能力，eventlist节点与presenter事件关联。

（1.5）不同的控件分别有自己的私有属性，比如：view控件拥有content属性表示可以包含其他控件，input控件有required属性决定该控件是否必填，等等。

（1.6）presenter节点是一个数组对象，存放整个页面所有的事件逻辑。在每个事件协议的eventflows节点，则存放相对应的事件流逻辑脚本。

（1.7）每个控件都有自己的事件触发点trigger，如果有绑定对应的事件id，则在触发时执行对应事件。比如button保存按钮控件，它拥有点击事件且绑定了事件id，则在该按钮被点击时执行保存事件。

（1.8）model节点则存储了页面所有用到的数据接口，发起请求时使用接口名称，接口名称与url相对应，从而访问正确的接口信息。

在一个具体地实施例中，所述的基于小程序的配置开发方法，还包括设计配置端界面，包括设计界面的控件列表区、UI实时预览区以及控件属性编辑区。

本实施例中，通过设计一个配置端界面，可以让开发人员以人机交互的方式生成上述实施例格式的页面协议，并保存到后端数据库中。具体地，该配置端界面包含的内容如下：

（2.1）该配置端界面交互形式不限，可以是一个比较简洁的文本输入框，让用户直接编写页面协议保存，也可以是一个具有反馈式的，UI交互程度较高的页面，以下为比较推荐的实施例：

（2.2）界面分为左中右三大区域，和保存按钮。

（2.3）左边区域为控件列表区，列出该系统所有支持的控件。

（2.4）中间区域为UI实时预览区，对应协议中的view节点，以可自由编辑删除的树形结构展示对应控件，view相当于树的根节点，容器控件相当于树的中间节点，而普通控件相当于树的叶子节点。可点击或者拖拽左边区域某个控件到中间区域，从而实现为view节点添加控件。

（2.5）右边区域为控件属性编辑区，当用鼠标点击中间区域某个控件时，右边区域则显示对应该控件所有属性值的编辑框，用户可依据业务需求场景自由编辑。当编辑eventlist事件节点时，弹出一个富文本控件，给用户输入对应的事件流钩子函数。

（2.6）点击保存按钮则实时保存协议数据。

进一步地，当定义好小程序UI协议和配置端界面之后，通过定义一个全局的引擎组件，然后基于全局引擎组件，请求小程序UI协议并进行解析，渲染解析后的协议生成小程序UI页面。

在一个具体的实施方式中，全局引擎组件的工作流程如图2所示，具体地，基于全局引擎组件，请求小程序UI协议并进行解析，渲染解析后的协议生成小程序UI页面，包括：

（3.1）获取页面id并请求所述页面id的协议，将协议缓存在pact对象中。

（3.2）解析pact对象，创建页面实例。

（3.3）基于预设的控件模板清单和控件渲染模块，通过递归调用控件渲染模块初步生成页面UI视图；具体为把单个控件协议片段ctrlRule作为传参，来解析view节点，初步生成页面UI视图。

（3.4）基于页面UI视图，把每个控件id与生成的控件实例作为键值对，储存在controlMap对象中，方便调用控件实例函数做更改控件属性值的操作。

（3.5）进一步解析上述 pact 对象，创建事件执行器和所有事件实例，为控件挂上相对应的事件钩子。

（3.6）执行页面初始化的生命周期函数和时间，更新控件属性和控件值，生成最新的小程序UI页面。其中，（3.6）具体包括：

（3.61）执行页面初始化的生命周期函数，为页面设置内存值，为控件赋值初始默认值。

（3.62）接着所有控件执行自身的onload事件钩子，这时可对其进行赋值操作，亦可进行数据接口请求操作。

（3.63）执行完初始化阶段的所有事件，更新被事件更改过的控件属性值和控件值，并呈现最新UI在小程序页面中。

需要说明的是，到（3.63）为止，页面初始化完成。此外，由于控件被挂上了对应的事件钩子，如果用户操作触发到了某个事件钩子，事件执行器则执行对应的事件流，以此完成用户反馈的操作。

请参阅图3，在某一个具体地实施例中，还提供了用户访问小程序的时序图。根据图3可知，用户在访问时，首先在用户界面的小程序端访问，然后小程序端会将页面id传递给全局引擎组件，由全局引擎组件访问数据库，并根据页面id查询对应的页面UI协议，并返回给全局引擎组件。全局引擎组件接收该页面UI协议后对其进行解析并生成页面实例，最终在用户界面的小程序端进行显示。

综上所述，本申请实施例提供的基于小程序的配置开发方法，通过一套完善的可扩展的小程序UI协议以及配套的全局引擎解析组件，只要开发人员了解掌握该UI协议的规范，并通过配置式界面进行协议的新增和更新操作，就能实时渲染和更新小程序页面，从而简单便捷的进行小程序开发工作，不仅开发效率高，且大大降低了开发成本。

请参阅图4，本申请某一实施例还提供一种基于小程序的配置开发系统，包括：

定义单元01，用于在小程序端定义全局引擎组件，并设计小程序UI协议，包括：采用info节点描述页面信息、view节点描述页面UI结构、presenter节点存放页面事件逻辑以及model节点存储页面数据接口；确定控件类型及控件的通用属性和私有属性，所述控件类型包括view容器控件、input文本框控件以及button按钮控件；其中，每个控件都有对应的事件触发点trigger；

页面生成单元02，用于基于全局引擎组件，请求小程序UI协议并进行解析，渲染解析后的协议生成小程序UI页面；所述小程序UI协议在配置端界面生成。

可以理解的是，本实施例提供的基于小程序的配置开发系统用于执行如上述任意一项实施例所述的基于小程序的配置开发方法，并实现与其相同的效果，此处不再进一步赘述。

请参阅图5，本申请某一实施例提供一种终端设备，包括：

一个或多个处理器；

存储器，与所述处理器耦接，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述的基于小程序的配置开发方法。

处理器用于控制该终端设备的整体操作，以完成上述的基于小程序的配置开发方法的全部或部分步骤。存储器用于存储各种类型的数据以支持在该终端设备的操作，这些数据例如可以包括用于在该终端设备上操作的任何应用程序或方法的指令，以及应用程序相关的数据。该存储器可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，只读存储器(Read-OnlyMemory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。

在一示例性实施例中，终端设备可以被一个或多个应用专用集成电路(Application Specific 1ntegrated Circuit，简称AS1C) 、数字信号处理器(DigitalSignal Processor，简称DSP) 、数字信号处理设备(Digital Signal Processing Device,简称DSPD)、可编程逻辑器件(Programmable Logic Device，简称PLD) 、现场可编程门阵列(Field Programmable Gate Array ，简称FPGA) 、控制器、微控制器、微处理器或其他电子元件实现，用于执行如上述任一项实施例所述的基于小程序的配置开发方法，并达到如上述方法一致的技术效果。

在另一示例性实施例中，还提供一种包括计算机程序的计算机可读存储介质，该计算机程序被处理器执行时实现如上述任一项实施例所述的基于小程序的配置开发方法的步骤。例如，该计算机可读存储介质可以为上述包括计算机程序的存储器，上述计算机程序可由终端设备的处理器执行以完成如上述任一项实施例所述的基于小程序的配置开发方法，并达到如上述方法一致的技术效果。

以上所述是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本申请的保护范围。

Claims (9)

1.一种基于小程序的配置开发方法，其特征在于，包括：

在小程序端定义全局引擎组件，设计小程序UI协议，包括：

采用info节点描述页面信息、view节点描述页面UI结构、presenter节点存放页面事件逻辑以及model节点存储页面数据接口；

确定控件类型及控件的通用属性和私有属性，所述控件类型包括view容器控件、input文本框控件以及button按钮控件；其中，每个控件都有对应的事件触发点trigger；

基于全局引擎组件，请求小程序UI协议并进行解析，渲染解析后的协议生成小程序UI页面；所述小程序UI协议在配置端界面生成。

2.根据权利要求1所述的基于小程序的配置开发方法，其特征在于，

所述通用属性包括：type表示控件类型，id表示该控件在页面的唯一值，title表示控件标题，name表示控件名称，hidden表示控件是否隐藏，style节点赋予用户自定义该控件样式的能力，eventlist节点与presenter事件关联；

所述私有属性包括：view控件有content属性，用于表示可以包含其他控件，input控件有required属性，用于决定控件是否必填。

3.根据权利要求1所述的基于小程序的配置开发方法，其特征在于，所述页面信息包括页面id，页面标题及页面生命周期。

4.根据权利要求2所述的基于小程序的配置开发方法，其特征在于，所述基于全局引擎组件，请求小程序UI协议并进行解析，包括：

获取页面id并请求所述页面id的协议，将协议缓存在pact对象中；

解析pact对象，创建页面实例。

5.根据权利要求4所述的基于小程序的配置开发方法，其特征在于，所述渲染解析后的协议生成小程序UI页面，包括：

基于预设的控件模板清单和控件渲染模块，通过递归调用控件渲染模块初步生成页面UI视图；

基于页面UI视图，把每个控件id与生成的控件实例作为键值对，储存在controlMap对象中；

创建事件执行器和所有事件实例，为控件设置对应的事件钩子；

执行页面初始化的生命周期函数和时间，更新控件属性和控件值，生成最新的小程序UI页面。

6.根据权利要求1所述的基于小程序的配置开发方法，其特征在于，还包括：

设计配置端界面，包括设计界面的控件列表区、UI实时预览区以及控件属性编辑区。

7.一种基于小程序的配置开发系统，其特征在于，包括：

定义单元，用于在小程序端定义全局引擎组件，并设计小程序UI协议，包括：采用info节点描述页面信息、view节点描述页面UI结构、presenter节点存放页面事件逻辑以及model节点存储页面数据接口；确定控件类型及控件的通用属性和私有属性，所述控件类型包括view容器控件、input文本框控件以及button按钮控件；其中，每个控件都有对应的事件触发点trigger；

页面生成单元，用于基于全局引擎组件，请求小程序UI协议并进行解析，渲染解析后的协议生成小程序UI页面；所述小程序UI协议在配置端界面生成。

8.一种终端设备，其特征在于，包括：

一个或多个处理器；

存储器，与所述处理器耦接，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7任一项所述的基于小程序的配置开发方法。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7任一项所述的基于小程序的配置开发方法。

Images