本公开实施例涉及一种界面展示方法、装置、设备及介质，其中该方法包括：响应于在第一页面中对目标组件的触发操作，在第二页面的第一区域显示所述目标组件的代码编辑界面；获取所述代码编辑界面中的编辑内容，并将所述编辑内容发送至服务器；接收所述服务器根据所述编辑内容返回的代码编译结果，根据所述代码编译结果在第二页面的第二区域显示渲染结果。采用上述技术方案，在客户端侧实现内容编辑以及同步展示与编辑内容对应的渲染结果，实现界面开发过程中的实时渲染和预览，解决了相关技术中界面开发方案使用路径长、上手和使用成本高的技术问题，简化用户操作。简化用户操作。简化用户操作。
【技术实现步骤摘要】
界面展示方法、装置、设备及介质
[0001]本公开涉及计算机
，尤其涉及一种界面展示方法、装置、设备及介质。
技术介绍
[0002]前端界面开发是创建前端界面呈现给用户的过程，随着人们对前端界面的视觉效果和交互功能等需求的日益增长，各式各样的前端界面随之产生。在应用搭建类产品中，开发者通常通过代码的方式实现自定义的前端界面的开发。
[0003]相关技术中，在本地实现前端界面的代码编辑，通过工具推送或上传代码包至平台，通过代码包进行应用搭建，该界面开发方案中使用路径长，上手和使用成本较高。
技术实现思路
[0004]为了解决上述技术问题，本公开提供了一种界面展示方法、装置、设备及介质。
[0005]本公开实施例提供了一种界面展示方法，所述方法包括：
[0006]响应于在第一页面对目标组件的触发操作，在第二页面的第一区域显示所述目标组件的代码编辑界面；
[0007]获取所述代码编辑界面中的编辑内容，并将所述编辑内容发送至服务器；
[0008]接收所述服务器根据所述编辑内容返回的代码编译结果，根据所述代码编译结果在所述第二页面的第二区域显示渲染结果。
[0009]本公开实施例还提供了另一种界面展示方法，所述方法包括：
[0010]接收客户端发送的编辑内容，其中，所述编辑内容是通过在第一区域显示的目标组件的代码编辑界面得到的；
[0011]根据所述编辑内容进行编译处理，生成代码编译结果；
[0012]将所述代码编译结果发送至客户端，以使所述客户端根据所述代码编译结果在第二区域显示渲染结果。
[0013]本公开实施例还提供了一种界面展示装置，所述装置包括：
[0014]第一展示模块，用于响应于在第一页面对目标组件的触发操作，在第二页面的第一区域显示所述目标组件的代码编辑界面；
[0015]发送模块，用于获取所述代码编辑界面中的编辑内容，并将所述编辑内容发送至服务器；
[0016]第二展示模块，用于接收所述服务器根据所述编辑内容返回的代码编译结果，根据所述代码编译结果在所述第二页面的第二区域显示渲染结果。
[0017]本公开实施例还提供了另一种界面展示装置，所述装置包括：
[0018]接收模块，用于接收客户端发送的编辑内容，其中，所述编辑内容是通过在第一区域显示的目标组件的代码编辑界面得到的；
[0019]构建模块，用于根据所述编辑内容进行编译处理，生成代码编译结果；
[0020]发送模块，用于将所述代码编译结果发送至客户端，以使所述客户端根据所述代
码编译结果在第二区域显示渲染结果。
[0021]本公开实施例还提供了一种电子设备，所述电子设备包括：处理器；用于存储所述处理器可执行指令的存储器；所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现如本公开实施例提供的界面展示方法。
[0022]本公开实施例还提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行如本公开实施例提供的界面展示方法。
[0023]本公开实施例还提供了一种计算机程序产品，所述计算机程序产品包括计算机程序/指令，所述计算机程序/指令被处理器执行时实现如本公开实施例提供的界面展示方法。
[0024]本公开实施例提供的技术方案与现有技术相比具有如下优点：本公开实施例提供的界面展示方案，客户端响应于在第一页面对目标组件的触发操作，在第二页面的第一区域显示目标组件的代码编辑界面，客户端获取代码编辑界面中的编辑内容，并将编辑内容发送至服务器，以及接收服务器根据编辑内容返回的代码编译结果，客户端根据代码编译结果在第二页面的第二区域显示渲染结果。由此，通过在客户端侧实现编辑内容的编辑以及同步展示与编辑内容对应的渲染结果，实现界面开发过程中的实时渲染和预览，提供了支持代码在线编辑、实时预览的功能，解决了相关技术中界面开发方案使用路径长、上手和使用成本高的技术问题，简化用户操作。
附图说明
[0025]结合附图并参考以下具体实施方式，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中，相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的，原件和元素不一定按照比例绘制。
[0026]图1为本公开实施例提供的一种界面展示方法的流程示意图；
[0027]图2为本公开实施例提供的一种第二页面的示意图；
[0028]图3为本公开实施例提供的另一种界面展示方法的流程示意图；
[0029]图4为本公开实施例提供的另一种界面展示方法的流程示意图；
[0030]图5为本公开实施例提供的另一种界面展示方法的流程示意图；
[0031]图6为本公开实施例提供的一种界面展示装置的结构示意图；
[0032]图7为本公开实施例提供的另一种界面展示装置的结构示意图；
[0033]图8为本公开实施例提供的一种电子设备的结构示意图。
具体实施方式
[0034]下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。
[0035]本公开实施例提供了一种界面展示方法，下面结合具体的实施例对该方法进行介绍。
[0036]图1为本公开实施例提供的一种界面展示方法的流程示意图，该方法可以由界面
展示装置执行，其中该装置可以采用软件和/或硬件实现，一般可集成在电子设备中。如图1所示，该方法包括：
[0037]步骤101，响应于在第一页面对目标组件的触发操作，在第二页面的第一区域显示目标组件的代码编辑界面。
[0038]本公开实施例的方法，可以应用于客户端。
[0039]本公开实施例中，响应于在第一页面对目标组件的触发操作，显示第二页面，第二页面包括第一区域和第二区域，第一区域与第二区域可以按照左右排列、上下排列等方式设置，此处不作具体限制。其中，第二页面的第一区域显示目标组件的代码编辑界面，，该代码编辑界面可用于用户输入编辑内容，并将编辑内容展示在该代码编辑界面中，第二页面的第二区域显示目标组件。
[0040]其中，目标组件可以是用于界面开发的组件，例如目标组件为HTML(Hyper Text Markup Language，超文本标记语言)组件。HTML组件是支持通过HTML语法定制个性化展示界面的一种页面组件，具有在线编辑、实时预览、轻量便捷的特点，通过HTML组件，可以实现诸如视频、轮播图、搜索框、流光溢彩文字、展示柜等形式的页面元素。
[0041]其中，触发操作的实现方式有多种，包括但不限于点击操作、语音输入操作、触控操作。
[0042]可选地，在响应于在第一页面中对目标本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种界面展示方法，其特征在于，包括：响应于在第一页面中对目标组件的触发操作，在第二页面的第一区域显示所述目标组件的代码编辑界面；获取所述代码编辑界面中的编辑内容，并将所述编辑内容发送至服务器；接收所述服务器根据所述编辑内容返回的代码编译结果，根据所述代码编译结果在所述第二页面的第二区域显示渲染结果。2.如权利要求1所述的方法，其特征在于，在响应于在第一页面中对目标组件的触发操作，在第二页面的第一区域显示所述目标组件的代码编辑界面之前，所述方法还包括：响应于在第一页面对目标组件标识选取操作，在所述第一页面中创建所述目标组件。3.如权利要求2所述的方法，其特征在于，所述响应于在第一页面中对目标组件的触发操作，在第二页面的第一区域显示所述目标组件的代码编辑界面，包括：响应于在第一页面中对目标组件的触发操作，显示第二页面，其中，所述第二页面的第一区域显示所述目标组件的代码编辑界面，所述第二页面的第二区域显示所述目标组件。4.如权利要求1所述的方法，其特征在于，所述获取所述代码编辑界面中的编辑内容，并将所述编辑内容发送至服务器，包括：按照预设时间间隔检测在当前时刻所述代码编辑界面中的第一内容和上一时刻所述代码编辑界面中的第二内容；当检测到所述第一内容与第二内容不一致的情况下，将所述第一内容发送至所述服务器。5.如权利要求1所述的方法，其特征在于，所述根据所述代码编译结果在所述第二页面的第二区域显示渲染结果，包括：在检测到所述服务器返回的所述代码编译结果包括问题标识的情况下，在所述第二页面的第二区域显示预设的渲染失败占位图。6.如权利要求1所述的方法，其特征在于，还包括：将所述代码编辑界面中的编辑内容与预设白名单进行匹配，其中，所述白名单包括第一标签和第一属性；当检测到所述编辑内容中包括第二标签和/或第二属性的情况下，根据所述第二标签和/或第二属性生成风险提示信息，其中，所述第一标签与所述第二标签不同，所述第一属性与所述第二属性不同。7.一种界面展示方法，其特征在于，包括：接收客户端发送的编辑内容，其中，所述编辑内容是通过在第一区域显示的目标组件的代码编辑界面得到的；根据所述编辑内容进行编译处理，生成代码编译结果；将所述代码编译结果发送至客户端，以使所述客户端根据所述代码编译结果在第二区域显示渲染结果。8.如权利要求7所述的方法，其特征在于，所述根据所述编辑内容进行编译处理，生成代码编译结果，包括：解析所述编辑内容，获取所述编辑内容包含的第三标签和/或第三属性；将所述第三标签和/或第三属性与预设黑名单匹配，在所述黑名单中存在与所述第三
标签...
【专利技术属性】
技术研发人员：张卿宇，李纪飞，熊煜峰，
申请(专利权)人：北京飞书科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。