页面元素的编辑方法、装置、存储介质及终端
技术领域
本申请涉及计算机
技术领域
,尤其涉及一种页面元素的编辑方法、装置、存储介质及终端。背景技术
在服务器/浏览器的沟通中,需要设计用于人机交互的页面,页面中包括各种各样的页面元素,例如:输入框、按钮和表格等,在复杂的页面设计中,开发人员需要设计大量的页面元素,如何提高页面的开发效率是目前亟待解决的问题。
发明内容
本申请实施例提供了一种页面元素的编辑方法、装置、存储介质及终端,通过页面元素的复用提高页面开发的效率。所述技术方案如下:
第一方面,本申请实施例提供了一种页面元素的编辑方法,所述方法包括:
在第一页面选中目标页面元素时,通过显示单元显示剪切板;
获取所述目标页面元素的目标代码,以及根据所述目标页面元素生成目标图片;
将所述目标图片添加到所述剪切板中,保存所述目标代码,以及建立所述目标图片和所述目标代码之间的对应关系;
响应于针对所述剪切板中的所述目标图片的拖动指令,根据所述对应关系确定所述目标图片对应的目标代码;
将所述目标代码插入第二页面的代码集中,以及根据所述目标代码在所述第二页面进行渲染。
第二方面,本申请实施例提供了一种页面元素的编辑装置,所述装置包括:
选择单元,用于在第一页面选中目标页面元素时,通过显示单元显示剪切板;
生成单元,用于获取所述目标页面元素的目标代码,以及根据所述目标页面元素生成目标图片;
建立单元,用于将所述目标图片添加到所述剪切板中,保存所述目标代码,以及建立所述目标图片和所述目标代码之间的对应关系;
确定单元,用于响应于针对所述剪切板中的所述目标图片的拖动指令,根据所述对应关系确定所述目标图片对应的目标代码;
调用单元,用于将所述目标代码插入第二页面的代码集中,以及根据所述目标代码在所述第二页面进行渲染。
第三方面,本申请实施例提供一种计算机存储介质,所述计算机存储介质存储有多条指令,所述指令适于由处理器加载并执行上述的方法步骤。
第四方面,本申请实施例提供一种终端,可包括:处理器和存储器;其中,所述存储器存储有计算机程序,所述计算机程序适于由所述处理器加载并执行上述的方法步骤。
本申请一些实施例提供的技术方案带来的有益效果至少包括:
在页面编辑过程中,将选中的页面的图片添加到剪切板中,以及保存页面的代码和图片之间的对应关系,然后响应于用户的拖动指令,将剪切板中的图片对应的代码添加到页面的代码集中,然后在页面上渲染代码,实现页面元素的复用,用户可以利用剪切板方便快捷的将页面元素导入到页面上,因此可以提高页面编辑的效率。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的一种页面元素的编辑方法的流程示意图;
图2是本申请实施例提供的一种页面元素的编辑方法的另一流程示意图;
图3~图6是本申请实施例提高的用户界面示意图;
图7是本申请实施例提供的一种页面元素的编辑装置的结构示意图;
图8是本申请实施例提供的一种终端的结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请实施例方式作进一步地详细描述。
下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反,它们仅是如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
在本申请的描述中,需要理解的是,术语“第一”、“第二”等仅用于描述目的,而不能理解为指示或暗示相对重要性。对于本领域的普通技术人员而言,可以具体情况理解上述术语在本申请中的具体含义。此外,在本申请的描述中,除非另有说明,“多个”是指两个或两个以上。“和/或”,描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
下面将结合附图1-附图6,对本申请实施例提供的页面元素的编辑方法进行详细介绍。该方法可依赖于计算机程序实现,可运行于基于冯诺依曼体系的页面元素的编辑装置上。该计算机程序可集成在应用中,也可作为独立的工具类应用运行。其中,本申请实施例中的页面元素的编辑装置可以为终端,包括但不限于智能手机、个人电脑、平板电脑、手持设备、车载设备、可穿戴设备、计算设备或连接到无线调制解调器的其它处理设备等。
请参见图1,为本申请实施例提供的一种页面元素的编辑方法的流程示意图。如图1所示,本申请实施例的所述方法可以包括以下步骤:
S101、在第一页面选中目标页面元素时,通过显示单元显示剪切板。
其中,第一页面包含一个或多个页面元素,页面元素为用户可见的UI元素,页面元素可以为具有交互功能的元素,例如:用户点击该元素实现跳转或翻页;也可以时不具有交互功能的元素;每个页面元素对应一段代码,例如:HTML代码,代码可以表示页面元素的形状、大小和显示方式等。编辑装置首先通过显示单元显示包含多个页面元素的第一页面,用户可以在第一页面上进行选择操作,选择操作可以是鼠标、键盘或触摸屏等输入装置生成的,例如:用户通过鼠标在第一页面上执行选择操作,编辑装置根据该选择操作触发选择指令,根据选择指令确定用户选择的目标页面元素,然后通过显示单元显示剪切板,剪切板为位于第一页面上层的面板或浮层,剪切板中包括一个或多个界面元素对应的图片。
S102、获取目标页面元素的目标代码,以及根据目标页面元素生成目标图片。
其中,目标代码为用于控制目标页面元素在第一页面上的位置、形状、大小和显示方式的代码,代码的类型可以为HTML代码。目标图片为基于目标页面元素在第一页面上的显示内容生成的图片数据,本申请可以基于canvas对目标代码进行渲染生成目标图片,或这对目标页面元素进行截图处理,然后对截取的图片进行裁剪和压缩得到目标图片。
S103、将目标图片添加到剪切板中,保存目标代码,以及建立目标图片和目标代码之间的对应关系。
其中,编辑装置将目标图片添加到剪切板中,剪切板中的图片可以列表的方式从上到下排列,在剪切板中存在图片时,可以将目标图片添加到剪切板的最后面,在存储器中存储目标代码,然后建立目标图片和目标代码之间的对应关系。
S104、响应于针对剪切板中的目标图片的拖动指令,根据对应关系确定目标图片对应的目标代码。
其中,用户需要复用代码时,针对剪切板执行拖动操作,编辑装置根据拖动操作生成拖动指令,拖动操作可以是鼠标、键盘或触摸屏等输入设备生成的。例如:用户使用鼠标将光标移动到目标图片上,按住鼠标左键移动鼠标对目标图片进行拖动,拖动到目标位置时松开鼠标左键完成拖动操作;或者,用户通过触摸平执行对目标图片进行拖动,用户的手指按住目标图片将目标图片拖动到指定位置,松开手指后完成拖动操作。编辑装置确定剪切板中选择的目标图片时,根据预设的对应关系查询目标图片关联的目标代码。
进一步的,编辑装置可以自动对剪切板中的图片排序,例如:编辑装置统计预设时长内各个图片的调用次数(即图片对应的代码被复用的次数),根据调用次数降序的方式对各个图片进行排序,调用次数越大的图片排在越靠前的位置,调用次数越小的图片排在越靠后的位置,可以用户将用户频繁使用的图片放在靠前的位置,减少用户查找图片的时间。
进一步的,用户也可以对剪切板中的图片进行手动排序或删除,用户对图片的位置进行上移或下移,或删除剪切板中的图片,同时删除的图片的代码也相应的删除,减少剪切板中冗余的图片。
S105、将目标代码插入第二页面的代码集中,以及根据目标代码在第二页面中进行渲染。
其中,第二页面包含多个页面元素,每个页面元素对应一个代码,将目标代码插入第二页面的代码集中,然后根据拖动指令指示的位置根据目标代码在第二页面中进行渲染得到目标页面元素,将目标页面元素布局在第二页面中。需要说明的是,第一页面和第二页面可以是同一页面,即将目标元素在同一页面中进行复制粘贴,实现目标元素的复用。
在本申请实施例中,在页面编辑过程中,将选中的页面的图片添加到剪切板中,以及保存页面的代码和图片之间的对应关系,然后响应于用户的拖动指令,将剪切板中的图片对应的代码添加到页面的代码集中,然后在页面上渲染代码,实现页面元素的复用,用户可以利用剪切板方便快捷的将页面元素导入到页面上,因此可以提高页面编辑的效率。
请参见图6,为本申请实施例提供的一种页面元素的编辑方法的流程示意图。该页面元素的编辑方法可以包括以下步骤:
S201、将第一页面划分为多个页面元素。
其中,编辑装置可以预先将第一页面划分为多个页面元素,多个页面元素为可复用的最小粒度的页面元素,页面元素为UI元素,例如:HTML DOM元素。
S202、当检测到光标移动到页面元素上时,在页面元素上显示高亮标记。
其中,页面元素的形状一般为矩形或圆形,具有一定的边界范围,当检测到光标移动到页面元素上时,在页面元素上显示高亮标记和提示音,高亮标记可以为在页面元素的边框上显示粗线框,表示该页面元素处于可选择状态。可以理解的是,当用户通过触摸屏交互时,当检测到用户的手指移动到页面元素的边界范围内时,在页面元素上显示高亮标记。
S203、响应于第一页面中的目标页面元素上的选择指令,通过显示单元显示页面编辑菜单。
其中,用户可以在第一页面中包含的多个页面元素选择一个或多个页面元素作为目标页面元素,选择的方式可以是点选或框选,选中的目标页面元素包含一个或多个最小粒度的页面元素,选择的目标页面元素上显示高亮标记,例如:虚线框。编辑装置响应于用户的选择指令,在显示单元上显示页面编辑菜单,页面编辑菜单包含保存按钮,保存按钮用户触发将选中的目标页面元素的图片添加到剪切板中,页面编辑菜单除包含保存按钮之外,还包括用于编辑网页的其他控件,例如:代码编辑控件和代码调试控件等。
S204、响应于保存按钮上的触发指令,通过显示单元显示剪切板。
其中,触发指令是用户基于触发操作生成的,例如:用户使用鼠标点击该保存按钮后,显示剪切板。
S205、获取目标页面元素的目标代码。
其中,目标代码的类型可以时HTML代码、CSS代码和Java代码中的一种或多种,表示目标页面元素的相关属性,例如:字体、位置、颜色和显示方式。
S206、对目标页面元素进行截图得到第一图片。
S207、将第一图片进行裁剪和压缩处理得到目标图片。
其中,第一图片的大小和尺寸可能不符合剪切板的要求,因此对第一图片进行裁剪得到指定尺寸,以及将第一图片进行压缩得到指定大小的目标图片。
S208、将目标图片添加到剪切板中,保存目标代码,以及建立目标图片和目标代码之间的对应关系。
其中,将目标图片添加到剪切板中,例如:将目标图片添加到剪切板的最前面,将目标代码保存至存储器中,然后建立目标图片和目标代码之间的对应关系。
容易理解,本申请也可以在向剪切板添加图片之前,不显示剪切板,直接将图片添加到剪切板中。
S209、响应于针对剪切板中的目标图片的拖动指令,根据对应关系确定目标图片对应的目标代码。
其中,编辑装置在需要对第二页面进行编辑时,在第二页面上显示剪切板,然后在剪切板上执行拖动操作,将剪切板中的目标图片拖拽到第二页面的任意位置。
S210、获取拖动指令在第二页面中的结束位置。
其中,结束位置是拖动操作在第二页面上结束的位置,例如:使用鼠标左键按压拖动目标图片时,鼠标左键松开时的位置即为拖动指令的结束位置。
S211、根据结束位置将目标代码插入第二页面的代码集中。
S212、根据目标代码渲染得到目标页面元素,以及根据结束位置布局目标页面元素。
下面就几个具体的例子对本申请的页面元素的编辑方法进行详细说明:
参见图3所示,用户选中第一页面中的目标页面元素后,显示页面编辑菜单,页面编辑菜单包括保存按钮,当光标移动到保存按钮上时,显示“暂存至剪切板”的提示消息,该提示消息用户提示保存按钮的功能,
参见图4所示,用户点击保存按钮后,显示剪切板,编辑装置获取目标页面元素的目标代码,以及目标页面元素对应的目标图片,建立目标图片和目标代码之间的对应关系,将目标图片添加到剪切板中。其中,目标图标的右上角还设置有删除按钮“×”,检测到删除按钮上的点击操作后,编辑装置可以删除该目标图片。另外,当光标移动到剪切板中的目标图片上时,会预览该目标图片在页面中的渲染效果。
参见图5所示,当需要对第二页面进行编辑时,在第二页面上显示剪切板,剪切板中包含之前添加的目标图片。
参见图6所示,用户对剪切板中的目标图片进行拖动操作,将目标图片拖拽到第二页面的左上角的位置,编辑装置根据对应关系获取目标图片的目标代码,将代码插入到第二页面的代码集的指定位置,以及在第二页面上渲染目标代码得到页面元素。
在本申请实施例中,采集当前通话的语音数据,将语音数据转换为文本数据,在识别文本数据中包括预设关键词时,查询与预设关键词关联的诈骗案例,以及通过显示单元显示诈骗案例。这样可以通过当前通话的内容识别诈骗电话,以及显示诈骗案例,用户通过阅读诈骗案例的提醒能识破诈骗分子的伎俩,降低被诈骗的风险。
下述为本申请装置实施例,可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节,请参照本申请方法实施例。
请参见图7,其示出了本申请一个示例性实施例提供的页面元素的编辑装置的结构示意图。该页面元素的编辑装置可以通过软件、硬件或者两者的结合实现成为终端的全部或一部分。该装置7包括:选择单元701、生成单元702、建立单元703、确定单元704和调用单元705。
选择单元701,用于在第一页面选中目标页面元素时,通过显示单元显示剪切板;
生成单元702,用于获取所述目标页面元素的目标代码,以及根据所述目标页面元素生成目标图片;
建立单元703,用于将所述目标图片添加到所述剪切板中,保存所述目标代码,以及建立所述目标图片和所述目标代码之间的对应关系;
确定单元704,用于响应于针对所述剪切板中的所述目标图片的拖动指令,根据所述对应关系确定所述目标图片对应的目标代码;
调用单元704,用于将所述目标代码插入第二页面的代码集中,以及根据所述目标代码在所述第二页面进行渲染。
所述在第一页面选中目标页面元素时,显示剪切板,包括:
响应于第一页面中的目标页面元素上的选择指令,通过显示单元显示页面编辑菜单;其中,所述页面编辑菜单包括保存按钮;
响应于所述保存按钮上的触发指令,通过所述显示单元显示剪切板。
在一个或多个可能的实施例中,所述在第一页面选中目标页面元素时,显示剪切板之前,还包括:
将所述第一页面划分为多个页面元素;
当检测到光标移动到所述页面元素上时,在所述页面元素上显示高亮标记。
在一个或多个可能的实施例中,所述根据所述目标页面元素生成目标图片,包括:
对所述目标页面元素进行截图得到第一图片;
将所述第一图片进行裁剪和压缩处理得到目标图片。
在一个或多个可能的实施例中,还包括:
排序单元,用于统计所述剪切板中各个图片的调用次数;以调用次数的降序方式对各个图片进行排列。
在一个或多个可能的实施例中,还包括:
编辑单元,用于响应于所述剪切板的编辑指令,将选中的图片进行删除处理和移动处理。
在一个或多个可能的实施例中,所述将所述目标代码插入第二页面的代码集中,以及根据所述目标代码在所述第二页面进行渲染,包括:
获取所述拖动指令在所述第二页面中的结束位置;
根据所述结束位置将所述目标代码插入所述第二页面的代码集中;
根据所述目标代码渲染得到目标页面元素,以及根据所述结束位置布局所述目标页面元素。
需要说明的是,上述实施例提供的页面元素的编辑装置在执行页面元素的编辑方法时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将设备的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的恢复用户数据装置与页面元素的编辑方法实施例属于同一构思,其体现实现过程详见方法实施例,这里不再赘述。
上述本申请实施例序号仅仅为了描述,不代表实施例的优劣。
本申请实施例还提供了一种计算机存储介质,所述计算机存储介质可以存储有多条指令,所述指令适于由处理器加载并执行如上述图1-图6所示实施例的方法步骤,具体执行过程可以参见图1-图6所示实施例的具体说明,在此不进行赘述。
请参见图8,为本申请实施例提供了一种终端的结构示意图。如图8所示,所述终端800可以包括:至少一个处理器801,至少一个网络接口804,用户接口803,存储器805,至少一个通信总线802。
其中,通信总线802用于实现这些组件之间的连接通信。
其中,用户接口803可以包括显示屏(Display)、摄像头(Camera),可选用户接口803还可以包括标准的有线接口、无线接口。
其中,网络接口804可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。
其中,处理器801可以包括一个或者多个处理核心。处理器801利用各种接口和线路连接整个终端800内的各个部分,通过运行或执行存储在存储器805内的指令、程序、代码集或指令集,以及调用存储在存储器805内的数据,执行终端800的各种功能和处理数据。可选的,处理器801可以采用数字信号处理(Digital Signal Processing,DSP)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)、可编程逻辑阵列(ProgrammableLogicArray,PLA)中的至少一种硬件形式来实现。处理器801可集成中央处理器(CentralProcessing Unit,CPU)、图像处理器(Graphics Processing Unit,GPU)和调制解调器等中的一种或几种的组合。其中,CPU主要处理操作系统、用户界面和应用程序等;GPU用于负责显示屏所需要显示的内容的渲染和绘制;调制解调器用于处理无线通信。可以理解的是,上述调制解调器也可以不集成到处理器801中,单独通过一块芯片进行实现。
其中,存储器805可以包括随机存储器(RandomAccess Memory,RAM),也可以包括只读存储器(Read-Only Memory)。可选的,该存储器805包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器805可用于存储指令、程序、代码、代码集或指令集。存储器805可包括存储程序区和存储数据区,其中,存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等;存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器805可选的还可以是至少一个位于远离前述处理器801的存储装置。如图8所示,作为一种计算机存储介质的存储器805中可以包括操作系统、网络通信模块、用户接口模块以及诈骗电话的识别应用程序。
在图8所示的终端800中,用户接口803主要用于为用户提供输入的接口,获取用户输入的数据;而处理器801可以用于调用存储器805中存储的诈骗电话的识别应用程序,并具体执行图1或图2所示的方法。
本申请实施例和图1或图2的方法实施例属于同一构思,其带来的技术效果也相同,具体过程可参照图1或图2的描述,此处不再赘述。
在本申请实施例中,在页面编辑过程中,将选中的页面的图片添加到剪切板中,以及保存页面的代码和图片之间的对应关系,然后响应于用户的拖动指令,将剪切板中的图片对应的代码添加到页面的代码集中,然后在页面上渲染代码,实现页面元素的复用,用户可以利用剪切板方便快捷的将页面元素导入到页面上,因此可以提高页面编辑的效率。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于一计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,所述的存储介质可为磁碟、光盘、只读存储记忆体或随机存储记忆体等。
以上所揭露的仅为本申请较佳实施例而已,当然不能以此来限定本申请之权利范围,因此依本申请权利要求所作的等同变化,仍属本申请所涵盖的范围。
- 上一篇:石墨接头机器人自动装卡簧、装栓机
- 下一篇:一种软件开发方法及装置