CN113485708A - 基于Sketch的跨平台界面开发方法和***、计算机设备和介质 - Google Patents

Abstract

本发明实施例公开一种基于Sketch的跨平台界面开发方法和***、计算机设备和介质。在一具体实施方式中，该方法包括：接收服务器发送的代码化界面设计组件，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；基于代码化界面设计组件利用Sketch插件生成界面布局文件，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；将界面布局文件上传至服务器，以使得服务器将界面布局文件传输至第三开发端以形成跨平台界面。该实施方式通过利用Sketch插件将自服务器接收的代码化界面设计组件生成界面布局文件，使第三开发端生成跨平台界面，实现了重复的无差异性的界面开发。

Description

基于Sketch的跨平台界面开发方法和***、计算机设备和 介质

技术领域

本发明涉及计算机技术。更具体地，涉及一种基于Sketch的跨平台界面开发方法和***、计算机设备和介质。

背景技术

随着业务开发需求的迭代，以及UI(User Interface)设计人员对设计稿的严格把控，如何节省设计与开发的时间以及彼此沟通的成本越来越成为开发与设计的关注点。但目前，因为不同项目组成员之间意见不同开发设计人员之间的代码权限，导致每一次界面开发过程均需要UI设计人员与开发人员重复进行冗余的界面设计和开发工作，从而浪费了大量的开发成本。

发明内容

本发明的目的在于提供一种，以解决现有技术存在的问题中的至少一个。

为达到上述目的，本发明采用下述技术方案：

本发明第一方面提供了一种基于Sketch的跨平台界面开发方法，应用于第一开发端，包括：

接收服务器发送的代码化界面设计组件，代码化界面设计组件来自第二开发端，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；

基于代码化界面设计组件利用Sketch插件生成界面布局文件，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；

将界面布局文件上传至服务器，以使得服务器将界面布局文件传输至第三开发端以形成跨平台界面。

在一些可选的实施例中，基于代码化界面设计组件利用Sketch插件生成界面布局文件进一步包括：

读取代码化界面设计组件的Web文件生成Web显示界面；

基于Web显示界面修改界面的显示参数和与显示参数对应的跨平台描述文件中的数据参数以创建图案面板；以及

拼接至少一个图案面板，根据拼接后的图案面板以及与每个图案面板对应的数据和图片生成界面布局文件。

在一些可选的实施例中，基于Web显示界面修改界面的显示参数和与显示参数对应的跨平台描述文件中的数据参数以创建图案面板进一步包括：

基于所述Web显示界面修改界面的显示参数；以及

利用数据联通桥将代码化界面设计组件由基于Flutter的数据转换为Web数据来调用与显示参数对应的跨平台描述文件中的数据参数并对其进行修改；以及

根据修改后的显示参数与数据参数的修改创建图案面板。

在一些可选的实施例中，显示参数包括画布尺寸、图案面板图形数量、图案面板标签属性、数据数量和数据值中的一个或多个。

在一些可选的实施例中，第一开发端包括素材库，素材库中存储多个图案面板素材，

根据修改后的显示参数与数据参数创建图案面板进一步包括：

根据修改后的显示参数和数据参数利用图案面板素材创建图案面板。

本发明第二方面提供一种跨平台界面开发方法，应用于第三开发端，包括：

接收服务器发送的界面布局文件，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片，其中，界面布局文件为基于代码化界面设计组件利用Sketch插件而生成的；

对界面布局文件进行可视化配置形成跨平台界面。

在一些可选的实施例中，对界面布局文件进行可视化配置形成跨平台的跨平台界面包括：

根据界面布局文件绘制界面中的图案面板；以及

对界面布局文件中的数据源进行修改、为图案面板绑定数据，以完成图案面板中的事件绑定和跳转逻辑的配置。

本发明第三方面提供一种跨平台界面开发方法，包括：

第二开发端发送代码化界面设计组件至服务器，经服务器转发至第一开发端，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；

第一开发端基于代码化界面设计组件利用Sketch插件生成界面布局文件并上传至服务器，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；以及

第三开发端接收服务器发送的界面布局文件并形成跨平台界面。

在一些可选的实施例中，在第三开发端接收服务器发送的界面布局文件并形成跨平台界面之后，还包括：

利用3D引擎将预存储的3D模型图像嵌入跨平台界面。

本发明第四方面提供一种跨平台界面开发***，包括：第一开发端、第二开发端、第三开发端和服务器，其中

第二开发端被配置为发送代码化界面设计组件至服务器，经服务器转发至第一开发端，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；

第一开发端被配置为基于代码化界面设计组件利用Sketch插件生成界面布局文件并上传至服务器，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；以及

第三开发端被配置为接收服务器发送的界面布局文件并形成跨平台界面。

本发明第五方面提供一种计算机设备，包括：

一个或多个处理器；

存储装置，其上存储一个或多个程序；

当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现：如上文所述的方法。

本发明第六方面提供一种计算机可读存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现：如上文所述的方法。

本发明的有益效果如下：

本发明针对目前现有的问题，制定一种基于Sketch的跨平台界面开发方法和***、计算机设备和介质，通过Sketch插件将自服务器接收的代码化界面设计组件生成界面布局文件，使第三开发端进行可视化配置生成跨平台界面，实现了重复的无差异性的界面开发，从而弥补了现有技术中存在的问题，有效提高界面设计开发的灵活性，提高开发效率，降低开发成本，具有广泛的应用前景。

附图说明

下面结合附图对本发明的具体实施方式作进一步详细的说明。

图1示出根据本发明实施例的基于Sketch的跨平台界面开发方法的流程图；

图2示出根据本发明实施例的实现跨平台界面开发方法的跨平台界面开发***的结构框图；

图3示出根据本发明实施例的跨平台界面开发方法的交互甬道图；

图4示出根据本发明的一个实施例的跨平台界面开发方法中Web显示界面的示意图；

图5示出根据本发明的一个实施例的跨平台界面开发方法创建的图案面板的示意图；

图6示出根据本发明的一个实施例生成的跨平台界面与3D模型图像结合后的示意图；以及

图7示出根据本发明的另一个实施例所述的一种计算机设备的结构示意图。

具体实施方式

为了更清楚地说明本发明，下面结合实施例和附图对本发明做进一步的说明。附图中相似的部件以相同的附图标记进行表示。本领域技术人员应当理解，下面所具体描述的内容是说明性的而非限制性的，不应以此限制本发明的保护范围。

如图1所示，本发明的一个实施例提供了一种基于Sketch的跨平台界面开发方法，应用于第一开发端，包括：

接收服务器发送的代码化界面设计组件，代码化界面设计组件来自第二开发端，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；

基于代码化界面设计组件利用Sketch插件生成界面布局文件，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；

将界面布局文件上传至服务器，以使得服务器将界面布局文件传输至第三开发端以形成跨平台界面。

在本实施例中，通过Sketch插件将自服务器接收的代码化界面设计组件生成界面布局文件，使第三开发端生成跨平台界面，实现了重复的无差异性的界面开发，从而弥补了现有技术中存在的问题，有效提高界面设计开发的灵活性，提高开发效率，降低开发成本，具有广泛的应用前景。

在一个具体的示例中，如图2所示为跨平台界面开发***，包括服务器100、第一开发端201、第二开发端202和第三开发端203。其中，服务器100可以是云服务器，也可以是本地服务器，服务器100可以为一个也可以为多个，在本发明不做具体限定。第一开发端201、第二开发端202和第三开发端203可以为计算机、便携式计算机、平板电脑、智能手机等可运行开发工具的电子设备。在本发明的实施例中，例如，第一开发端201可以是其上加载并运行Sketch插件的电子设备，第二开发端202可以是其上加载并运行Android Studio工具的电子设备，第三开发端203可以是其上加载并运行基于Flutter的Web工具的电子设备。当然，本领域技术人员可以理解，以上加载的开发工具只是示例性的，本发明并不旨在限定第一开发端201、第二开发端202和第三开发端203上具体加载的工具，以能够实现本发明实施例的跨平台界面开发方法为准。

下面结合图2和图3以跨平台界面开发***的详细工作流程详细描述本发明实施例的跨平台界面开发方法。

第一、第一客户端接收服务器发送的代码化界面设计组件，代码化界面设计组件来自第二开发端，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件。

如图3所示，在流程S1中，第二开发端202发送代码化界面设计组件至服务器100。

具体地，UI设计人员在其客户端(未示出)上按照界面开发项目的设计思路，利用UI设计工具设计界面设计原图，这里，该界面设计原图例如为草图，而并非最终呈现的完整界面。示例性地，UI设计工具可以例如为Sketch工具。UI设计人员将其界面设计原图以Sketch源文件的形式发送至第二开发端202。

在第二开发端202，开发人员利用AndroidStudio工具根据设计***台描述文件，即，界面设计原图的、可以在跨平台中读取并识别的描述文件。在下一步的开发过程中，主要用到的是跨平台描述文件和Web文件。

在流程S2中，代码化界面组件经由服务器100转发至第一开发端201。即，第一开发端201接收服务器100发送的代码化界面设计组件。

第二、第一客户端201基于代码化界面设计组件利用Sketch插件生成界面布局文件，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片。可以理解，在本发明的实施例中，图案面板指的是饼图、柱状图、折线图等面板，一个或多个图案面板经过布局将组成界面。

具体地，如图3所示，在流程S3中，开发人员通过设计的Sketch插件，利用该Sketch插件读取代码化界面设计组件的Web文件生成Web显示界面。

在该流程S3中，第一开发端201利用Sketch插件读取代码化界面设计组件的Web文件生成Web显示界面，Web显示界面如图4所示。基于Web显示界面修改界面的显示参数和与显示参数对应的跨平台描述文件中的数据参数以创建图案面板。可以理解的是，基于该Web显示界面修改显示参数和数据参数具体为，响应于开发人员的点击选择、键盘输入等操作，第一客户端201基于显示参数修改界面的显示参数和与该显示参数对应的数据参数以创建图案面板，该数据参数为跨平台描述文件中描述的数据参数。

更具体地，第一开发端201基于Web显示界面修改界面的显示参数。如图4中Web显示界面的图示可知，显示参数包括但不限于画布尺寸、图案面板图形数量和图案面板图形属性。以图4例示的饼图为例，开发人员可以根据界面开发项目的需要，在该Web显示界面修改待形成的图案面板中饼图的画布尺寸、图案面板图形数量、图案面板图形属性、数据数量和数据值中的一个或多个。示例性地，如图4所示，针对画布尺寸，可以设置为300～386；针对图案面板图形数量，可以设置扇形数量为4；针对图案面板图形属性，可以设置图形类别为人员安全、对应颜色、扇形半径等；针对数据数量，可以设置人员安全、建筑物变形、建筑物倾斜和高空设备四项数据，但并不限于此，可以对具体数据项进行修改，增加或删减项数；针对数据值，可以将人员安全设置为45、建筑物变形设置为25、建筑物倾斜设置为25以及高空设备设置为10。本领域技术人员应理解，以上只是示例性地，修改后的具体内容并不限于此。

另外，还需要说明的是，尽管图4中的示例示出待创建的图案面板为饼图的形式，但本申请并不限于此，其可以为折线图的形式、柱状图的形式等各种图案形式。

进一步地，第一开发端利用数据联通桥(Bridge)将代码化界面设计组件由基于Flutter的数据转换为Web数据来调用与显示参数对应的跨平台描述文件中的数据参数并对其进行修改。具体地，如图4所示，对于开发人员在基于Web显示界面完成对显示参数的修改后，可以点击该Web显示界面中的生成按钮，则第一终端201利用Sketch插件通过代码自动生成与显示参数对应的数据参数，即完成对数据参数的修改，该数据参数为跨平台描述文件中的数据参数，通过该步骤，利用Sketch插件将开发人员对图案面板的修改内容对应更新到描述性的代码数据中，以数据形式表达将要创建的图案面板。

值得注意的是，以上描述中“修改”一词涵盖了对显示参数和数据参数的编辑和修改，这是因为在导入代码化界面设计组件时的Web文件和跨屏描述文件在可以编辑的项目中通常存在默认值，但这些默认值只是初始默认样式，对于具体界面开发项目而言并没有实际意义，因此开发人员中需要对Web显示界面上的相应可编辑项进行修改。另外，因为本发明将在之后的步骤中生成界面布局文件并存储在文件，对于后续新项目开发过程，开发人员可以直接调用服务器中存储的界面布局文件，开发人员只需针对该界面布局文件在Sketch插件中针对Web显示界面上显示的各项显示参数进行进一步简单修改，即可以完成新的项目，因此，“修改”一词也可以针对其他开发人员对界面的开发过程。关于具体布局文件的生成与存储将在下文详细描述，在此不再赘述。

在修改显示参数与数据参数后，根据修改后的显示参数与数据参数的修改创建图案面板，如图5所示为创建完成后图案面板的具体样式。具体地，第一开发端201还可以包括素材库，素材库中存储多个图案面板素材，第一开发端201可以利用Sketch插件根据修改后的显示参数和数据参数利用图案面板素材创建所述图案面板。在该步骤中，示例性地，将主要涉及MacOS***中关于Objective-C在Sketch中的Sketch-Api的相关类解析与开发：注入MSTextLayer进行文字编辑，MSShapeGroup联合贝塞尔曲线NSBezierPath进行图形绘制，同时融合Page,Artboard,Group进行Sketch界面图案面板开发，在此不再赘述。

本领域技术人员应理解，一个界面开发项目中并不一定仅有一个图案面板，例如，若为智慧城市主题提供界面设计，该城市主题中将要对施工建设数据中人员安全、建筑物变形、建筑物倾斜和高空设备等数据比例、交通布局中各个区域指示灯、摄像头、指挥人员的布局比例、以及城市中各个区域绿化面积随时间的增长情况等各方面的可视化呈现，则需要循环该流程S3，以创建多个图案面板。具体的创建流程与以上类似，开发人员只要利用Sketch重复进行流程S3即可。

在生成该界面开发项目的所有图案面板后，第一终端201拼接这些图案面板，根据拼接后的图案面板以及与每个图案面板对应的数据和图片生成界面布局文件。在布局文件中，此时只是表示数据与图案面板图片之间的关系，以及提前布局图案面板与数据绑定的内容关系，相当于将所属于该界面项目主题的一组图案面板、与该组图案面板中每个图案面板对应的数据和图片关联在一起形成一个代码描述的表单，打包为一个文件，其中每个图案面板、与该图案面板对应的数据和图片可以分配一个唯一的识别编码id。其中，识别编码id以序号表示，布局文件中描述了每个图案面板的图片、位置坐标、宽度和高度、数据跳转过程等。

第三、第一开发端201将界面布局文件上传至服务器100，以使得服务器将界面布局文件传输至第三开发端以形成跨平台界面。

参照图3所示，在流程S4中，第一开发端201将界面布局文件上传至服务器100。

在流程S5中，第三开发端203接收服务器100发送的界面布局文件，并在流程S6中形成跨平台界面。

具体地，在流程S6中，第三开发端203利用可视化配置器：根据界面布局文件绘制界面中的图案面板；以及对界面布局文件中的数据源进行修改、为图案面板绑定数据，以完成图案面板中的事件绑定和跳转逻辑的配置。

在绘制界面中的图案面板时，调整在Sketch中生成的图案面板的具***置，并基于界面布局文件中描述的数据源的具体接口地址绑定数据和跳转逻辑的配置，从而最终生成一套可以直接能够应用在Web、Android/IOS、Windows等平台上跨平台的跨平台界面。更具体地，第三开发端203可以利用可视化配置器生成界面程序(APP)，该界面程序能够被不同平台执行生成在这些平台上应用的跨平台界面。当然以上各种平台并不旨在限制，其他平台也是可以的，例如，鸿蒙。

可选地，在可视化配置器中，还可以对图案面板进行初步的演示和验证，以便于开发人员进行进一步的修改，修改过程例如可以通过开发人员返回第二开发端的设计，过程简单易于重复，能够快速提供需求验证。

第三开发端203在生成跨平台界面后，在流程S7中，将跨平台界面上传至服务器100。

通过以上设置，可以根据设计师的界面设计草图，在Sketch插件中利用成熟的设计组件资源，将其转化跨平台的代码数据，将每一个设计组件对应为一段代码数据，通过拼接形成包括多个图案面板与其对应的数据和图片的界面布局文件，在该过程中，实质上该布局文件中由多个Widget(微件)生成，一个界面的布局文件将包括多个Widget的拼接，相当于跨平台界面的集合代码。通过将该集合代码导入可视化配置器增加事件绑定的信息，将不同的图案面板与图案面板、同一图案面板的数据填入图案面板UI内部。而通过将该集合代码存储在服务器中，并被另一端开发人员的可视化配置器中进行图案面板绘制和数据和事件绑定，则实现了多端多次多阶段开发人员的重复开发调用，突破了不同开发人员之间以及设计人员之间的代码权限，实现了重复的无差异性的界面开发。

具体在实际应用中，与现有技术中每个设计人员独立设计、开发人员直接对每一个完整的设计原图进行代码化，往复冗余的设计工作相比，本发明的实施例的界面开发方法能够简化设计流程，提高界面开发的重复性，对于设计过程中的项目更新和修改，只需要开发人员直接在第二开发端简单修改和配置Web显示界面中的相应选项，并在第三开发端利用可视化配置器进行简单的数据和跳转逻辑的绑定即可，提高了开发效率，降低了开发成本。

在一些可选的实施例中，服务器100上可以已经预存储了3D设计人员预先设计并上传的以上界面开发项目所述的项目主题的3D模型图像。此时，界面发***还可以包括第四开发端，该开发端的开发人员可以从服务器下载3D模型图像，利用3D引擎将预存储的3D模型图像嵌入跨平台界面，如图6所示，该3D模型例如可以为智慧城市的3D模型图像。通过该设置，可以将跨平台界面与3D模型图像结合，进行灵活的可视化展示。

相应于基于Sketch的界面开发方法，如图2所示，跨平台界面开发***，包括：第一开发端、第二开发端、第三开发端和服务器，其中

第二开发端被配置为发送代码化界面设计组件至服务器，经服务器转发至第一开发端，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；

第一开发端被配置为基于代码化界面设计组件利用Sketch插件生成界面布局文件并上传至服务器，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；以及

第三开发端被配置为接收服务器发送的界面布局文件并形成跨平台界面。

在本实施例中，跨平台界面开发***通过利用第二开发端上的Sketch插件将自服务器接收的代码化界面设计组件生成界面布局文件，使第三开发端生成跨平台界面，实现了重复的无差异性的界面开发，从而弥补了现有技术中存在的问题，有效提高界面设计开发的灵活性，提高开发效率，降低开发成本，具有广泛的应用前景。

基于同一发明构思，本发明的实施例还提供一种跨平台界面开发方法，包括：

第二开发端发送代码化界面设计组件至服务器，经服务器转发至第一开发端，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；

第一开发端基于代码化界面设计组件利用Sketch插件生成界面布局文件并上传至服务器，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；以及

第三开发端接收服务器发送的界面布局文件并形成跨平台界面。

可选地，在第三开发端接收服务器发送的界面布局文件并形成跨平台界面之后，还包括：利用3D引擎将预存储的3D模型图像嵌入跨平台界面。

在本实施例中，通过利用第二开发端上的Sketch插件将自服务器接收的代码化界面设计组件生成界面布局文件，使第三开发端生成跨平台界面，实现了重复的无差异性的界面开发，从而弥补了现有技术中存在的问题，有效提高界面设计开发的灵活性，提高开发效率，降低开发成本，，且通过***3D模型图像，可以将跨平台界面与3D模型图像结合，进行灵活的可视化展示。

基于同一发明构思，本发明的实施例还提供一种跨平台界面开发方法，应用于第三开发端，包括：

接收服务器发送的界面布局文件，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片，其中，界面布局文件为基于代码化界面设计组件利用Sketch插件而生成的；

对界面布局文件进行可视化配置形成跨平台界面。

本实施例提供的界面开发方法已经在描述基于Sketch的跨平台界面开发方法中详细描述，相关之处可以参照上述说明，在此不再赘述。

在本实施例中，第三开发端接收来自服务器的由第二开发端形成的界面布局文件生成跨平台界面，其中，界面布局文件通过利用第二开发端上的Sketch插件将自服务器接收的代码化界面设计组件生成，实现了重复的无差异性的界面开发，从而弥补了现有技术中存在的问题，有效提高界面设计开发的灵活性，提高开发效率，降低开发成本，具有广泛的应用前景。

本发明的另一个实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现：接收服务器发送的代码化界面设计组件，代码化界面设计组件来自第二开发端，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；基于代码化界面设计组件利用Sketch插件生成界面布局文件，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；将界面布局文件上传至服务器，以使得服务器将界面布局文件传输至第三开发端以形成跨平台界面。

本发明的另一个实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现：第二开发端发送代码化界面设计组件至服务器，经服务器转发至第一开发端，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；第一开发端基于代码化界面设计组件利用Sketch插件生成界面布局文件并上传至服务器，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；以及第三开发端接收服务器发送的界面布局文件并形成跨平台界面。

本发明的另一个实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现：接收服务器发送的界面布局文件，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片，其中，界面布局文件为基于代码化界面设计组件利用Sketch插件而生成的；对界面布局文件进行可视化配置形成跨平台界面。

在实际应用中，计算机可读存储介质可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

如图7所示，本发明的另一个实施例提供的一种计算机设备的结构示意图。图7显示的计算机设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，计算机设备12以通用计算设备的形式表现。计算机设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，***存储器28，连接不同***组件(包括***存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，***总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及***组件互连(PCI)总线。

计算机设备12典型地包括多种计算机***可读介质。这些介质可以是任何能够被计算机设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

***存储器28可以包括易失性存储器形式的计算机***可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。计算机设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机***存储介质。仅作为举例，存储***34可以用于读写不可移动的、非易失性磁介质(图7未显示，通常称为“硬盘驱动器”)。尽管图7中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如存储器28中，这样的程序模块42包括但不限于操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

计算机设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该计算机设备12交互的设备通信，和/或与使得该计算机设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，计算机设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图7所示，网络适配器20通过总线18与计算机设备12的其它模块通信。应当明白，尽管图7中未示出，可以结合计算机设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID***、磁带驱动器以及数据备份存储***等。

处理器单元16通过运行存储在***存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的一种基于Sketch的跨平台界面开发方法或者跨平台界面开发方法。

需要说明的是，本发明实施例提供的视线追踪方法步骤的先后顺序可以进行适当谓整，步骤也可以根据情况进行相应增减，任何熟悉本技术领域的技术人员在本发费揭露的技术范围内，可轻易程到变化的方法，都应涵盖在本发明的保护范围之内，因此不再赘述。

本发明针对目前现有的问题，制定一种基于Sketch的跨平台界面开发方法和***、计算机设备和介质，通过Sketch插件将自服务器接收的代码化界面设计组件生成界面布局文件，使第三开发端进行可视化配置生成跨平台界面，实现了重复的无差异性的界面开发，从而弥补了现有技术中存在的问题，有效提高界面设计开发的灵活性，提高开发效率，降低开发成本，具有广泛的应用前景。

显然，本发明的上述实施例仅仅是为清楚地说明本发明所作的举例，而并非是对本发明的实施方式的限定，对于本领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动，这里无法对所有的实施方式予以穷举，凡是属于本发明的技术方案所引伸出的显而易见的变化或变动仍处于本发明的保护范围之列。

Claims (12)

1.一种基于Sketch的跨平台界面开发方法，应用于第一开发端，其特征在于，包括：

接收服务器发送的代码化界面设计组件，所述代码化界面设计组件来自第二开发端，所述代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；

基于所述代码化界面设计组件利用Sketch插件生成界面布局文件，所述界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；

将所述界面布局文件上传至所述服务器，以使得所述服务器将所述界面布局文件传输至第三开发端以形成跨平台界面跨平台界面。

2.根据权利要求1所述的界面开发方法，其特征在于，所述基于所述代码化界面设计组件利用Sketch插件生成界面布局文件进一步包括：

读取所述代码化界面设计组件的Web文件生成Web显示界面；

基于所述Web显示界面修改界面的显示参数和与所述显示参数对应的跨平台描述文件中的数据参数以创建所述图案面板；以及

拼接所述至少一个图案面板，根据拼接后的所述图案面板以及与每个图案面板对应的数据和图片生成所述界面布局文件。

3.根据权利要求2所述的界面开发方法，其特征在于，所述基于所述Web显示界面修改界面的显示参数和与所述显示参数对应的跨平台描述文件中的数据参数以创建所述图案面板进一步包括：

基于所述Web显示界面修改界面的显示参数；

利用数据联通桥将所述代码化界面设计组件由基于Flutter的数据转换为Web数据，以调用与所述显示参数对应的跨平台描述文件中的数据参数并对其进行修改；以及

根据修改后的显示参数与所述数据参数创建所述图案面板。

4.根据权利要求2所述的界面开发方法，其特征在于，所述显示参数包括画布尺寸、图案面板图形数量、图案面板标签属性、数据数量和数据值中的一个或多个。

5.根据权利要求2所述的界面开发方法，其特征在于，所述第一开发端包括素材库，所述素材库中存储多个图案面板素材，

所述根据修改后的所述显示参数与所述数据参数创建所述图案面板进一步包括：

根据所述修改后的显示参数和数据参数利用所述图案面板素材创建所述图案面板。

6.一种跨平台界面开发方法，应用于第三开发端，其特征在于，包括：

接收服务器发送的界面布局文件，所述界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片，其中，所述界面布局文件为基于代码化界面设计组件利用Sketch插件而生成的；

对所述界面布局文件进行可视化配置形成跨平台界面。

7.根据权利要求6所述的跨平台界面开发方法，其特征在于，所述对所述界面布局文件进行可视化配置形成跨平台的跨平台界面包括：

根据所述界面布局文件绘制界面中的图案面板；以及

对所述界面布局文件中的数据源进行修改、为所述图案面板绑定数据，以完成所述图案面板中的事件绑定和跳转逻辑的配置。

8.一种跨平台界面开发方法，其特征在于，包括：

第二开发端发送代码化界面设计组件至服务器，经所述服务器转发至第一开发端，所述代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；

所述第一开发端基于所述代码化界面设计组件利用Sketch插件生成界面布局文件并上传至所述服务器，所述界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；以及

第三开发端接收所述服务器发送的界面布局文件并形成跨平台界面。

9.根据权利要求8所述的跨平台界面开发方法，其特征在于，在所述第三开发端接收所述服务器发送的界面布局文件并形成跨平台界面之后，还包括：

利用3D引擎将预存储的3D模型图像嵌入所述跨平台界面。

10.一种跨平台界面开发***，其特征在于，包括：第一开发端、第二开发端、第三开发端和服务器，其中

所述第二开发端被配置为发送代码化界面设计组件至所述服务器，经所述服务器转发至第一开发端，所述代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；

所述第一开发端被配置为基于所述代码化界面设计组件利用Sketch插件生成界面布局文件并上传至所述服务器，所述界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；以及

所述第三开发端被配置为接收所述服务器发送的界面布局文件并形成跨平台界面。

11.一种计算机设备，其特征在于，包括：

一个或多个处理器；

存储装置，其上存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现：

如权利要求1-5中任一项所述的方法，

或者

如权利要求6-7中任一项所述的方法，

或者

如权利要求8-9中任一项所述的方法。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，其中，该程序被处理器执行时实现：

如权利要求1-5中任一项所述的方法，

或者

如权利要求6-7中任一项所述的方法，

或者

如权利要求8-9中任一项所述的方法。

Images