(19)中华人民共和国国家知识产权局
(12)发明专利申请
(10)申请公布号 (43)申请公布日 (21)申请号 202111210579.0
(22)申请日 2021.10.18
(71)申请人 浙江浙大中控信息技术有限公司
地址 310051 浙江省杭州市滨江区滨康路
352号2号楼23-25层
(72)发明人 姜子豪 李琳琳 张晓冉 徐畅
殷豪祥 柳婷 林锐
(74)专利代理机构 杭州杭诚专利事务所有限公
司 33109
代理人 刘正君
(51)Int.Cl.
G06F 8/38(2018.01)
G06F 8/41(2018.01)
(54)发明名称
(57)摘要
本发明公开了一种基于taro实现低代码平
台的方法，克服了现有技术的开发难度大、多端
的问题，包括以下内容：步骤一、创建前端工程；
换；步骤四、发布为小程序、移动应用本发明通过
可视化页面编辑自己的应用，可以直接发布，无
需编译；如果通过可视化页面编辑的页面与最终
想要的有差距，可以下载源码，在源码基础上进
行二次修改，这就是低代码开发；在编译完成之
后，最后要做的就是转换成小程序或者移动端应
用，
发布即可。权利要求书1页 说明书4页 附图2页CN 114003224 A 2022.02.01
C N 114003224
A
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可通过下载。
权 利 要 求 书1/1页CN 114003224 A
一种基于taro实现低代码平台的方法
技术领域
[0001]本发明涉及代码开发技术领域，尤其是涉及一种基于taro实现低代码平台的方法。
背景技术
[0002]根据现阶段的技术，想要快速开发app端应用和小程序，首先会考虑使用低代码平台。目前的低代码平台有搭搭云、有赞云、牛刀、IVX等，经过对比分析，这些平台对各端的支持度参差不齐，并且有些需要学习其自研语言，变相增加了开发难度，对组件的支持程度也不一样，基本不支持自定义组件，降低了灵活性。
发明内容
[0003]本发明是为了克服现有技术的开发难度大、多端转换困难、各类小程序之间的代码转换存在壁垒的问题，提供一种基于taro实现低代码平台的方法，打破了一种小程序一套代码的壁垒，实现了各类小程序之间的代码转换，并且可以通过可视化页面生成自己想要的页面，大大降低了开发人员门槛，节省了人工和时间成本，提高开发效率，不限制组件，可使用自研组件，增加灵活性。
[0004]为了实现上述目的，本发明采用以下技术方案：
一种基于taro实现低代码平台的方法，包括以下内容：
步骤一、创建前端工程；
步骤二、实现可视化页面；
步骤三、实现多端转换；
步骤四、发布为小程序、移动应用；
平台包括低代码和无代码，通过可视化页面编辑应用直接发布；如果通过可视化页面编辑的页面与最终想要的有差距，则下载源码，在源码基础上进行二次修改；
可视化页面用于进行用户最终生成的应用效果的预览、修改和完善以及页面的适配。
[0005]低代码平台不仅包括了低代码，还涵盖了无代码，通过可视化页面编辑自己的应用，可以直接发布，无需编译，如果通过可视化页面编辑的页面与最终想要的有差距，可以下载源码，在源码基础上进行二次修改，这就是低代码开发；为了满足业务需要，提高开发效率，不仅开放组件库，支持Taro、Vant及自研组件，还提供丰富的功能模板、行业模板以及行业解决方案供开发者使用，具体很强的灵活性和开放性。在编译完成之后，最后要做的就是转换成、支付宝等小程序或者移动端应用，发布即可。
[0006]作为优选，所述前端工程采用VS Code开发工具创建。
[0007]作为优选，步骤二中所述可视化页面是一个html，主要包含组件、展示页面、属性设置等三个模块，这三个模块之间是紧密相连的，所述组件包含但不局限于自定义的组件，还可导入nutUI、Element等流行组件库；
先定义组件，为其设置包括位置、内容、点击事件、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是本实施例一套代码多端编译原理图。
具体实施方式
[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组件推拽到展示页面里面之后，点击，在属性设置里面也只能对定义好的属性字段进行修改，例如它上下左右的距离，此组件是否隐藏，字体大小，字体颜等，增加其他组件也是一样的规则，可能属性会有不同。它包含但不局限于自定义的组件，还可
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议