(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210093043.3 (22)申请日 2022.01.26 (71)申请人 北京飞书科技有限公司 地址 100096 北京市海淀区西三 旗沁春家 园1号楼、 2号楼、 3号楼 2层201-20 31室 (72)发明人 张卿宇　李纪飞　熊煜峰　 (74)专利代理 机构 北京开阳星知识产权代理有 限公司 1 1710 专利代理师 王艳斌 (51)Int.Cl. G06F 9/451(2018.01) (54)发明名称 界面展示方法、 装置、 设备及 介质 (57)摘要 本公开实施例涉及一种界面展示方法、 装 置、 设备及介质， 其中该方法包括： 响应于在第一 页面中对目标组件的触发操作， 在第二页面的第 一区域显示所述目标组件的代码编辑界面； 获取 所述代码编辑界面中的编辑内容， 并将所述编辑 内容发送至服务器； 接收所述服务器根据所述编 辑内容返回的代码编译结果， 根据所述代码编译 结果在第二页面的第二区域显示渲染结果。 采用 上述技术方案， 在客户端侧实现内容编辑以及同 步展示与编辑内容对应的渲染结果， 实现界面开 发过程中的实时渲染和预览， 解决了相关技术中 界面开发方案使用路径长、 上手和使用成本高的 技术问题， 简化用户操作。 权利要求书2页 说明书12页 附图3页 CN 114489902 A 2022.05.13 CN 114489902 A 1.一种界面展示方法， 其特 征在于， 包括： 响应于在第 一页面中对目标组件的触发操作， 在第 二页面的第 一区域显示所述目标组 件的代码编辑界面； 获取所述代码编辑界面中的编辑内容， 并将所述编辑内容发送至服 务器； 接收所述服务器根据 所述编辑内容返回的代码编译结果， 根据 所述代码编译结果在所 述第二页面的第二区域显示 渲染结果。 2.如权利要求1所述的方法， 其特征在于， 在 响应于在第 一页面中对目标组件的触发操 作， 在第二页面的第一区域显示所述目标组件的代码编辑界面之前， 所述方法还 包括： 响应于在第一页面对目标组件标识选取操作， 在所述第一页面中创建所述目标组件。 3.如权利要求2所述的方法， 其特征在于， 所述响应于在第 一页面中对目标组件的触发 操作， 在第二页面的第一区域显示所述目标组件的代码编辑界面， 包括： 响应于在第 一页面中对目标组件的触发操作， 显示第 二页面， 其中， 所述第 二页面的第 一区域显示所述目标组件的代码编辑界面， 所述第二页面的第二区域显示所述目标组件。 4.如权利要求1所述的方法， 其特征在于， 所述获取所述代码编辑界面中的编辑内容， 并将所述编辑内容发送至服 务器， 包括： 按照预设时间间隔检测在当前时刻所述代码编辑界面中的第一内容和上一时刻所述 代码编辑界面中的第二内容； 当检测到所述第 一内容与第 二内容不一致的情况下， 将所述第 一内容发送至所述服务 器。 5.如权利要求1所述的方法， 其特征在于， 所述根据 所述代码编译结果在所述第 二页面 的第二区域显示 渲染结果， 包括： 在检测到所述服务器返回的所述代码编译结果包括问题标识的情况下， 在所述第 二页 面的第二区域显示预设的渲染 失败占位图。 6.如权利要求1所述的方法， 其特 征在于， 还 包括： 将所述代码编辑界面中的编辑内容与预设白名单进行匹配， 其中， 所述 白名单包括第 一标签和第一属性； 当检测到所述编辑内容中包括第二标签和/或第二属性的情况下， 根据所述第二标签 和/或第二属性生成风险提示信息， 其中， 所述第一标签与所述第二标签不同， 所述第一属 性与所述第二属性 不同。 7.一种界面展示方法， 其特 征在于， 包括： 接收客户端发送 的编辑内容， 其中， 所述编辑内容是通过在第一区域显示的目标组件 的代码编辑界面得到的； 根据所述编辑内容进行编译处 理， 生成代码编译结果； 将所述代码编译结果发送至客户端， 以使所述客户端根据 所述代码编译结果在第 二区 域显示渲染结果。 8.如权利要求7所述的方法， 其特征在于， 所述根据所述编辑内容进行编译处理， 生成 代码编译结果， 包括： 解析所述编辑内容， 获取 所述编辑内容包 含的第三标签和/或第三属性； 将所述第三标签和/或第三属性与预设黑名单匹配， 在所述黑名单中存在与所述第三权　利　要　求　书 1/2 页 2 CN 114489902 A 2标签相同的内容的情况下， 或者， 在所述黑名单中存在与所述第三属 性相同的内容的情况 下， 生成所述目标组件的问题标识。 9.如权利要求7所述的方法， 其特征在于， 所述根据所述编辑内容进行编译处理， 生成 代码编译结果， 包括： 解析所述编辑内容， 确定待调用的目标 软件开发工具包； 根据所述目标 软件开发工具包获取平台系统的目标 数据； 根据所述编辑内容和所述目标 数据进行编译处 理， 生成所述代码编译结果。 10.如权利要求7 所述的方法， 其特 征在于， 还 包括： 根据待调整列表检测所述编辑内容， 从所述编 辑内容的脚本标签下确定待调整的全局 应用程序接口； 对所述全局应用程序接口进行屏蔽处理， 或者， 将所述全局应用程序接口的原始应用 程序接口改写为目标应用程序接口， 其中， 所述目标应用程序接口在脚本作用域内。 11.一种界面展示装置， 其特 征在于， 包括： 第一展示模块， 用于响应于在第一页面对目标组件的触发操作， 在第二页面的第一区 域显示所述目标组件的代码编辑界面； 发送模块， 用于获取所述代码编辑界面中的编辑内容， 并将所述编辑内容发送至服务 器； 第二展示模块， 用于接收所述服务器根据所述编辑内容返回的代码编译结果， 根据所 述代码编译结果在所述第二页面的第二区域显示 渲染结果。 12.一种界面展示装置， 其特 征在于， 包括： 接收模块， 用于接收客户端发送的编辑内容， 其中， 所述编 辑内容是通过在第 一区域显 示的目标组件的代码编辑界面得到的； 构建模块， 用于根据所述编辑内容进行编译处 理， 生成代码编译结果； 发送模块， 用于将所述代码编译结果发送至客户端， 以使所述客户端根据所述代码编 译结果在第二区域显示 渲染结果。 13.一种电子设备， 其特 征在于， 所述电子设备包括： 处理器； 用于存储所述处 理器可执行指令的存 储器； 所述处理器， 用于从所述存储器中读取所述可执行指令， 并执行所述指令以实现上述 权利要求 1‑6中任一所述的界面展示方法， 或者， 实现上述权利要求7 ‑10中任一所述的界面 展示方法。 14.一种计算机可读存储介质， 其特征在于， 所述存储介质存储有计算机程序， 所述计 算机程序用于执行上述权利要求 1‑6中任一所述的界面展示方法， 或者， 执行上述权利要求 7‑10中任一所述的界面展示方法。 15.一种计算机程序产品， 其特征在于， 所述计算机程序产品包括计算机程序/指令， 所 述计算机程序/指令被处理器执行时实现如权利要求1 ‑6中任一所述的界面展示方法， 或 者， 实现如权利要求7 ‑10中任一所述的界面展示方法。权　利　要　求　书 2/2 页 3 CN 114489902 A 3