一种在线编译自定义组件的SDK方法及装置制造方法及图纸

本发明专利技术公开一种在线编译自定义组件的SDK方法及装置，其中，该方法包括：在线编辑，实时预览视图的前端项目；SDK编译后端服务，用户打开在线编辑器，同时服务器创建临时存储文件夹，并扫描文件变动；当用户触发保存动作，后端服务检测文件改动开启文件编译过程；前端收到后端消息立即局部刷新文件渲染最新视图；刷新的组件通过属性面板可实时观察组件状态；属性面板填写项通过后端解析组件配置脚本生成，并提供给前端渲染；当用户触发保存分类，后端将开发好的脚本和源码储存，并删除临时分类。该方法及装置无需搭建本地环境，可通过浏览器线上编写代码实现实时编译和预览，并将编译错误信息展示在窗口上，通过编译的组件，用户可以创建分类保存。创建分类保存。创建分类保存。

【技术实现步骤摘要】
一种在线编译自定义组件的SDK方法及装置


[0001]本专利技术涉及远程编译领域，尤其是一种在线编译自定义组件的SDK方法及装置。

技术介绍

[0002]SDK即软件开发工具包，一般都是一些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合。
[0003]软件开发工具广义上指辅助开发某一类软件的相关文档、范例和工具的集合。
[0004]软件开发工具包是一些被软件工程师用于为特定的软件包、软件框架、硬件平台、操作系统等创建应用软件的开发工具的集合，一般而言SDK开发Windows平台下的应用程序所使用的SDK。它通过编译器、调试器、软件框架等来促进应用程序的创建。它可以简单的为某个程序设计语言提供应用程序接口API的一些文件，但也可能包括能与某种嵌入式系统通讯的复杂的硬件。一般的工具包括用于调试和其他用途的实用工具。
[0005]现有技术中，组件是针对各种编译平台的功能单独开发的，不同编译平台之间的组件无法适配，因此，为了实现代码向多种编译平台的投放，开发过程中需要对各种编译平台重复地进行组件开发，导致开发成本高，代码的交付效率低。
[0006]高并发访问会导致服务器压力增大、需要考虑负载均衡；组件需要根据前端使用的技术栈区别开发。目前如react、vue,他们编写组件方式略有不同，但接口层面是保持一致的。直接影响就是开发适应多技术栈需要更高开发成本。

技术实现思路

[0007]为解决传统的政企业务专线开通方法存在的上述问题，本专利技术提供一种在线编译自定义组件的SDK方法及装置，无需搭建本地环境，可通过浏览器线上编写代码实现实时编译和预览。
[0008]为实现上述目的，本专利技术采用下述技术方案：
[0009]在本专利技术一实施例中，提出了一种在线编译自定义组件的SDK方法，该方法包括：
[0010]S01、在线编辑，实时预览视图的前端项目；
[0011]S02、SDK编译后端服务，用户打开在线编辑器，同时服务器创建临时存储文件夹，并扫描文件变动；
[0012]S03、当用户触发保存动作，后端服务检测文件改动开启文件编译过程；
[0013]S04、前端收到后端消息立即局部刷新文件渲染最新视图；
[0014]S05、刷新的组件通过属性面板可实时观察组件状态；
[0015]S06、属性面板填写项通过后端解析组件配置脚本生成，并提供给前端渲染；
[0016]S07、当用户触发保存分类，后端将开发好的脚本和源码储存，并删除临时分类。
[0017]进一步地，所述S01包括：
[0018]S011、新建前端工程；
[0019]S012、在初始化时与SDK创建websocket心跳连接；
[0020]S013、使用输入框或文本编辑组件作为代码编写容器；
[0021]S014、添加保存按钮，触发保存动作时将输入框值通过心跳包传递给SDK处理；
[0022]S015、设计一个数组用于存放心跳包返回的日志；
[0023]S016、将数组返回的日志信息输出到浏览器；
[0024]S017、在收到心跳包返回编译完成消息，通知浏览器加载编译的组件地址，实现预览刷新。
[0025]进一步地，所述S02包括：
[0026]S021、搭建web服务，开启websocket协议；
[0027]S022、根据建立心跳包连接的用户名建立临时编译文件夹，并监听文件变动；
[0028]S023、将打包脚本封装为异步执行方法，并注册日志监听；
[0029]S024、当收到用户编译请求，服务通过运行异步方法执行编译，并将日志通过监听返回给浏览器。
[0030]进一步地，所述S03中文件编译通过ES模块打包程序执行。
[0031]进一步地，所述S03中文件编译的执行包括：后端程序将编译日志推送到前端，完成构建动作，后端服务返回文件路径通知前端刷新。
[0032]进一步地，所述S03中文件编译过程包括：
[0033]S031、将组件代码进行抽象语法树转换；
[0034]S032、读出代码中配置项；
[0035]S033、根据配置项写入组件开发模板；
[0036]S034、编译模版文件；
[0037]S035、通过websocket将编译信息返回。
[0038]进一步地，所述S04包括：文件编译完成后，浏览器通过心跳包收到刷新请求，同时更新浏览器界面显示最新组件。
[0039]进一步地，所述S07中的脚本为编译的产物javascript脚本；所述S07中的源码为通过编辑器编辑的产物，包括但不限于index.vue、index.jsx。
[0040]在本专利技术一实施例中，还提出了一种在线编译自定义组件的SDK装置，该装置包括：
[0041]编辑模块、在线编辑，实时预览视图的前端项目；
[0042]SDK编译模块、SDK编译后端服务，用户打开在线编辑器，同时服务器创建临时存储文件夹，并扫描文件变动；
[0043]文件编译模块、当用户触发保存动作，后端服务检测文件改动开启文件编译过程；
[0044]刷新模块、前端收到后端消息立即局部刷新文件渲染最新视图；
[0045]属性面板模块、刷新的组件通过属性面板可实时观察组件状态；
[0046]前端渲染模块、属性面板填写项通过后端解析组件配置脚本生成，并提供给前端渲染；
[0047]后端处理模块、当用户触发保存分类，后端将开发好的脚本和源码储存，并删除临时分类。
[0048]进一步地，所述编辑模块包括：
[0049]新建模块、新建前端工程；
[0050]心跳连接模块、在初始化时与SDK创建websocket心跳连接；
[0051]代码编写容器模块、使用输入框或文本编辑组件作为代码编写容器；
[0052]心跳包传递模块、添加保存按钮，触发保存动作时将输入框值通过心跳包传递给SDK处理；
[0053]日志模块、设计一个数组用于存放心跳包返回的日志；
[0054]日志信息输出模块、将数组返回的日志信息输出到浏览器；
[0055]加载编译模块、在收到心跳包返回编译完成消息，通知浏览器加载编译的组件地址，实现预览刷新。
[0056]进一步地，所述SDK编译模块包括：
[0057]协议开启模块、搭建web服务，开启websocket协议；
[0058]文件监听模块、根据建立心跳包连接的用户名建立临时编译文件夹，并监听文件变动；
[0059]构建打包模块、将打包脚本封装为异步执行方法，并注册日志监听；
[0060]执行与返回模块、当收到用户编译请求，服务通过运行异步方法执行编译，并将日志通过监听返回给浏览器。
[0061]进一步地，文件编译模块中文件编译通过ES模块打包程序执行。
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种在线编译自定义组件的SDK方法，其特征在于，该方法包括：S01、在线编辑，实时预览视图的前端项目；S02、SDK编译后端服务，用户打开在线编辑器，同时服务器创建临时存储文件夹，并扫描文件变动；S03、当用户触发保存动作，后端服务检测文件改动开启文件编译过程；S04、前端收到后端消息立即局部刷新文件渲染最新视图；S05、刷新的组件通过属性面板可实时观察组件状态；S06、属性面板填写项通过后端解析组件配置脚本生成，并提供给前端渲染；S07、当用户触发保存分类，后端将开发好的脚本和源码储存，并删除临时分类。2.根据权利要求1所述的在线编译自定义组件的SDK方法，其特征在于，所述S01包括：S011、新建前端工程；S012、在初始化时与SDK创建websocket心跳连接；S013、使用输入框或文本编辑组件作为代码编写容器；S014、添加保存按钮，触发保存动作时将输入框值通过心跳包传递给SDK处理；S015、设计一个数组用于存放心跳包返回的日志；S016、将数组返回的日志信息输出到浏览器；S017、在收到心跳包返回编译完成消息，通知浏览器加载编译的组件地址，实现预览刷新。3.根据权利要求1所述的在线编译自定义组件的SDK方法，其特征在于，所述S02包括：S021、搭建web服务，开启websocket协议；S022、根据建立心跳包连接的用户名建立临时编译文件夹，并监听文件变动；S023、将打包脚本封装为异步执行方法，并注册日志监听S024、当收到用户编译请求，服务通过运行异步方法执行编译，并将日志通过监听返回给浏览器。4.根据权利要求1所述的在线编译自定义组件的SDK方法，其特征在于，所述S03中文件编译通过ES模块打包程序执行。5.根据权利要求1所述的在线编译自定义组件的SDK方法，其特征在于，所述S03中文件编译的执行包括：后端程序将webpack日志推送到前端，完成构建动作，后端服务返回文件路径通知前端刷新。6.根据权利要求1所述的在线编译自定义组件的SDK方法，其特征在于，所述S03中文件编译过程包括：S031、将组件代码进行抽象语法树转换；S032、读出代码中配置项；S033、根据配置项写入组件开发模板；S034、编译模版文件；S035、通过websocket将编译信息返回。7.根据权利要求1所述的在线编译自定义组件的SDK方法，其特征在于，所述S04包括：文件编译完成后，浏览器通过心跳包收到刷新请求，同时更新浏览器界面显示最新组件。8.根据权利要求1所述的在线编译自定义组件的SDK方法，其特征在于，所述S07中的脚
本为编译的产物javascript脚本；所述S07中的源码为通过编辑器编辑的产物，包括但不限于index.vue、index.jsx。9.一种在线编译自定义组件的SDK装置，其特征在于，该装置包括：编辑模块、在线编辑，实时预览视图的前端项目；SDK编译模块、SDK编译后端服务，用户打开在线编辑器，同时服务器创建临时存储文件夹，并扫描文件变动；文件编译模块、当用户触发保存动作，后端服务...

【专利技术属性】
技术研发人员：袁晓渝，向麒麟，
申请(专利权)人：中盈优创资讯科技有限公司，
类型：发明
国别省市：