【技术实现步骤摘要】
本申请属于软件开发，尤其涉及一种基于低代码前端渲染引擎的双向交互方法及系统。
技术介绍
1、近年来，数字化转型浪潮席卷各行各业，越来越多的企业开始重视软件开发效率。在这一背景下，低代码开发平台（lcdp）应运而生，并迅速引领了一波新技术热潮。低代码开发平台利用低代码技术，将底层架构和基础设施抽象为图形界面，以可视化设计和配置为主，辅以少量代码，从而提供快速搭建页面和创建业务逻辑的能力，实现应用的快速构建。
2、随着 vue、react 等前端组件化框架技术的逐渐成熟，前端组件化开发技术也迅速发展。前端组件化是将复杂用户界面拆分为多个独立、可复用组件的过程。每个组件封装了自己的逻辑、样式和模板，通过组合这些组件来构建整个应用程序。组件化提高了代码的可维护性、可复用性和开发效率，成为现代前端开发的重要趋势。
3、组件化开发技术与低代码技术的结合进一步降低了软件开发的门槛，使非专业人员也能轻松上手。然而，低代码技术也存在局限性。其设计思想是将所有组件预先开发好，使用者在可视化界面上进行搭建。在实际业务使用过程中，难免会遇到一些无法满足的需求，需进行定制化开发。如何充分利用低代码平台的快速搭建优势，构建大部分支持的内容，并仅对需要定制化开发的部分进行定制，再将其嵌入低代码页面中，实现与低代码内容的双向交互，以满足复杂的业务逻辑，这是低代码平台实施过程中常见的挑战。
技术实现思路
1、本申请实施例提供了一种基于低代码前端渲染引擎的双向交互方法及系统，可以解决当前的低代
2、第一方面，本申请实施例提供了一种基于低代码前端渲染引擎的双向交互方法，应用于低代码前端渲染引擎的双向交互系统，上述方法包括如下步骤：s1、产品侧在组件库中新增动态组件，所述动态组件用于动态加载低代码系统外部定制化开发的业务组件；s2、产品侧使用s1中的所述动态组件与多个低代码组件，封装dsl渲染引擎sdk，并通过npm内网仓库发布；s3、业务侧基于业务需求，使用低代码系统选择低代码集成方案以完成低代码页面的开发，所述低代码集成方案包括低代码页面整体使用低代码搭建和在低代码页面中的部分区域中嵌入所述定制化开发的业务组件；s4、业务侧将s3中的低代码页面的页面编码pageid或dsl、所有所述定制化开发的业务组件作为入参，并将所述入参注入s2中的渲染引擎sdk； s5、s4中注入渲染引擎sdk的所述定制化开发的业务组件通过获取渲染引擎sdk运行时上下文，控制低代码内容；渲染引擎sdk通过解析s2中的所述低代码组件配置项注入的js代码，绑定渲染引擎sdk运行时上下文来控制所述定制化开发的业务组件。
3、在第一方面的一种可能的实现方式中，上述步骤s1中不同类型的典型任务包括刹车、转弯、调整飞机航向的涉及下肢操纵的任务。
4、可选的，在第一方面的另一种可能的实现方式中，步骤s1中动态组件支持的可视化配置项包括组件编码componentcode、入参requestparams、出参exposes、预览图previewimg；
5、组件编码为渲染引擎加载定制化开发的业务组件的唯一标识，渲染引擎通过组件编码获取定制化开发的业务组件进行渲染；预览图片为组件整体效果图的文件路径，用于在低代码系统搭建时快速预览组件效果；入参为动态组件在业务侧渲染时接收的参数，动态组件根据自身业务逻辑配置入参进行处理；出参为动态组件在业务侧渲染时向外暴露的属性与方法，使渲染引擎可对其进行控制。
6、可选的，在第一方面的另一种可能的实现方式中，步骤s1包括：
7、步骤s11、定义动态组件的入参和属性：
8、componentsmap入参为所有动态组件的集合，variables入参为渲染引擎所有页面变量的引用，schema入参为渲染引擎当前渲染页面的整体dsl，config入参为当前动态组件的dsl，componentsinstancemap入参为渲染引擎中所有组件实例引用的集合，dynamiccomponentref属性为渲染引擎动态组件实例的引用，dynamiccomponent属性为当前渲染的动态组件，componentprop属性为动态组件的入参集合；
9、步骤s12、解析当前渲染的动态组件：
10、根据当前动态组件的组件编码componentcode在componentsmap中查找对应的动态组件，作为入参，调用vue框架的defineasynccomponent方法生成实际渲染的组件；
11、步骤s13、解析当前动态组件的入参：
12、遍历当前动态组件入参配置requestparams数组，若当前遍历项为静态参数，直接获取入参配置的静态值，若当前遍历项为绑定页面变量的值，则调用getvariablevalue方法从渲染引擎中获取绑定页面变量的动态值。
13、可选的，在第一方面的另一种可能的实现方式中，步骤s2包括：
14、步骤s21、开发渲染引擎组件：
15、新建lowcoderender.vue组件，入参为低代码页面唯一标识pageid、dsl、定制化开发的业务组件集合dynamiccomponentsmap，渲染引擎根据pageid自动拉取dsl或直接根据传入的dsl渲染页面；
16、步骤s22、封装渲染引擎sdk的构建入口lowcodebuild.js：
17、引入s21中的lowcoderender组件，遵循vue框架定义的组件注册规则，新建install 方法，调用vue框架的component方法，注册渲染引擎组件；
18、步骤s23、配置vite工具的lib模式，以es格式构建装渲染引擎sdk，其中，构建的关键配置如下：
19、打包入口entry配置为lowcodebuild.js，名称name配置为lowcoderender，格式formats配置为es，构建产物文件名称filename配置为lowcoderender.es.js；
20、步骤s24、将渲染引擎sdk发布到npm内网仓库：
21、通过npm publish --registry=xxx命令，将渲染引擎sdk发布到npm内网仓库。
22、可选的，在第一方面的另一种可能的实现方式中，步骤s21包括：
23、步骤s211、分析dsl：
24、分析dsl，根据dsl解构出配置的页面变量和页面结构的配置信息；
25、步骤s212、初始化低代码系统变量：
26、根据s211解构出的页面变量，对所有页面变量进行初始化赋值操作，并将所有页面变量保存在渲染引擎运行时上下文的variables变量中；
27、步骤s213、初始化渲染低代码组件：
28、遍历s211解构出的页面结构，本文档来自技高网...
【技术保护点】
1.一种基于低代码前端渲染引擎的双向交互方法，其特征在于，应用于低代码前端渲染引擎的双向交互系统，所述方法包括如下步骤：
2.根据权利要求1所述的方法，其特征在于，步骤S1中所述动态组件支持的可视化配置项包括组件编码componentCode、入参requestParams、出参exposes、预览图previewImg；组件编码为渲染引擎加载定制化开发的业务组件的唯一标识，渲染引擎通过组件编码获取定制化开发的业务组件进行渲染；预览图片为组件整体效果图的文件路径，用于在低代码系统搭建时快速预览组件效果；入参为动态组件在业务侧渲染时接收的参数，动态组件根据自身业务逻辑配置入参进行处理；出参为动态组件在业务侧渲染时向外暴露的属性与方法，使渲染引擎可对其进行控制。
3.根据权利要求2所述的方法，其特征在于，步骤S1包括：
4.根据权利要求3所述的方法，其特征在于，步骤S2包括：
5.根据权利要求4所述的方法，其特征在于，步骤S21包括：
6.根据权利要求5所述的方法，其特征在于，步骤S4包括：
7.根据权利要求6所
8.一种基于低代码前端渲染引擎的双向交互系统，其特征在于，包括：
...【技术特征摘要】
1.一种基于低代码前端渲染引擎的双向交互方法，其特征在于，应用于低代码前端渲染引擎的双向交互系统，所述方法包括如下步骤：
2.根据权利要求1所述的方法，其特征在于，步骤s1中所述动态组件支持的可视化配置项包括组件编码componentcode、入参requestparams、出参exposes、预览图previewimg；组件编码为渲染引擎加载定制化开发的业务组件的唯一标识，渲染引擎通过组件编码获取定制化开发的业务组件进行渲染；预览图片为组件整体效果图的文件路径，用于在低代码系统搭建时快速预览组件效果；入参为动态组件在业务侧渲染时接收的...
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。