CN110968305A

CN110968305A - 小程序可视化生成方法、装置、设备及存储介质

Info

Publication number: CN110968305A
Application number: CN201911328318.1A
Authority: CN
Inventors: 方永清; 陈丹
Original assignee: Shenzhen Lexin Software Technology Co Ltd
Current assignee: Shenzhen Lexin Software Technology Co Ltd
Priority date: 2019-12-20
Filing date: 2019-12-20
Publication date: 2020-04-07

Abstract

本发明实施例公开了一种小程序可视化生成方法、装置、设备及存储介质，所述方法包括：获取可编辑面板中的预设组件；获取对所述预设组件的逻辑处理；根据所述预设组件和所述逻辑处理生成小程序文件。本发明实施例实现了小程序页面的可视化编辑和小程序代码的自动生成，降低了开发人员的工作量，提高了开发效率。

Description

小程序可视化生成方法、装置、设备及存储介质

技术领域

本发明实施例涉及计算机软件技术领域，尤其涉及一种小程序可视化生成方法、装置、设备及存储介质。

背景技术

小程序全称为微信小程序(Mini Program)，是微信近年来新发布的一种应用程序的实现方式，它是一种不需要下载安装即可使用的应用程序，实现了应用程序“触手可及”的梦想，用户扫一扫或搜一下即可打开应用程序。

由于小程序的简单便捷性，自上线后就深受用户喜爱，这使得企业也要将原有的前端网页转化为小程序。传统的前端网页在开发过程中可以通过dreamwever、frontpage等工具来搭建可视化的前端页面，然后可以一键生成html代码，这样极大的提高了前端网页的开发效率。但是小程序用的是微信自研的MINA(Multipurpose Infrastructure forNetwork Applications，网络应用程序的高可用性框架)框架，目前国内的前端网页大多是基于vue框架开发的，基于这两种框架开发出来的程序代码并不能直接通用，因此，目前还没有一种能够实现小程序页面的可视化搭建的方法，如果要将一个前端网页转为小程序实现，开发人员需要分别基于两种框架编写两套不同的程序代码，工作量大，开发效率低下。

发明内容

本发明实施例提供一种小程序可视化生成方法、装置、设备及存储介质，以实现小程序页面的可视化搭建，减少开发工作量，提高开发效率。

第一方面，本发明实施例提供一种小程序可视化生成方法，包括：

获取可编辑面板中的预设组件；

获取对所述预设组件的逻辑处理；

根据所述预设组件和所述逻辑处理生成小程序文件。

进一步的，所述根据所述预设组件和所述逻辑处理生成小程序文件包括：

根据所述预设组件和所述逻辑处理生成目标JSON文件；

根据所述目标JSON文件生成小程序文件。

进一步的，所述根据所述预设组件和所述逻辑处理生成目标JSON文件包括：

根据所述预设组件和所述逻辑处理生成JSON源码文件；

根据对所述JSON源码文件的修改内容生成目标JSON文件。

进一步的，所述根据所述目标JSON文件生成小程序文件包括：

根据所述预设组件生成小程序模板文件；

获取所述可编辑面板的样式信息；

根据所述样式信息生成小程序样式文件；

根据所述逻辑处理生成小程序代码文件。

进一步的，所述样式信息包括所述预设组件在所述可编辑面板中的位置信息、所述预设组件的大小信息、所述预设组件的背景颜色信息和所述预设组件的阴影信息。

进一步的，所述小程序模板文件为wxml文件，所述小程序样式文件为wxss文件，所述小程序代码文件为js文件。

第二方面，本发明实施例提供一种小程序可视化生成装置，包括：

预设组件获取模块，用于获取可编辑面板中的预设组件；

逻辑处理获取模块，用于获取对所述预设组件的逻辑处理；

小程序文件生成模块，用于根据所述预设组件和所述逻辑处理生成小程序文件。

进一步的，所述小程序文件生成模块包括：

目标JSON文件生成单元，用于根据所述预设组件和所述逻辑处理生成目标JSON文件；

小程序文件生成单元，用于根据所述目标JSON文件生成小程序文件。

第三方面，本发明实施例提供一种小程序可视化生成设备，所述设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明任意实施例提供的小程序可视化生成方法。

第四方面，本发明实施例提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明任意实施例提供的小程序可视化生成方法。

本发明实施例提供的一种小程序可视化生成方法通过获取可编辑面板中的预设组件；获取对所述预设组件的逻辑处理；根据所述预设组件和所述逻辑处理生成小程序文件。实现了小程序页面的可视化编辑和小程序代码的自动生成，降低了开发人员的工作量，提高了开发效率。

附图说明

图1为本发明实施例一提供的一种小程序可视化生成方法的流程示意图；

图2为本发明实施例二提供的一种小程序可视化生成方法的流程示意图；

图3为本发明实施例三提供的一种小程序生成装置的结构示意图；

图4为本发明实施例四提供的一种小程序可视化生成设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各步骤描述成顺序的处理，但是其中的许多步骤可以被并行地、并发地或者同时实施。此外，各步骤的顺序可以被重新安排。当其操作完成时处理可以被终止，但是还可以具有未包括在附图中的附加步骤。处理可以对应于方法、函数、规程、子例程、子程序等等。

此外，术语“第一”、“第二”等可在本文中用于描述各种方向、动作、步骤或元件等，但这些方向、动作、步骤或元件不受这些术语限制。这些术语仅用于将第一个方向、动作、步骤或元件与另一个方向、动作、步骤或元件区分。术语“第一”、“第二”等而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明的描述中，“多个”、“批量”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

实施例一

图1为本发明实施例一提供的一种小程序可视化生成方法的流程示意图，本实施例可适用于通过可视化方法生成小程序。如图1所示，本发明实施例一提供的一种小程序可视化生成方法包括：

S110、获取可编辑面板中的预设组件。

具体的，组件是对数据和方法的简单封装，组件可以有自己的属性和方法，属性是组件数据的简单访问者，方法则是组件的一些简单而可见的功能。预设组件是预先设定好的、能够实现某种功能的组件，可以直接使用搭建前端网页，不需要重新编写代码，也叫做UI(User Interface，用户界面)组件，需要说明的是，预设组件的代码为HTML(HyperTextMarkup Language，超文本标记语言)代码。可编辑面板是一个用来展示预设组件的可视化面板，用户可以通过拖拽、添加等方式将多个预设组件放入可编辑面板中。预设组件置于预设组件库中，包括但不限于：视图容器、基础内容、表单组件、导航、媒体组件、地图、画布、原生组件等。

S120、获取对所述预设组件的逻辑处理。

具体的，对预设组件的逻辑处理可以指对单个预设组件进行的单独处理，也可以指对多个预设组件之间进行的处理，例如，对单个预设组件设置点击、输入、滑动、提交等事件逻辑处理，对多个预设组件进行组合、连接、跳转等逻辑处理。进一步的，对预设组件的逻辑处理还包括逻辑处理的具体内容，例如，对单个预设组件设置提交的内容和地址，或对预设组件设置超链接的调整URL(Uniform Resource Locator，统一资源定位符)地址等。

S130、根据所述预设组件和所述逻辑处理生成小程序文件。

具体的，首先根据预设组件和对预设组件的逻辑处理生成JSON文件，也叫做app.json文件，它用来对小程序进行全局配置，然后通过正则表达式将JSON文件的内容映射为对应的小程序文件，从而获得了自动生成的小程序代码。正则表达式又称为规则表达式(Regular Expression，RE)，描述了一种字符串匹配的模式(pattern)，具有检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等功能。

本发明实施例一提供的一种小程序可视化生成方法通过获取可编辑面板中的预设组件；获取对所述预设组件的逻辑处理；根据所述预设组件和所述逻辑处理生成小程序文件。实现了小程序页面的可视化编辑和小程序代码的自动生成，降低了开发人员的工作量，提高了开发效率。

实施例二

图2为本发明实施例二提供的一种小程序可视化生成方法的流程示意图，本实施例是对上述实施例的进一步细化。如图2所示，本发明实施例二提供的一种小程序可视化生成方法包括：

S210、获取可编辑面板中的预设组件。

S220、获取对所述预设组件的逻辑处理。

S230、根据所述预设组件和所述逻辑处理生成目标JSON文件。

具体的，JSON文件也叫做app.json文件，它用来对小程序进行全局配置。一种根据所述预设组件和所述逻辑处理生成目标JSON文件的方法包括步骤S231～S232(图中未示出)。

S231、根据所述预设组件和所述逻辑处理生成JSON源码文件。

S232、根据对所述JSON源码文件的修改内容生成目标JSON文件。

具体的，JSON源码文件是指根据预设组件的源码和对预设组件的逻辑处理自动生成的JSON文件。生成JSON源码文件后，用户可以对JSON源码文件进行修改，以使JSON文件符合需求，而用户对JSON源码文件的修改可以自动反应到可编辑面板上，用户可以通过可编辑面板直观地看到修改所产生的效果，实现“所改即所得”。根据用户对JSON源码文件的修改内容，自动生成目标JSON文件，用以生成对应的小程序文件。

S240、根据所述目标JSON文件生成小程序文件。

具体的，可以通过正则表达式将JSON文件的内容映射为对应的小程序文件。正则表达式又称为规则表达式(Regular Expression，RE)，描述了一种字符串匹配的模式(pattern)，具有检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等功能。一种根据所述目标JSON文件生成小程序文件的方法包括步骤S241～S244(图中未示出)。

S241、根据所述预设组件生成小程序模板文件。

具体的，小程序模板文件为wxml文件，wxml文件定义了小程序页面的结构，是小程序文件中必不可少的部分。例如，预设组件中的属性语句为：attr＝“value”，根据正则表达式，生成的对应的小程序模块文件中的属性语句为：attr＝“{value}”。

S242、获取所述可编辑面板的样式信息。

具体的，样式信息包括但不限于：预设组件在可编辑面板中的位置信息、预设组件的大小信息、预设组件的背景颜色信息和预设组件的阴影信息。

S243、根据所述样式信息生成小程序样式文件。

具体的，小程序样式文件为wxss文件，wxss文件是小程序页面的样式表。

S244、根据所述逻辑处理生成小程序代码文件。

具体的，小程序代码文件为js文件，js文件定义了小程序页面的逻辑。

本发明实施例二提供的一种小程序可视化生成方法实现了小程序页面的可视化编辑和小程序代码的自动生成，降低了开发人员的工作量，提高了开发效率。

实施例三

图3为本发明实施例三提供的一种小程序生成装置的结构示意图，本实施例可适用于通过可视化方法生成小程序。本实施例提供的小程序生成装置可以实现本发明任意实施例提供的小程序生成方法，基本实现方法的相应功能结构和有益效果，本实施例中未详尽描述的内容可参考本发明任意方法实施例的描述。

如图3所示，本发明实施例三提供的一种小程序生成装置包括：预设组件获取模块310、逻辑处理获取模块320和小程序文件生成模块330。

预设组件获取模块310用于获取可编辑面板中的预设组件；

逻辑处理获取模块320用于获取对所述预设组件的逻辑处理；

小程序文件生成模块330用于根据所述预设组件和所述逻辑处理生成小程序文件。

进一步的，还包括：

进一步的，所述目标JSON文件生成单元具体用于：

根据所述预设组件和所述逻辑处理生成JSON源码文件；

根据对所述JSON源码文件的修改内容生成目标JSON文件。

进一步的，所述小程序文件生成单元具体用于：

根据所述预设组件生成小程序模板文件；

获取所述可编辑面板的样式信息；

根据所述样式信息生成小程序样式文件；

根据所述逻辑处理生成小程序代码文件。

本发明实施例三提供的一种小程序可视化生成装置通过预设组件获取模块、逻辑处理获取模块和小程序文件生成模块，实现了小程序页面的可视化编辑和小程序代码的自动生成，降低了开发人员的工作量，提高了开发效率。

实施例四

图4为本发明实施例四提供的一种小程序可视化生成设备的结构示意图。图4示出了适于用来实现本发明实施方式的示例性设备412的框图。图4显示的设备412仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，设备412以通用设备的形式表现。设备412的组件可以包括但不限于：一个或者多个处理器416，存储装置428，连接不同***组件(包括存储装置428和处理器416)的总线418。

总线418表示几类总线结构中的一种或多种，包括存储装置总线或者存储装置控制器，***总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry SubversiveAlliance，ISA)总线，微通道体系结构(Micro Channel Architecture，MAC)总线，增强型ISA总线、视频电子标准协会(Video Electronics Standards Association，VESA)局域总线以及***组件互连(Peripheral Component Interconnect，PCI)总线。

设备412典型地包括多种计算机***可读介质。这些介质可以是任何能够被设备412访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

存储装置428可以包括易失性存储器形式的计算机***可读介质，例如随机存取存储器(Random Access Memory，RAM)430和/或高速缓存存储器432。设备412可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机***存储介质。仅作为举例，存储***434可以用于读写不可移动的、非易失性磁介质(图4未显示，通常称为“硬盘驱动器”)。尽管图4中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘，例如只读光盘(Compact Disc Read-Only Memory，CD-ROM),数字视盘(Digital Video Disc-Read Only Memory，DVD-ROM)或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线418相连。存储装置428可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块442的程序/实用工具440，可以存储在例如存储装置428中，这样的程序模块442包括但不限于操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块442通常执行本发明所描述的实施例中的功能和/或方法。

设备412也可以与一个或多个外部设备414(例如键盘、指向设备、显示器424等)通信，还可与一个或者多个使得用户能与该设备412交互的设备通信，和/或与使得该设备412能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口422进行。并且，设备412还可以通过网络适配器420与一个或者多个网络(例如局域网(Local Area Network，LAN)，广域网(Wide Area Network，WAN)和/或公共网络，例如因特网)通信。如图4所示，网络适配器420通过总线418与设备412的其它模块通信。应当明白，尽管图中未示出，可以结合设备412使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、磁盘阵列(Redundant Arrays of Independent Disks，RAID)***、磁带驱动器以及数据备份存储***等。

处理器416通过运行存储在存储装置428中的程序，从而执行各种功能应用以及数据处理，例如实现本发明任意实施例所提供的小程序可视化生成方法，该方法可以包括：

获取可编辑面板中的预设组件；

获取对所述预设组件的逻辑处理；

根据所述预设组件和所述逻辑处理生成小程序文件。

实施例五

本发明实施例五还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任意实施例所提供的小程序可视化生成方法，该方法可以包括：

获取可编辑面板中的预设组件；

获取对所述预设组件的逻辑处理；

根据所述预设组件和所述逻辑处理生成小程序文件。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或终端上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims

1.一种小程序可视化生成方法，其特征在于，包括：

获取可编辑面板中的预设组件；

获取对所述预设组件的逻辑处理；

根据所述预设组件和所述逻辑处理生成小程序文件。

2.如权利要求1所述的方法，其特征在于，所述根据所述预设组件和所述逻辑处理生成小程序文件包括：

根据所述预设组件和所述逻辑处理生成目标JSON文件；

根据所述目标JSON文件生成小程序文件。

3.如权利要求2所述的方法，其特征在于，所述根据所述预设组件和所述逻辑处理生成目标JSON文件包括：

根据所述预设组件和所述逻辑处理生成JSON源码文件；

根据对所述JSON源码文件的修改内容生成目标JSON文件。

4.如权利要求2所述的方法，其特征在于，所述根据所述目标JSON文件生成小程序文件包括：

根据所述预设组件生成小程序模板文件；

获取所述可编辑面板的样式信息；

根据所述样式信息生成小程序样式文件；

根据所述逻辑处理生成小程序代码文件。

5.如权利要求4所述的方法，其特征在于，所述样式信息包括所述预设组件在所述可编辑面板中的位置信息、所述预设组件的大小信息、所述预设组件的背景颜色信息和所述预设组件的阴影信息。

6.如权利要求4所述的方法，其特征在于，所述小程序模板文件为wxml文件，所述小程序样式文件为wxss文件，所述小程序代码文件为js文件。

7.一种小程序可视化生成装置，其特征在于，包括：

预设组件获取模块，用于获取可编辑面板中的预设组件；

逻辑处理获取模块，用于获取对所述预设组件的逻辑处理；

8.如权利要求7所述的装置，其特征在于，所述小程序文件生成模块包括：

9.一种小程序可视化生成设备，其特征在于，所述设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一项所述的小程序可视化生成方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-6中任一项所述的小程序可视化生成方法。