生成多平台样式的方法、装置、设备及存储介质制造方法及图纸

本发明专利技术涉及人工智能领域，公开了一种生成多平台样式的方法、装置、设备及存储介质，用于通过预置可视化面板和选定的适配平台生成样式内容，提高样式布局和移植样式内容的效率。生成多平台样式的方法包括：在预置可视化面板中按照预置业务对初始页面元素进行元素编辑并布局，得到目标页面元素；当接收到目标用户触发的样式生成指令时，从预置可视化面板的适配平台区域中确定目标用户选择的目标适配平台类型，不同的适配平台类型对应不同的标识；对目标页面元素按照层级关系生成初始样式内容；根据所述目标用户选择的目标适配平台类型确定多个不同的样式模板，并根据多个不同的样式模板对初始样式内容进行转换处理，得到不同的目标样式内容。

【技术实现步骤摘要】
生成多平台样式的方法、装置、设备及存储介质
本专利技术涉及人工智能领域，尤其涉及一种生成多平台样式的方法、装置、设备及存储介质。
技术介绍
随着前端技术的兴起，前端的开发框架也逐渐百花齐放，例如，用户界面的渐进式框架VUE、微信小程序以及安卓ANDROID，作为前端技术，每一种框架都离不开页面组件的编写，但是编写页面组件往往需要花费很多时间成本，而且每一个页面组件至少设置以下几种属性：位置，尺寸，颜色，实现过程很繁琐。目前已有的一些页面布局方式，由于页面的高度定制化，在使用这些页面布局方式处理前端页面展示时，存在局限性，虽然可以提高单个开发框架的页面开发速度，但对其他平台的可复用性较差，比如，采用原生脚本语言JavaScript开发的一套界面，移植到应用程序App或者微信小程序中，需要做更多的适配工作，几乎需要重新写一套样式布局内容。市面上现有的跨平台转换装置往往是先写出一个平台的样式，然后通过转换插件去做另一个平台的样式。这种方式存在两个弊端，一方面需要用内容去实现一个元素样式的编写再转换，样式布局和移植样式内容的效率较低；另一方面由于是一对一的，对市面上已有平台的适配性较差。例如，集成开发工具Xcode中storyboard是一款非常优秀的可视化界面开发工具，然而，它只是生成能够让编译器识别的内容，很难应用到其他平台。
技术实现思路
本专利技术的主要目的在于解决了现有的页面布局方式以及跨平台转换装置样式布局和移植样式内容的效率较低以及适配性较差的技术问题。为实现上述目的，本专利技术第一方面提供了一种生成多平台样式的方法，包括：在预置可视化面板中按照预置业务对初始页面元素进行元素编辑并布局，得到目标页面元素，所述预置可视化面板包括适配平台区域，所述元素编辑并布局包括确定所述初始页面元素的属性信息以及任意两个所述初始页面元素之间的层级关系；当接收到目标用户触发的样式生成指令时，从所述预置可视化面板的适配平台区域中确定所述目标用户选择的目标适配平台类型，不同的适配平台类型对应不同的标识；对所述目标页面元素按照所述层级关系生成初始样式内容；根据所述目标用户选择的目标适配平台类型确定多个不同的样式模板，并根据所述多个不同的样式模板对所述初始样式内容进行转换处理，得到不同的目标样式内容，所述目标样式内容用于采用预置类型的文件保存并被对应的目标适配平台引用。可选的，在本专利技术第一方面的第一种实现方式中，所述在预置可视化面板中按照预置业务对初始页面元素进行元素编辑并布局，得到目标页面元素，所述预置可视化面板包括适配平台区域，所述元素编辑并布局包括确定所述初始页面元素的属性信息以及任意两个所述初始页面元素之间的层级关系，包括：在预置可视化面板的组件库区域中按照预置业务选取初始页面元素，所述初始页面元素包括按钮、文字、图片和进度条；将所述初始页面元素拖拽到所述预置可视化面板的视图编辑区域，并将任意两个所述初始页面元素的层级关系配置为父子组件关系；在所述预置可视化面板的属性编辑区域中对所述初始页面元素进行属性调整，得到目标页面元素；在所述预置可视化面板的视图层级区域中展示所述目标页面元素的层级关系。可选的，在本专利技术第一方面的第二种实现方式中，所述当接收到目标用户触发的样式生成指令时，从所述预置可视化面板的适配平台区域中确定所述目标用户选择的目标适配平台类型，不同的适配平台类型对应不同的标识，包括：当接收到目标用户触发的样式生成指令时，从所述预置可视化面板的适配平台区域中获取所述目标用户选择的目标适配平台类型对应的标识，不同的适配平台类型对应不同的标识；根据所述目标用户选择的目标适配平台的标识获取对应的目标适配平台数据，所述目标适配平台数据包括所述目标适配平台类型和对应的目标适配平台版本号。可选的，在本专利技术第一方面的第三种实现方式中，所述对所述目标页面元素按照所述层级关系生成初始样式内容，包括：从所述预置可视化面板的视图层级区域中确定所述目标页面元素的层级关系；从所述预置可视化面板的属性编辑区域中读取所述目标页面元素对应的属性信息，所述属性信息包括属性名称和属性值；对所述目标页面元素对应的属性信息按照所述层级关系和预置数据格式进行字符串拼接，得到初始样式内容，并对所述初始样式内容进行缓存，所述初始样式内容包括所述层级关系、尺寸信息、位置信息、边距信息、颜色信息、圆角信息和字体信息。可选的，在本专利技术第一方面的第四种实现方式中，所述根据所述目标用户选择的目标适配平台类型确定多个不同的样式模板，并根据所述多个不同的样式模板对所述初始样式内容进行转换处理，得到不同的目标样式内容，所述目标样式内容用于采用预置类型的文件保存并被对应的目标适配平台引用，包括：基于所述目标用户选择的目标适配平台类型生成并发送查询样式模板的请求，得到查询数据，所述查询数据包括多个不同的样式模板，所述多个不同的样式模板用于指示根据所述不同的适配平台类型预先设置的符合预置层叠样式表样式转换标准和预置编程语言规范的样式规则；对所述初始样式内容按照所述层级关系进行递归查询，得到多个目标页面元素的属性信息；判断所述多个不同的样式模板中是否存在相应的属性名称；若所述多个不同的样式模板中存在所述相应的属性名称，则根据所述相同的属性名称从所述多个不同的样式模板中获取对应的标准样式信息，所述标准样式信息包括可替换的样式代码；基于所述可替换的样式代码按照所述相应的属性名称替换相应的属性值，得到已替换的样式内容；将预置固定样式内容和所述已替换的样式内容进行组合，得到不同的目标样式内容，所述目标样式内容用于采用预置类型的文件保存并被对应的目标适配平台引用。可选的，在本专利技术第一方面的第五种实现方式中，所述将所述初始页面元素拖拽到所述预置可视化面板的视图编辑区域，并将任意两个所述初始页面元素的层级关系配置为父子组件关系，包括：对所述预置可视化面板中所述初始页面元素的拖拽操作进行监听；当监听到执行释放鼠标操作时，判断当前鼠标位置是否属于所述视图编辑区域；若所述当前鼠标位置不属于所述视图编辑区域，则取消所述拖拽操作；若所述当前鼠标位置属于所述视图编辑区域，则按照预设规则对所述初始页面元素进行编码；解析所述初始页面元素，并在所述预置可视化面板的属性编辑区域显示所述初始页面元素对应的属性信息，属所述性信息包括多个属性名称和对应的属性值；在所述视图编辑区域中将任意两个所述初始页面元素的层级关系设置为父子组件关系，父组件为上一层级，子组件为下一层级。可选的，在本专利技术第一方面的第六种实现方式中，所述在所述预置可视化面板的视图层级区域中展示所述目标页面元素的层级关系，包括：按照树形结构展示请求查询所述目标页面元素的编码和所述层级关系，得到根节点信息，并将所述根节点信息展示在所述预置可视化面板的视图层级区域中间位置；根据所述根节点信息获取任意相邻的两个层级对应的节点信息，并将所述任意相邻的两个层级对应的节点信息按照所述层级关系同时在所述预置可视化面板的视图层级区域中展示给目标用户。本专利技术第二方面提供了一种生成多平台样式的装置，包括：编辑模块，用于在预置可视化面板本文档来自技高网...

【技术保护点】
1.一种生成多平台样式的方法，其特征在于，所述生成多平台样式的方法包括：/n在预置可视化面板中按照预置业务对初始页面元素进行元素编辑并布局，得到目标页面元素，所述预置可视化面板包括适配平台区域，所述元素编辑并布局包括确定所述初始页面元素的属性信息以及任意两个所述初始页面元素之间的层级关系；/n当接收到目标用户触发的样式生成指令时，从所述预置可视化面板的适配平台区域中确定所述目标用户选择的目标适配平台类型，不同的适配平台类型对应不同的标识；/n对所述目标页面元素按照所述层级关系生成初始样式内容；/n根据所述目标用户选择的目标适配平台类型确定多个不同的样式模板，并根据所述多个不同的样式模板对所述初始样式内容进行转换处理，得到不同的目标样式内容，所述目标样式内容用于采用预置类型的文件保存并被对应的目标适配平台引用。/n

【技术特征摘要】
1.一种生成多平台样式的方法，其特征在于，所述生成多平台样式的方法包括：
在预置可视化面板中按照预置业务对初始页面元素进行元素编辑并布局，得到目标页面元素，所述预置可视化面板包括适配平台区域，所述元素编辑并布局包括确定所述初始页面元素的属性信息以及任意两个所述初始页面元素之间的层级关系；
当接收到目标用户触发的样式生成指令时，从所述预置可视化面板的适配平台区域中确定所述目标用户选择的目标适配平台类型，不同的适配平台类型对应不同的标识；
对所述目标页面元素按照所述层级关系生成初始样式内容；
根据所述目标用户选择的目标适配平台类型确定多个不同的样式模板，并根据所述多个不同的样式模板对所述初始样式内容进行转换处理，得到不同的目标样式内容，所述目标样式内容用于采用预置类型的文件保存并被对应的目标适配平台引用。


2.根据权利要求1所述的生成多平台样式的方法，其特征在于，所述在预置可视化面板中按照预置业务对初始页面元素进行元素编辑并布局，得到目标页面元素，所述预置可视化面板包括适配平台区域，所述元素编辑并布局包括确定所述初始页面元素的属性信息以及任意两个所述初始页面元素之间的层级关系，包括：
在预置可视化面板的组件库区域中按照预置业务选取初始页面元素，所述初始页面元素包括按钮、文字、图片和进度条；
将所述初始页面元素拖拽到所述预置可视化面板的视图编辑区域，并将任意两个所述初始页面元素的层级关系配置为父子组件关系；
在所述预置可视化面板的属性编辑区域中对所述初始页面元素进行属性调整，得到目标页面元素；
在所述预置可视化面板的视图层级区域中展示所述目标页面元素的层级关系。


3.根据权利要求1所述的生成多平台样式的方法，其特征在于，所述当接收到目标用户触发的样式生成指令时，从所述预置可视化面板的适配平台区域中确定所述目标用户选择的目标适配平台类型，不同的适配平台类型对应不同的标识，包括：
当接收到目标用户触发的样式生成指令时，从所述预置可视化面板的适配平台区域中获取所述目标用户选择的目标适配平台的标识，不同的适配平台类型对应不同的标识；
根据所述目标用户选择的目标适配平台的标识获取对应的目标适配平台数据，所述目标适配平台数据包括所述目标适配平台类型和对应的目标适配平台版本号。


4.根据权利要求1所述的生成多平台样式的方法，其特征在于，所述对所述目标页面元素按照所述层级关系生成初始样式内容，包括：
从所述预置可视化面板的视图层级区域中确定所述目标页面元素的层级关系；
从所述预置可视化面板的属性编辑区域中读取所述目标页面元素对应的属性信息，所述属性信息包括属性名称和属性值；
对所述目标页面元素对应的属性信息按照所述层级关系和预置数据格式进行字符串拼接，得到初始样式内容，并对所述初始样式内容进行缓存，所述初始样式内容包括所述层级关系、尺寸信息、位置信息、边距信息、颜色信息、圆角信息和字体信息。


5.根据权利要求4所述的生成多平台样式的方法，其特征在于，所述根据所述目标用户选择的目标适配平台类型确定多个不同的样式模板，并根据所述多个不同的样式模板对所述初始样式内容进行转换处理，得到不同的目标样式内容，所述目标样式内容用于采用预置类型的文件保存并被对应的目标适配平台引用，包括：
基于所述目标用户选择的目标适配平台类型生成并发送查询样式模板的请求，得到查询数据，所述查询数据包括多个不同的样式模板，所述多个不同的样式模板用于指示根据所述不同的适配平台类型预先设置的符合预置层叠样式表样式转换标准和预置编程语言规范的样式规则；
对所述初始...

【专利技术属性】
技术研发人员：周异成，
申请(专利权)人：平安国际智慧城市科技股份有限公司，
类型：发明
国别省市：广东;44