2024年9月1日发(作者：)

(19)中华人民共和国国家知识产权局

(12)发明专利申请

(10)申请公布号

CN 114003224 A

(43)申请公布日

2022.02.01

(21)申请号 2.0

(22)申请日 2021.10.18

(71)申请人 浙江浙大中控信息技术有限公司

地址 310051 浙江省杭州市滨江区滨康路

352号2号楼23-25层

(72)发明人 姜子豪　李琳琳　张晓冉　徐畅　

殷豪祥　柳婷　林锐　

(74)专利代理机构 杭州杭诚专利事务所有限公

司 33109

代理人 刘正君

(51).

G06F

8/38

(2018.01)

G06F

8/41

(2018.01)

权利要求书1页 说明书4页 附图2页

(54)发明名称

一种基于taro实现低代码平台的方法

(57)摘要

本发明公开了一种基于taro实现低代码平

台的方法，克服了现有技术的开发难度大、多端

转换困难、各类小程序之间的代码转换存在壁垒

的问题，包括以下内容：步骤一、创建前端工程；

步骤二、实现可视化页面；步骤三、实现多端转

换；步骤四、发布为小程序、移动应用本发明通过

可视化页面编辑自己的应用，可以直接发布，无

需编译；如果通过可视化页面编辑的页面与最终

想要的有差距，可以下载源码，在源码基础上进

行二次修改，这就是低代码开发；在编译完成之

后，最后要做的就是转换成小程序或者移动端应

用，发布即可。

C

N

1

1

4

0

0

3

2

2

4

A

CN 114003224 A

权　利　要　求　书

1/1页

1.一种基于taro实现低代码平台的方法，其特征是，包括以下内容：

步骤一、创建前端工程；

步骤二、实现可视化页面；

步骤三、实现多端转换；

步骤四、发布为小程序、移动应用；

平台包括低代码和无代码，通过可视化页面编辑应用直接发布；如果通过可视化页面

编辑的页面与最终想要的有差距，则下载源码，在源码基础上进行二次修改；

可视化页面用于进行用户最终生成的应用效果的预览、修改和完善以及页面的适配。

2.根据权利要求1所述的一种基于taro实现低代码平台的方法，其特征是，所述前端工

程采用VS Code开发工具创建。

3.根据权利要求1所述的一种基于taro实现低代码平台的方法，其特征是，步骤二中所

述可视化页面是一个html，主要包含组件、展示页面、属性设置等三个模块，这三个模块之

间是紧密相连的，所述组件包含但不局限于自定义的组件，还可导入nutUI、Element等流行

组件库；

先定义组件，为其设置包括位置、内容、点击事件、CCS样式等属性，在用户将组件推拽

到展示页面后对组件点击，在属性设置里可以对定义好的属性字段进行修改。

4.根据权利要求3所述的一种基于taro实现低代码平台的方法，其特征是，用户拖入多

个组件组成一个页面之后需要保存并导出，将页面中的所有组件取出存到一个json文件

中，这个json文件作为页面描述文件。

5.根据权利要求1所述的一种基于taro实现低代码平台的方法，其特征是，步骤三包括

以下内容：首先创建一个空的taro工程，根据页面描述文件的个数，对应在taro工程中生成

注册相应的vue页面，每个页面下的组件信息都从步骤二中compList集合获取，再取出每个

组件的位置、css样式、内容、点击事件、绑定信息等数据后，映射到组件库标签中，模仿生成

相近的页面标签，并使用vue3进行数据绑定，其数据将直接与ui组件进行映射捆绑。

6.根据权利要求5所述的一种基于taro实现低代码平台的方法，其特征是，在转换完成

taro工程之后，安装node环境，使用npm全局安装@tarojs/cli工具，安装完成后，使用build

命令把taro工程编译成不同端的代码，如转换成微信小程序工程：npm run dev:weapp。

7.根据权利要求1所述的一种基于taro实现低代码平台的方法，其特征是，步骤四中小

程序包括微信、百度、支付宝、钉钉小程序，通过使用build命令把taro工程编译成不同端的

代码转化为小程序工程，不同的小程序之间更改仅需要一行命令更换对应名称；

生成Android、iOS端的移动应用，需要先把项目转成H5，然后拿到首页地址，地址包括

离线或者在线地址；平台提供有一键打包服务，根据提示输入app相关信息及首页地址，自

动打包成webapp，生成的webapp可通过二维码扫码下载。

2

CN 114003224 A

说　明　书

一种基于taro实现低代码平台的方法

1/4页

技术领域

[0001]

本发明涉及代码开发技术领域，尤其是涉及一种基于taro实现低代码平台的方

法。

背景技术

[0002]

根据现阶段的技术，想要快速开发app端应用和小程序，首先会考虑使用低代码平

台。目前的低代码平台有搭搭云、有赞云、牛刀、IVX等，经过对比分析，这些平台对各端的支

持度参差不齐，并且有些需要学习其自研语言，变相增加了开发难度，对组件的支持程度也

基本不支持自定义组件，降低了灵活性。不一样，

发明内容

[0003]

本发明是为了克服现有技术的开发难度大、多端转换困难、各类小程序之间的代

码转换存在壁垒的问题，提供一种基于taro实现低代码平台的方法，打破了一种小程序一

套代码的壁垒，实现了各类小程序之间的代码转换，并且可以通过可视化页面生成自己想

要的页面，大大降低了开发人员门槛，节省了人工和时间成本，提高开发效率，不限制组件，

可使用自研组件，增加灵活性。

[0004]

为了实现上述目的，本发明采用以下技术方案：

一种基于taro实现低代码平台的方法，包括以下内容：

步骤一、创建前端工程；

步骤二、实现可视化页面；

步骤三、实现多端转换；

步骤四、发布为小程序、移动应用；

平台包括低代码和无代码，通过可视化页面编辑应用直接发布；如果通过可视化

页面编辑的页面与最终想要的有差距，则下载源码，在源码基础上进行二次修改；

可视化页面用于进行用户最终生成的应用效果的预览、修改和完善以及页面的适

配。

[0005]

低代码平台不仅包括了低代码，还涵盖了无代码，通过可视化页面编辑自己的应

用，可以直接发布，无需编译，如果通过可视化页面编辑的页面与最终想要的有差距，可以

下载源码，在源码基础上进行二次修改，这就是低代码开发；为了满足业务需要，提高开发

效率，不仅开放组件库，支持Taro、Vant及自研组件，还提供丰富的功能模板、行业模板以及

行业解决方案供开发者使用，具体很强的灵活性和开放性。在编译完成之后，最后要做的就

是转换成微信、支付宝等小程序或者移动端应用，发布即可。

[0006]

作为优选，所述前端工程采用VS Code开发工具创建。

[0007]

作为优选，步骤二中所述可视化页面是一个html，主要包含组件、展示页面、属性

设置等三个模块，这三个模块之间是紧密相连的，所述组件包含但不局限于自定义的组件，

还可导入nutUI、Element等流行组件库；

3

CN 114003224 A

说　明　书

2/4页

先定义组件，为其设置包括位置、内容、点击事件、CCS样式等属性，在用户将组件

推拽到展示页面后对组件点击，在属性设置里可以对定义好的属性字段进行修改。

[0008]

首先可视化页面为本平台的一个重要功能点，用户最终生成的应用效果都可以在

此页面进行预览、修改和完善以及页面的适配等。平台提供了许多行业相关的模板库，可以

直接选择在模板上进行修改，更加的快捷。最后再给相应的组件绑定事件以及数据源。

[0009]

作为优选，用户拖入多个组件组成一个页面之后需要保存并导出，将页面中的所

有组件取出存到一个json文件中，这个json文件作为页面描述文件。

[0010]

作为优选，步骤三包括以下内容：首先创建一个空的taro工程，根据页面描述文件

的个数，对应在taro工程中生成注册相应的vue页面，每个页面下的组件信息都从步骤二中

compList集合获取，再取出每个组件的位置、css样式、内容、点击事件、绑定信息等数据后，

映射到组件库标签中，模仿生成相近的页面标签，并使用vue3进行数据绑定，其数据将直接

与ui组件进行映射捆绑。

[0011]

作为优选，在转换完成taro工程之后，安装node环境，使用npm全局安装@tarojs/

cli工具，安装完成后，使用build命令把taro工程编译成不同端的代码，如转换成微信小程

序工程：npm run dev:weapp。

[0012]

多端转换是本平台第二个重要功能点，平台生成的源码为taro工程，通过前端工

具打开工程，运行相应的命令即可自动转换。其实现原理主要通过在小程序端模拟实现

DOM、BOM API来让前端框架直接运行在小程序环境中，从而达到小程序和H5统一的目的，最

后通过webpack进行编译打包。

[0013]

作为优选，步骤四中小程序包括微信、百度、支付宝、钉钉小程序，通过使用build

命令把taro工程编译成不同端的代码转化为小程序工程，不同的小程序之间更改仅需要一

行命令更换对应名称；

生成Android、iOS端的移动应用，需要先把项目转成H5，然后拿到首页地址，地址

包括离线或者在线地址；平台提供有一键打包服务，根据提示输入app相关信息及首页地

址，自动打包成webapp，生成的webapp可通过二维码扫码下载。

[0014]

因此，本发明具有如下有益效果：

1. 不限制组件，可使用自研组件，增加灵活性；

2. 不局限于无代码，还可下载源码，进行二次编译；

3. 可以转换成各端小程序，一套代码，多端发布；

4. 提供APP打包服务，转换的H5可以直接打包生成Android、iOS端webapp；

5. 多端之间转换比较简单，一行命令即可。

附图说明

[0015]

图1是本实施例低代码平台框架图。

[0016]

图2是本实施例可视化页面框架图。

[0017]

图3是本实施例小程序原理图。

[0018]

图4是本实施例一套代码多端编译原理图。

4

CN 114003224 A

说　明　书

3/4页

具体实施方式

[0019]

下面结合附图与具体实施方式对本发明做进一步的描述。

[0020]

实施例：

本实施例提供了一种基于taro实现低代码平台的方法，针对现有的低代码平台开

发模式，本发明开放了组件库，不仅可以使用Taro、Vant等组件库，还可以使用自研组件，增

加了其灵活性。对于在平台中通过模板或者拖拉拽生成的项目工程，可以选择生成各类小

程序，甚至是包含Android、iOS端的移动webapp，真正的做到一次编译，多端运行。并且使用

标准的web语言开发，不需要学习新的技能。降低了开发难度，提高了开发效率，统一了各端

代码，更易于维护。

[0021]

如图1表示为低代码平台框架图，其实他不仅包括了低代码，还涵盖了无代码，通

过可视化页面（图2）编辑自己的应用，可以直接发布，无需编译，如果通过可视化页面编辑

的页面与最终想要的有差距，可以下载源码，在源码基础上进行二次修改，这就是低代码开

发。为了满足业务需要，提高开发效率，我们不仅开放组件库，支持Taro、Vant及自研组件，

还提供丰富的功能模板、行业模板以及行业解决方案供开发者使用，具体很强的灵活性和

开放性。在编译完成之后，最后要做的就是转换成微信、支付宝等小程序或者移动端应用，

发布即可。

[0022]

图2为可视化页面框架图，首先可视化页面为本平台的一个重要功能点，用户最终

生成的应用效果都可以在此页面进行预览、修改和完善以及页面的适配等。平台提供了许

可以直接选择在模板上进行修改，更加的快捷。最后再给相应的组件多行业相关的模板库，

绑定事件以及数据源。

[0023]

图3为小程序原理图，以微信小程序为例，微信小程序主要分为逻辑层和视图层，

以及在他们之下的原生部分。逻辑层主要负责JS运行，视图层主要负责页面的渲染，他们之

间主要通过Event和Data进行通信，同时通过JSBridge调用原生的API。这也是以微信小程

序为首的大多数小程序的架构。图3为小程序架构图的极简版，只需要在逻辑层调用对应的

App（）/Page（）方法，且在方法里面处理data、提供生命周期/事件函数等，同时在视图层提

供对应的模板及样式渲染就能运行小程序了，图4代码转换为小程序时也用到此原理。

[0024]

图4为一套代码多端编译原理图，多端转换是本平台第二个重要功能点，平台生成

的源码为taro工程，通过前端工具打开工程，运行相应的命令即可自动转换。其实现原理主

要通过在小程序端模拟实现DOM、BOM API来让前端框架直接运行在小程序环境中，从而达

到小程序和H5统一的目的，最后通过webpack进行编译打包。

[0025]

本发明重点讲解可视化操作页面和多端转换的实现步骤，具体步骤如下：

步骤一：创建前端工程，推荐采用VS Code开发工具。

[0026]

步骤二：实现可视化页面。

[0027]

可视化页面就是一个html，它主要包含组件、展示页面、属性设置等三个模块，这

三个模块之间是紧密相连的。

[0028]

例如先定义一个button组件，给它设置有位置、内容、点击事件、CSS样式等属性，

那么当用户把button组件推拽到展示页面里面之后，点击，在属性设置里面也只能对定义

好的属性字段进行修改，例如它上下左右的距离，此组件是否隐藏，字体大小，字体颜色等，

增加其他组件也是一样的规则，可能属性会有不同。它包含但不局限于自定义的组件，还可

5

CN 114003224 A

说　明　书

4/4页

导入nutUI、Element等流行组件库。

[0029]

当用户拖入多个组件组合成一个页面之后，需要保存并导出，这个时候需要把此

页面中的所有组件取出，存到一个json文件中，例如这个组件集合为compList，还以button

为例，此时它在json里面存储的内容有name（名称）：button，left（左边的间距）：30，top（顶

部的间距）20，css（字体大小颜色等）：{color：#ffffff,border:16px}等，其余组件也是按

照这种模式进行存储，compList这个集合表示了存入组件的数量，这个json文件称为页面

描述文件。

[0030]

步骤三：实现多端转换。

[0031]

首先创建一个空的taro工程，根据页面描述文件的个数，对应在taro工程中生成

注册相应的vue页面，每个页面下的组件信息都从步骤二中compList这个集合获取，在取出

每个组件的位置、css样式、内容、点击事件、绑定信息等数据后，映射到组件库标签中，模仿

生成相近的页面标签，并使用vue3进行数据绑定，其数据将直接与ui组件进行映射捆绑。

[0032]

在转换完成taro工程之后，安装node环境（>=12.0.0），使用npm全局安装@tarojs/

cli工具，安装完成后，使用build命令可以把taro工程编译成不同端的代码，如转换成微信

小程序工程：npm run dev:weapp。

[0033]

步骤四：发布为小程序、移动应用。

[0034]

上面已经讲述了如何转换成微信小程序工程，百度、支付宝、钉钉等小程序和上述

操作一样，都只需一行命令，更换下对应的名称即可。

[0035]

如果想要生成Android、iOS端的移动应用，需要先把项目转成H5，然后拿到首页地

址，离线或者在线地址都可以。此平台提供有一键打包服务，根据提示输入app相关信息及

生成的webapp可以通过二维码扫码下载。首页地址，可自动打包成webapp，

[0036]

对比现有平台，本平台的可视化操作页面比较具有灵活性，不局限于默认组件，用

户可上传其他组件库或者自研组件，可扩展性强。提供源码下载，可进行二次编译。一套代

码，可以转换成各种小程序，适配程度高，也可以转换成webapp，供用户下载安装。当业务要

求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常

高，一套代码适配多端，也是本平台的初衷。

[0037]

上述实施例对本发明的具体描述，只用于对本发明进行进一步说明，不能理解为

对本发明保护范围的限定，本领域的技术工程师根据上述发明的内容对本发明作出一些非

本质的改进和调整均落入本发明的保护范围内。

6

CN 114003224 A

说　明　书　附　图

1/2页

图1

图2

图3

7

CN 114003224 A

说　明　书　附　图

2/2页

图4

8