低代码编译存储方法及基于功能流的Web三维场景低代码系统与流程

文档序号:32401112发布日期:2022-12-02 19:02阅读:150来源:国知局
低代码编译存储方法及基于功能流的Web三维场景低代码系统与流程
低代码编译存储方法及基于功能流的web三维场景低代码系统
技术领域
1.本发明涉及低代码技术领域,尤其涉及b/s架构的基于功能流的web三维场景低代码技术,具体地说涉及一种低代码编译存储方法及基于功能流的web三维场景低代码系统。


背景技术:

2.随着全球信息化的不断推进,巨型工厂的大规模流水线生产方式不再是创造财富的唯一途径,面向各类新型或传统行业的信息化服务明显增加,信息类无形产业将成为关键资源,因此如何快速、高效的完成信息化系统的建设就成为了能否抢占市场先机的重中之重,因此低代码平台也营运而生,低代码平台的优势相对于传统的软件开发模式拥有很多后者无法企及的优势,如开发效率,新应用程序的加速开发和交付可能是低代码开发最广为人知的优势,直观的用户界面、拖放功能、支持工具的简单集成以及一键交付选项,都有助于确保项目更快地开发周期,事实上,低代码解决方案可以将开发时间缩短多达 90%。
3.敏捷开发能够减少部署时间,使得业务变得具备敏捷性,能够快速的随着市场变化和新机遇的进行调整,团队可以快速创建和发布新的业务产品,以满足员工和客户不断变化的需求。
4.同时,低代码平台的生产率也非常高,低代码应用程序开发简化了开发过程。这意味着开发人员可以在更短的时间内构建更多应用程序,但这也同样带来了局限性,如在低代码平台上的开发人员只能在平台提供的组件上进行开发,无法对已有组件进行修改或自行添加组件。
5.目前市面上常规的低代码平台更倾向于实现以导航加分页的组织形式和图表、列表的展示方式的常规网站便捷开发,对用户自定义创建组件和组件共享等方面相对空白,同时涉及到三维场景的相关组件也没有较好的支持,因此国内在基于三维场景的web网站快捷开发领域相对空缺,涉及网站快捷搭建、三维场景开发以及细节功能点打磨等的情况时会出现以下问题:1、目前市场主流的低代码平台如简道云、明道云、ivx等,虽然在零代码平台建设方面综合表现出众,但都没有形成能够支持广大开发者自定义上传组件的平台,无法将创造组件特性下放至用户层面,开发人员在上述低代码平台中只能使用平台提供的组件,无法自行生产组件或者将生产的组件共享给其他人,因此平台组件库无法得到快速迭代与更新。
6.2、基于三维场景的低代码平台基本空白,而且web三维场景开发涉及的技术栈较深,开发难度相对较高,因此工程开发周期普遍较长,更新迭代相对较慢,而且上述类型工程普遍较重,可扩展性较差,针对不同应用场景重复开发的工作较多。


技术实现要素:

7.为了克服上述现有技术中存在的缺陷和不足,本发明提供了一种低代码编译存储
方法及基于功能流的web三维场景低代码系统。本发明第一方面提供了一种低代码编译存储方法,其发明目的在于解决现有技术的低代码平台存在的开发人员无法自行生产组件或者将生产的组件共享给他人,平台组件库无法得到快速迭代与更新的问题。
8.本发明第二方面提供了一种基于功能流的web三维场景低代码系统,其发明目的在于解决现有技术中三维场景的低代码平台的空白,同时结合上述低代码编译存储方法解决低代码平台组件库无法得到快速迭代与更新的问题。
9.本发明的主要发明点在于,通过低代码编译存储方法,提供在web页面上的低代码编辑功能,支持用户在平台内基于三维场景的任意颗粒度的组件开发,外部输入的代码段经过序列化处理后,进行可行性与安全性校验,通过可行性和安全性校验之后,发送至服务端存储至组件库,以实现平台组件库的快速迭代与更新。
10.本发明的基于功能流的web三维场景低代码系统,基于b/s架构,对外部输入模型文件进行解析和渲染,构建web端低代码平台,支持用户在平台内基于三维场景的任意颗粒度的组件开发,开发完成的组件支持上传至组件库共享给其他用户,在组件管理界面通过类流程图的配置方式把组件进行组合与连接,形成功能流关联三维模型交互时间,实现通过三维场景交互事件触发的定义功能集合的低代码工程的快捷开发,特别适用于存在三维场景需求的快速迭代开发。
11.为了解决上述现有技术中存在的问题,本发明是通过下述技术方案实现的。
12.本发明第一方面提供了一种低代码编译存储方法,该方法包括以下步骤:s1、获取到外部输入的组件代码段;s2、对s1步骤获取到的外部输入的组件代码段进行安全性校验,所述安全性校验是指,对获取到的组件代码段进行编码处理,将编码后的字符串对象通过正则表达式匹配校验其是否存在攻击性代码;若存在攻击性代码则抛出安全性异常,未通过安全性校验;若不存在攻击性代码,则通过安全性校验;s3、对s1步骤获取到的外部输入的组件代码段进行可行性校验,所述可行性校验是指,通过正则表达式匹配组件代码是否符合通用语法标准,通过客户端异常捕获机制在闭包状态下执行组件功能代码,若捕获到异常则组件代码存在可行性问题,抛出异常信息;若未捕获到异常,则组件代码可行性正常;s4、在s1步骤获取到的外部输入的组件代码通过了安全性校验和可行性校验之后,将组件代码还原,生成组件实例并保存至系统组件库中。
13.进一步的,s2步骤中,对获取到的组件代码段进行编码处理,具体是指,对获取到的组件代码段进行escape编码处理。
14.进一步的,s4步骤中,生成组件实例并保存至系统组件库,具体是指,在验证组件代码的安全性和可行性后,构建组件实例并设置必要属性后,通过http请求发送至服务端,由服务端存储至系统组件库中。
15.更进一步的,所述必要属性包括创建人、创建时间、组件名称、组件唯一标识、代码序列化字段、初始钩子函数和终了钩子函数。
16.进一步的,s3步骤中的可行性校验包括两个校验阶段,第一校验阶段是在客户端通过客户端异常捕获机制trycatch进行组件代码的可行性校验;第二校验阶段是指组件代码不会使得当前客户端陷入崩溃或页面频繁卡顿的状态。
17.更进一步的,在第一校验阶段中,使用正则表达式匹配组件代码是否符合通用语法标准,在客户端闭包模式下执行组件代码,利用客户端异常捕获机制trycatch进行可行性校验,若捕获到异常则组件代码存在可行性问题,抛出异常信息,若未捕获到异常,则组件代码通过可行性第一阶段校验。
18.更进一步的,在第二校验阶段中,通过eval函数将组件代码在客户端执行若干次,通过status监听当前页面渲染帧率,若帧率低于10则判断造成影响,组件代码可行性第二阶段校验不予校验通过;若未捕获到异常或帧率低于10,则组件代码通过可行性第二阶段校验。
19.本发明第二方面提供了一种基于功能流的web三维场景低代码系统,该系统包括三维场景渲染交互模块、低代码编译存储模块和组件资源实施调度模块;所述三维场景渲染交互模块,用于对模型文件以及与模型文件对应的模型交互配置文件进行解析,在web页面上实现三维场景可视化展示;通过对客户端交互事件的捕捉和封装,形成基于三维场景的动态交互事件捕捉回调机制,为基于交互事件触发功能流提供触发接口;通过对三维场景中内实例进行封装和外链,为系统组件库内的组件提供公用的三维场景自定义操作外部接口;三维场景渲染交互模块在组件编辑页面将所有可交互模型实例和支持的交互方式以列表形式展示;所述低代码编译存储模块,用于对组件进行新建、编辑和保存;在功能流执行期间,对组件的整个生命周期进行统筹管理;其中,对组件的编辑是在web网页内选择组件并编辑组件代码;所述低代码编译存储模块对编辑的组件代码段进行编码处理,然后对编码后的字符串对象进行安全性校验,同时对编辑的组件代码进行可行性校验,当其通过了安全性校验和可行性校验之后,将组件代码还原,生成组件实例并保存至系统组件库中;所述安全性校验是指,对编辑的组件代码进行编码处理,将编码后的字符串对象通过正则表达匹配校验其是否存在攻击性代码;若存在攻击性代码则抛出安全性异常,未通过安全性校验;若不存在攻击性代码,则通过安全性校验;所述可行性校验是指,通过正则表达匹配组件代码是否符合通用语法标准,通过客户端异常捕获机制在闭包状态下执行组件功能代码,若捕获到异常则组件代码存在可行性问题,抛出异常信息;若未捕获到异常,则组件代码可行性正常;所述组件资源实施调度模块,用于可交互配置的功能流管理,支持用户按照实际业务需求将可供选择的组件以绘制流程图的方式进行排列、组合、连接构建功能流,绑定模型交互事件并最终在客户端呈现对应功能;所述可供选择的组件包括由低代码编译存储模块编辑并存储在系统组件库中的组件,以及系统预制组件。
20.所述模型文件通过解析与加载后,在三维场景呈现的模型实例与所述交互配置文件内实例通过唯一标识id属性与模型实例name属性进行匹配。
21.在web页面上实现三维场景可视化展示,是通过webgl技术在客户端实现三维空间的可视化展示,通过解析与加载输入的模型文件在三维空间中渲染出模型实例。
22.三维场景中的各类实例包括对三维空间的scene、camera、control和redner对象进行封装,通过第三方库的api接口构建出公用的三维场景自定义操作外部接口。
23.所述模型文件为obj+mtl格式文件或fbx格式文件。
24.所述对客户端交互时间的捕捉和封装,具体是指,通过捕获浏览器当前页签内dom元素最上层父级节点,在上述节点通过addeventlistener方法绑定的鼠标左键按下、鼠标左键抬起回调方法,在用户通过鼠标触发模型的点击事件时,遍历客户端缓存内可以交互模型列表,通过位移标识id匹配对应的功能流对象,通过以不断轮询的方式查看注册事件队列是否存在待触发的监听事件,建立客户端的事件订阅与监听机制。
25.所述组件资源实时调度模块中用于可交互配置的功能流管理,是通过可交互配置的功能流管理的web页面实现的,该web页面通过h5+css技术实现;在该web页面中,系统组件库中的组件和系统预制组件以列表形式展示,在系统组件库中的组件和系统预制组件的显示列表中,可通过关键词搜索组件。
26.所述组件资源实施调度模块中设置有自定义组件配置页面,用户可将系统组件库中的组件和系统预制组件的显示列表中的任意组件添加到自定义组件配置页面进行配置;所述配置是指,用户通过拖拽或点选的方式,按照业务需求将当前页面中的或系统预制组件以绘制流程图的方式进行排列、组合和连接,构建功能流,然后对构建的功能流进行完整性校验,通过完整性校验后,生成的功能流绑定至三维场景交互事件的钩子函数中。
27.当三维场景下交互事件触发后,实施从服务端获取对应交互时间的功能流对象。
28.所述功能流是指,由功能流入口节点、系统组件库内组件、系统预制组件、和功能流出口节点,通过类流程图的交互方式在web端由用户自定义配置的可正常由一条主线执行的功能组件集合;功能流出口节点作为功能流结束时执行结束节点。
29.所述功能流对象为一个包含若干组件的数组,解析组件的过程包括:针对数组中的第一个组件对象,调用eval函数执行数组中第一个组件的初始化钩子函数;进行第一个组件对象的执行;在第一个组件的组件代码执行完毕后运行该第一个组件的终了钩子函数,同时触发数组内下一个组件的初始化钩子函数;通过上述解析组件形成组件主动触发的链式执行过程;若系统检测到存在下一置位组件则重复上述解析组件操作;若未检测到下一置位要执行的组件,则判断为执行到最后一个组件的终了钩子函数,至此功能流运行结束。
30.对三维场景中内实例进行封装和外链,具体是指,对当前三维场景库提供的原生api接口进行二次功能开发,在模型加载与解析阶段对模型实例进行捕获、封装、存储、添加用于触发模型交互的必要属性,同时对外侧,也就是用户开发的功能组件作用域内设置可供调用的接口。
31.所述系统预制组件包括返回视角初始位置组件、视角定位组件、模型显隐控制组件、模型颜色控制组件和环境天气控制组件。
32.进一步的,低代码编译存储模块中,对编辑的组件代码段进行编码处理,具体是指,对获取到的组件代码段进行escape编码处理。
33.进一步的,低代码编译存储模块中,生成组件实例并保存至系统组件库,具体是指,在验证组件代码的安全性和可行性后,构建组件实例并设置必要属性后,通过http请求发送至服务端,由服务端存储至系统组件库中。
34.更进一步的,所述必要属性包括创建人、创建时间、组件名称、组件唯一标识、代码序列化字段、初始钩子函数和终了钩子函数。
35.进一步的,低代码编译存储模块中的可行性校验包括两个校验阶段,第一校验阶段是在客户端通过客户端异常捕获机制trycatch进行组件代码的可行性校验;第二校验阶段是指组件代码不会使得当前客户端陷入崩溃或页面频繁卡顿的状态。
36.更进一步的,在第一校验阶段中,使用正则表达式匹配组件代码是否符合通用语法标准,在客户端闭包模式下执行组件代码,利用客户端异常捕获机制trycatch进行可行性校验,若捕获到异常则组件代码存在可行性问题,抛出异常信息,若未捕获到异常,则组件代码通过可行性第一阶段校验。
37.更进一步的,在第二校验阶段中,通过eval函数将组件代码在客户端执行若干次,通过status监听当前页面渲染帧率,若帧率低于10则判断造成影响,组件代码可行性第二阶段校验不予校验通过;若未捕获到异常或帧率低于10,则组件代码通过可行性第二阶段校验。
38.与现有技术相比,本发明所带来的有益的技术效果表现在:1、本发明的低代码编译存储方法,用户可以在平台内基于三维场景的任意颗粒度的组件开发,开发完成的组件通过本发明的低代码编译存储方法上传至系统组件库共享给其他用户。本发明的低代码编译存储方法,对获取的组件代码段进行可行性和安全性校验,确保了新编辑的组件代码的安全,以及编辑的组件代码可在低代码平台实现其功能,解决现有低代码平台组件库无法得到快速迭代与更新的问题。
39.2、本发明的基于功能流的web三维场景低代码系统是基于b/s架构,针对目前基于三维场景web网页开发周期长、迭代速度慢的痛点,通过对外部输入的功能代码和三维模型进行解析和逻辑绑定,结合三维场景的交互回调机制,跳过繁杂的编译、部署等操作,实现web端三维场景相关网页的敏捷式迭代与开发。
附图说明
40.为了更清楚地说明本发明实施例的技术方案,下面将对实施例描述所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
41.图1是本发明低代码系统的业务流程图;图2为本发明三维场景渲染交互模块示意图;图3为本发明低代码编译存储方法流程图;图4是本发明的组件资源实施调度模块架构图。
具体实施方式
42.下面将结合本发明说明书附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本发明保护的范围。
43.实施例1作为本发明一较佳实施例,参照说明书附图1所示,本实施例公开了一种低代码编
译存储方法,该方法包括以下步骤:s1、获取到外部输入的组件代码段;s2、对s1步骤获取到的外部输入的组件代码段进行安全性校验,所述安全性校验是指,对获取到的组件代码段进行编码处理,将编码后的字符串对象通过正则表达匹配校验其是否存在攻击性代码;若存在攻击性代码则抛出安全性异常,未通过安全性校验;若不存在攻击性代码,则通过安全性校验;s3、对s1步骤获取到的外部输入的组件代码段进行可行性校验,所述可行性校验是指,通过正则表达匹配组件代码是否符合通用语法标准,通过客户端异常捕获机制在闭包状态下执行组件功能代码,若捕获到异常则组件代码存在可行性问题,抛出异常信息;若未捕获到异常,则组件代码可行性正常;s4、在s1步骤获取到的外部输入的组件代码通过了安全性校验和可行性校验之后,将组件代码还原,生成组件实例并保存至系统组件库中。
44.作为一个示例,附图1所示的仅仅是本实施例的一种实施方式,根据附图1所示,该低代码编译存储方法具体流程为:获取外部输入组件代码段,对组件代码段进行序列化编码处理,将编码后的字符串对象通过正则表达式匹配组件代码是否符合通用语法标准,是否完整,通过客户端异常捕获机制在闭包状态下执行组件功能代码,若捕获到异常则组件代码存在可行性问题,抛出异常信息;当克服了异常信息之后,重新获取外部输入组件代码段,再次进行完整性及可行性校验;若未捕获到异常,则组件代码可行性正常;完成可行性校验之后,进行安全性校验,该安全性校验是指,将编码后的字符串对象通过正则表达式匹配校验其是否存在攻击性代码;若存在攻击性代码则抛出安全性异常,未通过安全性校验;若不存在攻击性代码,则通过安全性校验;若无法通过安全性校验,则对组件代码进行无效化处理;外部输入的组件代码通过了安全性校验和可行性校验之后,将组件代码还原,生成组件实例并保存至系统组件库中。
45.作为又一个示例,本实施例中的低代码编译存储方法,其流程步骤还可以是:获取外部输入的组件代码段,对组件代码段进行序列化编码处理,将编码后的字符串对象先进行安全性校验,若无法通过安全性校验则将该代码做无效化处理,若可以通过安全性校验,再进行可行性校验。
46.作为又一个示例,在低代码编译存储方法中,可行性校验和安全性校验同时进行,将可行性校验和安全性校验的校验结果汇总之后,再确定下一步处理流程,若通过了安全性校验,没有通过可行性校验,则抛出异常信息,提醒开发人员对代码进行重新编辑;对重新编辑后的代码段再次同时进行可行性校验和安全性校验。若通过了可行性校验,未通过安全性校验,则对该代码段进行无效化处理。只有可行性校验和安全性校验均通过,才将组件代码还原,生成组件实例并保存至系统组件库中。
47.实施例2作为本发明又一较佳实施例,本实施例是对上述实施例1中的具体实施方式的补充阐述。
48.作为本实施例的一种实施方式,在上述一种低代码编译存储方法的s2步骤中,对
获取到的组件代码段进行编码处理,具体是指,对获取到的组件代码段进行escape编码处理。
49.作为一个示例,对获取到的组件代码进行序列化编码处理的方式还包括其他可用编码方式,在此本技术不作限定。
50.作为本实施例的又一种实施方式,上述实施例1中提供的几种示例中,可行性校验和安全性校验均通过后,将组件代码还原,生成组件实例并保存至系统组件库中。其中,生成组件实例并保存至系统组件库,具体是指,在验证组件代码的安全性和可行性后,构建组件实例并设置必要属性后,通过http请求发送至服务端,由服务端存储至系统组件库中。
51.作为一个示例,所述必要属性包括创建人、创建时间、组件名称、组件唯一标识、代码序列化字段、初始钩子函数和终了钩子函数。
52.实施例3作为本发明又一较佳实施例,本实施例是对实施例1和实施例2的补充。在本实施例中,上述实施例1中提供的几种示例中的可行性校验包括两个校验阶段,第一校验阶段是在客户端通过客户端异常捕获机制trycatch进行组件代码的可行性校验;第二校验阶段是指组件代码不会使得当前客户端陷入崩溃或页面频繁卡顿的状态。
53.其中,在第一校验阶段中,使用正则表达式匹配组件代码是否符合通用语法标准,在客户端闭包模式下执行组件代码,利用客户端异常捕获机制trycatch进行可行性校验,若捕获到异常则组件代码存在可行性问题,抛出异常信息,若未捕获到异常,则组件代码通过可行性第一阶段校验。
54.在第二校验阶段中,通过eval函数将组件代码在客户端执行若干次,通过status监听当前页面渲染帧率,若帧率低于10则判断造成影响,组件代码可行性第二阶段校验不予校验通过;若未捕获到异常或帧率低于10,则组件代码通过可行性第二阶段校验。
55.实施例4作为本发明又一较佳实施例,参照说明书附图1和附图2所示,本实施例公开了一种基于功能流的web三维场景低代码系统,该系统包括三维场景渲染交互模块、低代码编译存储模块和组件资源实施调度模块。支持对多种类型的模型文件及交互配置文件进行解析,实现在web页面的三维场景可视化展示;支持可交互模型实例和交互方式以列表形式展示;通过客户端交互事件进行捕捉和二次封装,形成基于三维场景的动态交互事件捕捉回调机制,为基于交互事件触发功能流提供触发接口;通过对三维场景中内实例进行封装和外链,为系统内的组件提供公用的三维场景自定义操作外部接口;提供在web页面上的代码编辑功能,支持用户在平台内基于三维场景的任意颗粒度的组件开发,外部输入的代码段经过序列化处理后由可行性与安全性校验模块和安全校验模块进行验证,发送至服务端存储至组件库;提供功能流的配置管理页面,支持用户按照实际业务需求将任意组件库中的组件或系统预制组件以绘制流程图的方式进行排列、组合、连接构建功能流,绑定模型交互事件并最终在客户端呈现对应功能。本发明中的系统支持开发者进行组件的创建、上传和共享,使用web页面以绘制流程图的方式将组件库中的组件进行排列、组合、连接形成功能流,最终功能流与三维模型进行逻辑绑定实现工程中各个功能模块的开发,结合三维场景的交互回调机制,跳过繁杂的编译、部署等操作,实现web端三维场景相关网页的敏捷式迭代与开发。
56.具体的,如图2所示,所述三维场景渲染交互模块,用于对模型文件以及与模型文件对应的模型交互配置文件进行解析,在web页面上实现三维场景可视化展示;通过对客户端交互事件的捕捉和封装,形成基于三维场景的动态交互事件捕捉回调机制,为基于交互事件触发功能流提供触发接口;通过对三维场景中内实例进行封装和外链,为系统组件库内的组件提供公用的三维场景自定义操作外部接口;三维场景渲染交互模块在组件编辑页面将所有可交互模型实例和支持的交互方式以列表形式展示;如图3所示,所述低代码编译存储模块,用于对组件进行新建、编辑和保存;在功能流执行期间,对组件的整个生命周期进行统筹管理;其中,对组件的编辑是在web网页内选择组件并编辑组件代码;所述低代码编译存储模块对编辑的组件代码段进行编码处理,然后对编码后的字符串对象进行安全性校验,同时对编辑的组件代码进行可行性校验,当其通过了安全性校验和可行性校验之后,将组件代码还原,生成组件实例并保存至系统组件库中;所述安全性校验是指,对编辑的组件代码进行编码处理,将编码后的字符串对象通过正则表达匹配校验其是否存在攻击性代码;若存在攻击性代码则抛出安全性异常,未通过安全性校验;若不存在攻击性代码,则通过安全性校验;所述可行性校验是指,通过正则表达匹配组件代码是否符合通用语法标准,通过客户端异常捕获机制在闭包状态下执行组件功能代码,若捕获到异常则组件代码存在可行性问题,抛出异常信息;若未捕获到异常,则组件代码可行性正常;如图4所示,所述组件资源实施调度模块,用于可交互配置的功能流管理,支持用户按照实际业务需求将可供选择的组件以绘制流程图的方式进行排列、组合、连接构建功能流,绑定模型交互事件并最终在客户端呈现对应功能;所述可供选择的组件包括由低代码编译存储模块编辑并存储在系统组件库中的组件,以及系统预制组件。
57.实施例5作为本发明又一较佳实施例,本实施例是对上述实施例4的补充说明。在本实施例中,上述实施例4中描述的模型文件通过解析与加载后,在三维场景呈现的模型实例与所述交互配置文件内实例通过唯一标识id属性与模型实例name属性进行匹配。
58.其中,在web页面上实现三维场景可视化展示,是通过webgl技术在客户端实现三维空间的可视化展示,通过解析与加载输入的模型文件在三维空间中渲染出模型实例。
59.三维场景中的各类实例包括对三维空间的scene、camera、control和redner对象进行封装,通过第三方库的api接口构建出公用的三维场景自定义操作外部接口。
60.作为一个示例,上述的模型文件为obj+mtl格式文件或fbx格式文件。
61.作为一个示例,所述对客户端交互时间的捕捉和封装,具体是指,通过捕获浏览器当前页签内dom元素最上层父级节点,在上述节点通过addeventlistener方法绑定的鼠标左键按下、鼠标左键抬起回调方法,在用户通过鼠标触发模型的点击事件时,遍历客户端缓存内可以交互模型列表,通过位移标识id匹配对应的功能流对象,通过以不断轮询的方式查看注册事件队列是否存在待触发的监听事件,建立客户端的事件订阅与监听机制。
62.作为一个示例,所述组件资源实时调度模块中用于可交互配置的功能流管理,是通过可交互配置的功能流管理的web页面实现的,该web页面通过h5+css技术实现;在该web
页面中,系统组件库中的组件和系统预制组件以列表形式展示,在系统组件库中的组件和系统预制组件的显示列表中,可通过关键词搜索组件。
63.作为一个示例,所述组件资源实施调度模块中设置有自定义组件配置页面,用户可将系统组件库中的组件和系统预制组件的显示列表中的任意组件添加到自定义组件配置页面进行配置;所述配置是指,用户通过拖拽或点选的方式,按照业务需求将当前页面中的或系统预制组件以绘制流程图的方式进行排列、组合和连接,构建功能流,然后对构建的功能流进行完整性校验,通过完整性校验后,生成的功能流绑定至三维场景交互事件的钩子函数中。当三维场景下交互事件触发后,实施从服务端获取对应交互时间的功能流对象。
64.作为一个示例,所述功能流是指,由功能流入口节点、系统组件库内组件、系统预制组件、和功能流出口节点,通过类流程图的交互方式在web端由用户自定义配置的可正常由一条主线执行的功能组件集合;功能流出口节点作为功能流结束时执行结束节点。
65.所述功能流对象为一个包含若干组件的数组,解析组件的过程包括:针对数组中的第一个组件对象,调用eval函数执行数组中第一个组件的初始化钩子函数;进行第一个组件对象的执行;在第一个组件的组件代码执行完毕后运行该第一个组件的终了钩子函数,同时触发数组内下一个组件的初始化钩子函数;通过上述解析组件形成组件主动触发的链式执行过程;若系统检测到存在下一置位组件则重复上述解析组件操作;若未检测到下一置位要执行的组件,则判断为执行到最后一个组件的终了钩子函数,至此功能流运行结束。
66.对三维场景中内实例进行封装和外链,具体是指,对当前三维场景库提供的原生api接口进行二次功能开发,在模型加载与解析阶段对模型实例进行捕获、封装、存储、添加用于触发模型交互的必要属性,同时对外侧,也就是用户开发的功能组件作用域内设置可供调用的接口。所述系统预制组件包括返回视角初始位置组件、视角定位组件、模型显隐控制组件、模型颜色控制组件和环境天气控制组件。
67.低代码编译存储模块中,对编辑的组件代码段进行编码处理,具体是指,对获取到的组件代码段进行escape编码处理。低代码编译存储模块中,生成组件实例并保存至系统组件库,具体是指,在验证组件代码的安全性和可行性后,构建组件实例并设置必要属性后,通过http请求发送至服务端,由服务端存储至系统组件库中。所述必要属性包括创建人、创建时间、组件名称、组件唯一标识、代码序列化字段、初始钩子函数和终了钩子函数。
68.进一步的,低代码编译存储模块中的可行性校验包括两个校验阶段,第一校验阶段是在客户端通过客户端异常捕获机制trycatch进行组件代码的可行性校验;第二校验阶段是指组件代码不会使得当前客户端陷入崩溃或页面频繁卡顿的状态。在第一校验阶段中,使用正则表达式匹配组件代码是否符合通用语法标准,在客户端闭包模式下执行组件代码,利用客户端异常捕获机制trycatch进行可行性校验,若捕获到异常则组件代码存在可行性问题,抛出异常信息,若未捕获到异常,则组件代码通过可行性第一阶段校验。在第二校验阶段中,通过eval函数将组件代码在客户端执行若干次,通过status监听当前页面渲染帧率,若帧率低于10则判断造成影响,组件代码可行性第二阶段校验不予校验通过;若未捕获到异常或帧率低于10,则组件代码通过可行性第二阶段校验。
69.实施例6作为本发明又一较佳实施例,如图1所示,基于功能流的web三维场景低代码系统,
括三维场景渲染交互模块、低代码编译存储模块、组件资源实时调度模块,其中三维场景渲染交互模块支持对业内通用的obj+mtl、fbx等类型的模型文件,以及基于json格式且与模型内组织结构对应的交互配置文件进行加载和解析,在三维场景呈现的模型实例与所述交互配置文件内实例支持通过唯一标识id属性与模型实例name属性进行匹配,实现模型在三维场景中的识别,以及在web页面的三维场景可视化展示,三维场景渲染交互模块通过客户端交互事件进行捕捉和二次封装,形成基于三维场景的动态交互事件捕捉回调机制,为基于交互事件触发功能流提供触发接口;通过对三维场景中内实例进行封装和外链,为系统内的组件提供公用的三维场景自定义操作外部接口;低代码编译存储模块提供在web页面上的代码编辑功能,通过web网页在线编辑器实现用户在客户端的组件代码新建与编辑,外部输入的代码段经过序列化处理后由可行性与安全性校验模块和安全校验模块进行验证,发送至服务端存储至组件库;组件资源实时调度模块提供可交互配置的功能流管理页面,支持用户如图2所示按照实际业务需求将任意组件库中的组件或系统预制组件以绘制流程图的方式进行排列、组合、连接,最终在客户端呈现,提供功能流的存储、组织管理以及执行功能。
70.所述交互配置文件,为包含模型可交互实例唯一标识的json格式的配置文件,web页面通过解析配置文件和模型文件,将交互的模型对象以列表的形式展示;所述模型文件为业内普遍支持的obj+mtl格式文件或fbx格式文件。
71.所述动态交互事件捕捉回调机制,具体实现是将客户端交互事件进行捕捉和二次封装,通过捕获浏览器当前页签内dom元素最上层父级节点,在上述节点通过addeventlistener方法绑定鼠标左键按下、鼠标左键抬起回调方法,在用户通过鼠标触发模型的点击事件时,遍历客户端缓存内可交互模型列表,通过唯一标识id匹配对应的功能流对象;所述可行性校验,如图3所示,具体实现其一是在客户端通过异常捕获机制trycatch进行功能代码的可行性校验,使用正则表达式匹配功能代码是否符合通用语法标准,在客户端闭包模式下执行组件功能代码,利用客户端异常捕获机制在进行可行性校验,若捕获到异常则组件功能代码存在可行性问题,抛出异常信息,若未捕获到异常则可行性第一阶段验证通过;所述可行性校验,具体指运行其二指组件代码不会使得当前客户端陷入崩溃的或页面频繁卡顿的状态,客户端陷入崩溃则当前组件代码编辑页面重置,通过status监听当前页面渲染帧率,若帧率低于10则判断为造成影响,组件代码可行性不予验证通过,若未捕获到异常或帧率低于10的情况发生,则功能组件代码则可行性第二阶段验证通过;所述安全性校验模块,具体实现是在客户端通过正则表达式校验代码中是否包含非法字段,若检查出非法字段,则抛出异常安全校验不通过,若未检查出非法字段则校验通过;所述功能流,具体实现是有功能流入口、组件库内组件、系统预制组件、功能流出口等节点,通过类流程图的交互方式在web端由用户自定义配置的可由一条主线或多条主线并行执行的功能组件集合,其中功能流入口作为启动节点,以功能流出口未结束节点。
72.所述三维场景中内实例进行封装和外链,具体实现是对当前三维场景库提供的原生api接口进行二次功能开发,在模型加载与解析阶段对模型实例进行捕获、封装、存储,添
加用于触发模型交互的必要属性,同时对外侧,也就是用户开发的功能组件作用域内设置可供调用的接口。
73.所述功能流的存储、组织管理以及执行功能,组织结构如图4所示,具体实现是将web端配置的功能流管理页生产的功能流数据进行校验和存储,确保功能流完整执行的,提供功能流的触发、执行、日志打印以及结束的钩子函数。
74.根据上述系统,基于功能流的web三维场景低代码系统实现的方法,包括以下步骤:对多种类型的模型文件以及与之对应的模型交互配置文件进行解析,实现在web页面的三维场景可视化展示,在三维场景呈现的模型实例与所述交互配置文件内实例支持通过唯一标识id属性与模型实例name属性进行匹配,在组件编辑页面将所有可交互模型实例和支持的交互方式以列表形式展示支持对交互事件进行捕捉和二次封装,形成基于三维场景的动态交互事件捕捉回调机制,为基于交互事件触发功能流提供触发接口;同时通过对三维场景中的各类实例进行封装和外链,为系统内的组件提供公用的三维场景自定义操作外部接口;低代码编译存储模块用户在客户端进行代码新建与编辑,外部输入的代码段经过序列化处理后由可行性与安全性校验模块和安全校验模块进行验证,确认代码无异常后由客户端生成组件对象实例,设置默认参数,发送至服务端存储到组件库中,提供组件整个生命周期的统筹管理功能,支持链式功能流执行期间,组件间的参数传递和延迟响应触发,组件生命周期包括:初始化、运行终止、结束;所述组件资源实时调度模块,提供功能流的配置管理页面,支持用户按照实际业务需求将任意组件库中的组件或系统预制组件以绘制流程图的方式进行排列、组合、连接构建功能流,绑定模型交互事件并最终在客户端呈现对应功能。
75.进一步的,上述中所述捕捉和二次封装,是指是通过捕获浏览器当前页签内dom元素最上层父级节点,在上述节点通过addeventlistener方法绑定鼠标左键按下、鼠标左键抬起回调方法,在用户通过鼠标触发模型的点击事件时,遍历客户端缓存内可交互模型列表,通过唯一标识id匹配对应的功能流对象,通过以不断轮询的方式查看注册事件队列是否存在待触发的监听事件,建立客户端的事件订阅与监听机制。
76.进一步的,上述中所述功能流,是指功能流对象为一个包含若干组件的数组,针对数组中的第一个组件对象,使用eval函数执行数组中第一个组件的初始化钩子函数,进行上述组件的执行状态,在组件代码执行完毕后运行上述组件的终了钩子函数,同时触发数组内下一个组件的初始化钩子函数,形成组件主动触发的链式执行,直到最后一个组件的终了钩子函数执行完毕,系统未检测到下一置为要执行的组件,至此功能流运行结束。
77.进一步的,上述中所述三维场景中内实例进行封装和外链,具体如下:a、对的原生三维场景api接口进行二次功能开发,具体实现以下接口:返回视角初始位置组件、视角定位组件、模型显隐控制组件、模型颜色控制组件、环境天气控制组件;b、在模型加载与解析阶段对模型实例进行捕获、封装、存储,添加用于触发模型交互的必要属性,同时对外侧,也就是用户开发的功能组件作用域内设置可供调用的接口;进一步的,上述中所述系统预制组件,包括以下内容:返回视角初始位置组件、视角定位组件、模型显隐控制组件、模型颜色控制组件、环境天气控制组件。
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1