CN115129305A - 前端代码的生成方法、装置、存储介质及计算机设备 - Google Patents

前端代码的生成方法、装置、存储介质及计算机设备 Download PDF

Info

Publication number
CN115129305A
CN115129305A CN202210618139.7A CN202210618139A CN115129305A CN 115129305 A CN115129305 A CN 115129305A CN 202210618139 A CN202210618139 A CN 202210618139A CN 115129305 A CN115129305 A CN 115129305A
Authority
CN
China
Prior art keywords
end code
page component
page
developer
icon
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210618139.7A
Other languages
English (en)
Inventor
宋坤
曾国栋
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Yuanguang Software Co Ltd
Original Assignee
Yuanguang Software Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Yuanguang Software Co Ltd filed Critical Yuanguang Software Co Ltd
Priority to CN202210618139.7A priority Critical patent/CN115129305A/zh
Publication of CN115129305A publication Critical patent/CN115129305A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/44—Encoding
    • G06F8/447—Target code generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/60—Software deployment
    • G06F8/65—Updates

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请实施例公开了一种前端代码的生成方法、装置、存储介质及计算机设备，涉及原型设计领域。本申请的设计人员直接调用页面组件在设计画布上绘制原型页面，在设计人员需要对某个原型组件进行编码，选择一个或多个页面组件，然后将选择的页面组件的前端代码发送给开发人员，后续开发人员可以直接对前端代码进行二次开发，然后将更新后的前端代码返回给设计人员进行使用，实现设计人员和开发人员的无缝对接，开发人员不需要根据线框图进行重新开发，减少开发人员开发原型页面的工作量，提高原型页面的开发效率。

Description

前端代码的生成方法、装置、存储介质及计算机设备
技术领域
本申请涉及原型设计领域，尤其涉及一种前端代码的生成方法、装置、存储介质及计算机设备。
背景技术
在传统的软件产品前端界面的设计过程中，设计人员会先根据客户需求采用原型设计工具设计线框图，线框图经过调整并最终由客户确认后，再由开发人员参考线框图开发成真实的原型页面，此时才能查看原型页面中各个页面组件的前端代码。
发明内容
本申请实施例提供了前端代码的生成方法、装置、存储介质及计算机设备，可以解决现有技术中开发人员开发原型页面的工作量较大的问题。所述技术方案如下：
第一方面，本申请实施例提供了一种前端代码的生成方法，所述方法包括：
启动原型设计工具后在显示单元上显示设计画布；其中，所述设计画布包括素材库，所述素材库包括多个页面组件图标；
响应于设计人员对所述素材库中第一页面组件图标的拖拽指令，获取所述第一页面组件图标的前端代码，基于前端代码在所述设计画布上执行渲染处理；
基于设计人员的选择指令，在所述设计画布选择一个或多个页面组件；
将选择的页面组件的前端代码发送给开发人员；
接收来自所述开发人员的更新后的前端代码；
根据所述更新后的前端代码更新所述选择的页面组件。
第二方面，本申请实施例提供了一种前端代码的生成装置，所述装置包括：
加载单元，用于启动原型设计工具后在显示单元上显示设计画布；其中，所述设计画布包括素材库，所述素材库包括多个页面组件图标；
设计单元，用于响应于设计人员对所述素材库中第一页面组件图标的拖拽指令，获取所述第一页面组件图标的前端代码，基于前端代码在所述设计画布上执行渲染处理；
选择单元，用于基于设计人员的选择指令，在所述设计画布选择一个或多个页面组件；
收发单元，用于将选择的页面组件的前端代码发送给开发人员；
所述收发单元，还用于接收来自所述开发人员的更新后的前端代码；
更新单元，用于根据所述更新后的前端代码更新所述选择的页面组件。
第三方面，本申请实施例提供一种计算机存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行上述的方法步骤。
第四方面，本申请实施例提供一种计算机设备，可包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行上述的方法步骤。
本申请一些实施例提供的技术方案带来的有益效果至少包括：
设计人员直接调用页面组件在设计画布上绘制原型页面，在设计人员需要对某个原型组件进行编码，选择一个或多个页面组件，然后将选择的页面组件的前端代码发送给开发人员，后续开发人员可以直接对前端代码进行二次开发，然后将更新后的前端代码返回给设计人员进行使用，实现设计人员和开发人员的无缝对接，开发人员不需要根据线框图进行重新开发，减少开发人员开发原型页面的工作量，提高原型页面的开发效率。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
图1是本申请实施例提供的网络架构示意图；
图2是本申请实施例提供的前端代码的生成方法的流程示意图；
图3是本申请实施例提供的设计画布的示意图；
图4是本申请提供的一种前端代码的生成装置的结构示意图；
图5是本申请提供的一种计算机设备的结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施例方式作进一步地详细描述。
需要说明的是，本申请提供的前端代码的生成方法一般由计算机设备执行，相应的，前端代码的生成装置一般设置于计算机设备中。
图1示出了可以应用于本申请的前端代码的生成方法或前端代码的生成装置的示例性系统架构。
如图1所示，系统架构可以包括：计算机设备101和服务器102。计算机设备101和服务器102之间可以通过网络进行通信，网络用于上述各个单元之间提供通信链路的介质。网络可以包括各种类型的有线通信链路或无线通信链路，例如：有线通信链路包括光纤、双绞线或同轴电缆等，无线通信链路包括蓝牙通信链路、无线保真(WIreless-FIdelity，Wi-Fi)通信链路或微波通信链路等。
其中，计算机设备101包括设计人员的计算机设备和开发人员的计算机设备，设计人员为设计线框图的人员，开发人员为开发原型页面的人员，设计人员和开发人员可通过账号登录到服务器102，设计人员的计算机设备安装有原型设计工具，基于原型设计工具设计线框图以及自动根据线框图生成对应的原型页面，开发人员的计算机设备安装有前端开发工具，利用该前端开发工具将来自设计人员的前端代码进行二次开发后，在服务器102上发布开发好的原型页面。
需要说明的是，计算机设备101和服务器102可以是硬件，也可以是软件。当计算机设备101和服务器102为硬件时，可以实现成多个服务器组成的分布式服务器集群，也可以实现成单个服务器。当计算机设备101和服务器102为软件时，可以实现成多个软件或软件模块(例如用来提供分布式服务)，也可以实现成单个软件或软件模块，在此不做具体限定。
本申请的计算机设备上可以安装有各种通信客户端应用，例如：视频录制应用、视频播放应用、语音交互应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
计算机设备可以是硬件，也可以是软件。当计算机设备为硬件时，可以是具有显示屏的各种计算机设备，包括但不限于智能手机、平板电脑、膝上型便携式计算机和台式计算机等等。当计算机设备为软件时，可以是安装上述所列举的计算机设备中。其可以实现呈多个软件或软件模块(例如：用来提供分布式服务)，也可以实现成单个软件或软件模块，在此不作具体限定。
当计算机设备为硬件时，其上还可以安装有显示设备和摄像头，显示设备显示可以是各种能实现显示功能的设备，摄像头用于采集视频流；例如：显示设备可以是阴极射线管显示器(cathode ray tube display，简称CR)、发光二极管显示器(light-emittingdiode display，简称LED)、电子墨水屏、液晶显示屏(liquid crystal display，简称LCD)、等离子显示面板(plasma display panel，简称PDP)等。用户可以利用计算机设备上的显示设备，来查看显示的文字、图片、视频等信息。
应理解，图1中的计算机设备、网络和服务器的数目仅是示意性的。根据实现需要，可以是任意数量的计算机设备、网络和服务器。
下面将结合附图2，对本申请实施例提供的前端代码的生成方法进行详细介绍。其中，本申请实施例中的前端代码的生成装置可以是图1所示的计算机设备。
请参见图2，为本申请实施例提供了一种前端代码的生成方法的流程示意图。如图2所示，本申请实施例的所述方法可以包括以下步骤：
S201、启动原型设计工具后在显示单元上显示设计画布。
其中，计算机设备启动原型设计工具，通过显示单元显示原型设计工具的设计画布，设计画布上设置有素材库，素材库包括多个页面组件图标，每个页面组件图标对应一个页面组件的前端代码。设计人员可以通过输入装置(鼠标、键盘或触摸屏等)与设计画布进行交互，实现在设计画布上绘制原型页面。
例如：参见图3所示的原型设计工具的用户界面，用户界面的左边设置有素材库，素材库包括的页面组件图标为：文字组件、输入框组件图标、微调框组件图标、时间选择框组件图标、弹窗选择框组件图标等。
在一个或多个可能的实施例中，素材库中的页面组件图标可以根据设计人员的需求进行增加或删除，增加的页面组件图标可以是设计画布上设计人员框选出来的。基于用户的框选指令在所述设计画布中选择自定义页面组件；根据所述自定义页面组件的缩略图生成自定义页面组件图标；将所述自定义页面组件图标添加到所述素材库中；或接收所述用户删除指令在所述素材库中删除一个或多个页面组件图标，本实施例通过定期更新素材库，使素材库的资源符合设计需求，同时避免占用太多空间。
S202、响应于设计人员对素材库中第一页面组件图标的拖拽指令，获取第一页面组件图标的前端代码，基于前端代码在设计画布上执行渲染处理。
其中，第一页面组件图标可以为素材库中的任意一个组件图标，设计人员通过输入装置触发生成拖拽指令，将拖拽指令的开始位置位于素材库中，拖拽指令的结束位置位于设计画布的绘制区中，将开始位置所在的组件图标作为选中的第一组件图标，将第一组件图标拖拽到设计画布的绘制区之前，计算机设备获取第一页面组件图标关联的前端代码，第一页面组件的前端代码可以存储在缓存、内存或磁盘中，根据前端代码在拖拽指令的结束位置进行选择得到页面组件。
进一步的，获取第一页面组件图标的前端代码，包括：
在缓存中检测是否存在所述第一页面组件图标的前端代码；
若为否，在磁盘中的前端开发工具中获取所述第一页面组件图标的前端代码；
若为是，在所述缓存中读取所述第一页面组件图标的前端代码。
其中，缓存中会存储部分页面组件图标的前端代码，计算机设备首先在缓存中检测是否存在第一页面组件图标的前端代码，若为是，在缓存中进行读取，提高读取前端代码的速度，若为否，则在磁盘的前端开发工具中读取前端代码，前端开发工具用于开发人员开发原型页面代码的工具。原型设计工具为设计人员设计原型页面的工具，原型设计工具和前端开发工具之间以通信接口进行数据传输，例如：通信接口为API接口，原型设计工具通过API调用的方式在前端开发工具中读取某个页面组件的前端代码。
进一步的，所述在缓存中检测是否存在所述第一页面组件图标的前端代码，包括：
根据所述页面组件的ID在预设的地址映射表中查询对应的缓存地址；
若为是，确定所述缓存中存在所述第一页面组件图标的前端代码；
若为否，确定所述缓存中不存在所述第一页面组件图标的前端代码。
其中，地址映射表设置有页面组件的ID和缓存地址之间的映射关系，地址映射表可以部署在缓存或内存中，页面组件的ID用于唯一表示页面组件的身份，缓存地址为前端代码在缓存中的存储地址，通过地址映射表的查询可以提高前端代码的查询效率。
在一个或多个可能的实施例中，还包括：
根据预设时间段内的使用次数对素材库中的页面组件图标进行降序排列；
在前端开发工具中读取排在前面n个页面组件图标的前端代码；其中，n为大于1的整数；
将读取的前端代码预加载到缓存中。
本实施例将开发人员频繁使用的组件代码提取加载到缓存中，可以提高后续读取前端代码的速度，以及减低对缓存空间的占用，提高空间利用率。
S203、基于设计人员的选择指令，在设计画布选择一个或多个页面组件。
S204、将选择的页面组件的前端代码发送给开发人员。
其中，设计人员一般不具备编码能力，当需要对设计画布上的页面组件进行编码时，设计人员基于输入装置触发生成选择指令，在设计画布上选择一个或多个页面组件，将选择的页面组件的前端代码发送给开发人员进行后续编码开发。
S205、接收来自开发人员的更新后的前端代码。
S206、根据所述更新后的前端代码更新所述选择的页面组件。
其中，设计画布上的多个页面组件的布局或样式不满足设计需求时，开发人员接收到来自设计人员的前端代码后，可通过输入装置触发生成编辑指令，对该前端代码进行编辑操作，编辑操作用于编辑选择的页面组件的形状、位置、字体颜色、字体大小或背景颜色等，计算机设备根据编辑操作更新前端代码，更新的方式是：将缓存、内存、磁盘中的前端代码均进行更新，然后将更新后的前端代码发送给设计人员，设计人员的计算机设备应用该更新后的前端代码，以满足设计需求。
在一个或多个可能的实施例中，所述将选择的页面组件的前端代码发送给开发人员，包括：
通过显示单元显示好友列表；其中，所述好友列表包括多个开发人员标识，开发人员标识可以使用用户登录名来表示，可以唯一表示用户身份；
在所述还有列表中选择开发人员标识；
将选择的页面组件的前端代码发送给选择的开发人员标识指示的计算机设备，本实施例通过即时通信聊天的方式将前端代码发送给开发人员，提高前端代码传输的便捷性，增加代码编码效率。
本申请的实施例在开发人员开发原型页面时，设计人员直接调用页面组件在设计画布上绘制原型页面，在设计人员需要对某个原型组件进行编码，选择一个或多个页面组件，然后将选择的页面组件的前端代码发送给开发人员，后续开发人员可以直接对前端代码进行二次开发，然后将更新后的前端代码返回给设计人员进行使用，实现设计人员和开发人员的无缝对接，开发人员不需要根据线框图进行重新开发，减少开发人员开发原型页面的工作量，提高原型页面的开发效率。
下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。
请参见图4，其示出了本申请一个示例性实施例提供的前端代码的生成装置的结构示意图，以下简称装置4。该装置4可以通过软件、硬件或者两者的结合实现成为计算机设备的全部或一部分。装置4包括：加载单元401、设计单元402、选择单元403、收发单元404、更新单元405。
加载单元401，用于启动原型设计工具后在显示单元上显示设计画布；其中，所述设计画布包括素材库，所述素材库包括多个页面组件图标；
设计单元402，用于响应于设计人员对所述素材库中第一页面组件图标的拖拽指令，获取所述第一页面组件图标的前端代码，基于前端代码在所述设计画布上执行渲染处理；
选择单元403，用于基于设计人员的选择指令，在所述设计画布选择一个或多个页面组件；
收发单元404，用于将选择的页面组件的前端代码发送给开发人员；
所述收发单元404，还用于接收来自所述开发人员的更新后的前端代码；
更新单元405，用于根据所述更新后的前端代码更新所述选择的页面组件。
在一个或多个可能的实施例中，所述获取所述第一页面组件图标的前端代码，包括：
在缓存中检测是否存在所述第一页面组件图标的前端代码；
若为否，在磁盘中的前端开发工具中获取所述第一页面组件图标的前端代码；
若为是，在所述缓存中读取所述第一页面组件图标的前端代码。
在一个或多个可能的实施例中，所述在缓存中检测是否存在所述第一页面组件图标的前端代码，包括：
根据所述页面组件的ID在预设的地址映射表中查询对应的缓存地址；
若为是，确定所述缓存中存在所述第一页面组件图标的前端代码；
若为否，确定所述缓存中不存在所述第一页面组件图标的前端代码。
在一个或多个可能的实施例中，所述原型设计工具和所述前端设计工具之间通过API接口进行通信。
在一个或多个可能的实施例中，所述将选择的页面组件的前端代码发送给开发人员，包括：
通过显示单元显示好友列表；其中，所述好友列表包括多个开发人员标识；
在所述还有列表中选择开发人员标识；
将选择的页面组件的前端代码发送给选择的开发人员标识指示的计算机设备。
在一个或多个可能的实施例中，还包括：
缓存单元，用于根据预设时间段内的使用次数对素材库中的页面组件图标进行降序排列；
在前端开发工具中读取排在前面n个页面组件图标的前端代码；其中，n为大于1的整数；
将读取的前端代码预加载到缓存中。
在一个或多个可能的实施例中，还包括：
调整单元，用于基于用户的框选指令在所述设计画布中选择自定义页面组件；
根据所述自定义页面组件的缩略图生成自定义页面组件图标；
将所述自定义页面组件图标添加到所述素材库中；或
接收所述用户删除指令在所述素材库中删除一个或多个页面组件图标。
需要说明的是，上述实施例提供的装置4在执行前端代码的生成方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成上述的全部或者部分功能。另外，上述实施例提供的前端代码的生成装置与前端代码的生成方法实施例属于同一构思，其体现实现过程详见方法实施例，这里不再赘述。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
本申请实施例还提供了一种计算机存储介质，所述计算机存储介质可以存储有多条指令，所述指令适于由处理器加载并执行如上述图2所示实施例的方法步骤，具体执行过程可以参见图2所示实施例的具体说明，在此不进行赘述。
本申请还提供了一种计算机程序产品，该计算机程序产品存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如上各个实施例所述的前端代码的生成方法。
请参见图5，为本申请实施例提供了一种计算机设备的结构示意图。如图5所示，所述计算机设备500可以包括：至少一个处理器501，至少一个网络接口504，用户接口503，存储器505，至少一个通信总线502。
其中，通信总线502用于实现这些组件之间的连接通信。
其中，用户接口503可以包括显示屏(Display)、摄像头(Camera)，可选用户接口503还可以包括标准的有线接口、无线接口。
其中，网络接口504可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。
其中，处理器501可以包括一个或者多个处理核心。处理器501利用各种接口和线路连接整个计算机设备500内的各个部分，通过运行或执行存储在存储器505内的指令、程序、代码集或指令集，以及调用存储在存储器505内的数据，执行计算机设备500的各种功能和处理数据。可选的，处理器501可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable Logic Array，PLA)中的至少一种硬件形式来实现。处理器501可集成中央处理器(Central Processing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器501中，单独通过一块芯片进行实现。
其中，存储器505可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。可选的，该存储器505包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器505可用于存储指令、程序、代码、代码集或指令集。存储器505可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器505可选的还可以是至少一个位于远离前述处理器501的存储装置。如图5所示，作为一种计算机存储介质的存储器505中可以包括操作系统、网络通信模块、用户接口模块以及应用程序。
在图5所示的计算机设备500中，用户接口503主要用于为用户提供输入的接口，获取用户输入的数据；而处理器501可以用于调用存储器505中存储的应用程序，并具体执行如图2所示的方法，具体过程可参照图2所示，此处不再赘述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体或随机存储记忆体等。
以上所揭露的仅为本申请较佳实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属本申请所涵盖的范围。

Claims (10)

1.一种前端代码的生成方法，其特征在于，包括：
启动原型设计工具后在显示单元上显示设计画布；其中，所述设计画布包括素材库，所述素材库包括多个页面组件图标；
响应于设计人员对所述素材库中第一页面组件图标的拖拽指令，获取所述第一页面组件图标的前端代码，基于前端代码在所述设计画布上执行渲染处理；
基于设计人员的选择指令，在所述设计画布选择一个或多个页面组件；
将选择的页面组件的前端代码发送给开发人员；
接收来自所述开发人员的更新后的前端代码；
根据所述更新后的前端代码更新所述选择的页面组件。
2.根据权利要求1所述的方法，其特征在于，所述获取所述第一页面组件图标的前端代码，包括：
在缓存中检测是否存在所述第一页面组件图标的前端代码；
若为否，在磁盘中的前端开发工具中获取所述第一页面组件图标的前端代码；
若为是，在所述缓存中读取所述第一页面组件图标的前端代码。
3.根据权利要求2所述的方法，其特征在于，所述在缓存中检测是否存在所述第一页面组件图标的前端代码，包括：
根据所述页面组件的ID在预设的地址映射表中查询对应的缓存地址；
若为是，确定所述缓存中存在所述第一页面组件图标的前端代码；
若为否，确定所述缓存中不存在所述第一页面组件图标的前端代码。
4.根据权利要求2或3所述的方法，其特征在于，所述原型设计工具和所述前端设计工具之间通过API接口进行通信。
5.根据权利要求4所述的方法，其特征在于，所述将选择的页面组件的前端代码发送给开发人员，包括：
通过显示单元显示好友列表；其中，所述好友列表包括多个开发人员标识；
在所述还有列表中选择开发人员标识；
将选择的页面组件的前端代码发送给选择的开发人员标识指示的计算机设备。
6.根据权利要求1或2或3或5所述的方法，其特征在于，还包括：
根据预设时间段内的使用次数对素材库中的页面组件图标进行降序排列；
在前端开发工具中读取排在前面n个页面组件图标的前端代码；其中，n为大于1的整数；
将读取的前端代码预加载到缓存中。
7.根据权利要求6所述的方法，其特征在于，还包括：
基于用户的框选指令在所述设计画布中选择自定义页面组件；
根据所述自定义页面组件的缩略图生成自定义页面组件图标；
将所述自定义页面组件图标添加到所述素材库中；或
接收所述用户删除指令在所述素材库中删除一个或多个页面组件图标。
8.一种前端代码的生成装置，其特征在于，包括：
加载单元，用于启动原型设计工具后在显示单元上显示设计画布；其中，所述设计画布包括素材库，所述素材库包括多个页面组件图标；
设计单元，用于响应于设计人员对所述素材库中第一页面组件图标的拖拽指令，获取所述第一页面组件图标的前端代码，基于前端代码在所述设计画布上执行渲染处理；
选择单元，用于基于设计人员的选择指令，在所述设计画布选择一个或多个页面组件；
收发单元，用于将选择的页面组件的前端代码发送给开发人员；
所述收发单元，还用于接收来自所述开发人员的更新后的前端代码；
更新单元，用于根据所述更新后的前端代码更新所述选择的页面组件。
9.一种计算机存储介质，其特征在于，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如权利要求1～7任意一项的方法步骤。
10.一种计算机设备，其特征在于，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行如权利要求1～7任意一项的方法步骤。
CN202210618139.7A 2022-06-01 2022-06-01 前端代码的生成方法、装置、存储介质及计算机设备 Pending CN115129305A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210618139.7A CN115129305A (zh) 2022-06-01 2022-06-01 前端代码的生成方法、装置、存储介质及计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210618139.7A CN115129305A (zh) 2022-06-01 2022-06-01 前端代码的生成方法、装置、存储介质及计算机设备

Publications (1)

Publication Number Publication Date
CN115129305A true CN115129305A (zh) 2022-09-30

Family

ID=83377130

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210618139.7A Pending CN115129305A (zh) 2022-06-01 2022-06-01 前端代码的生成方法、装置、存储介质及计算机设备

Country Status (1)

Country Link
CN (1) CN115129305A (zh)

Similar Documents

Publication Publication Date Title
CN110795195B (zh) 一种网页渲染方法、装置、电子设备及存储介质
CN109933322B (zh) 一种页面编辑方法、装置及计算机可读存储介质
JP7366078B2 (ja) ページのテーマを決定するための方法、装置、電子機器、コンピュータ可読記憶媒体及びコンピュータプログラム
CN113010827B (zh) 页面渲染方法、装置、电子设备以及存储介质
JP7538948B2 (ja) 画像処理方法及び装置、並びにコンピュータ可読記憶媒体
CN109542878B (zh) 一种列表创建方法及装置
CN112162687B (zh) 图片生成方法和装置、存储介质及电子设备
CN112347545A (zh) 一种建筑模型处理方法、装置、计算机设备及存储介质
CN112947918A (zh) 数据展示方法和装置
CN110647327B (zh) 基于卡片的用户界面动态控制的方法和装置
CN110109594B (zh) 一种绘图数据分享方法、装置、存储介质以及设备
CN111931708A (zh) 表单生成方法及装置
CN115510347A (zh) 演示文稿的转换方法、装置、电子设备及存储介质
CN113342450B (zh) 页面处理的方法、装置、电子设备及计算机可读介质
CN113282852A (zh) 编辑网页的方法和装置
CN115617441A (zh) 绑定模型和图元的方法、装置、存储介质及计算机设备
CN111813407A (zh) 游戏开发方法、游戏运行方法、装置和电子设备
CN115129305A (zh) 前端代码的生成方法、装置、存储介质及计算机设备
CN115801777A (zh) 微件组件的处理方法、装置、设备、存储介质及程序产品
CN116775174A (zh) 一种基于用户界面框架的处理方法、装置、设备及介质
CN115359145A (zh) 流程图元的绘制方法、装置、存储介质及计算机设备
CN111831179B (zh) 签约方法、装置及计算机可读介质
KR100603580B1 (ko) 이동통신 단말기의 사용자 인터페이스 구현 방법
CN113741743A (zh) 一种显示方法及装置、设备、存储介质
CN112308016A (zh) 表情图像获取方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination