(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210067417.4 (22)申请日 2022.01.20 (71)申请人 阿里巴巴 （中国） 有限公司 地址 310000 浙江省杭州市滨江区长河街 道网商路69 9号4号楼5楼5 08室 (72)发明人 伍先飞　 (74)专利代理 机构 北京众达德权知识产权代理 有限公司 1 1570 专利代理师 南海燕 (51)Int.Cl. G06F 8/38(2018.01) G06F 9/451(2018.01) (54)发明名称 界面模拟方法、 装置及集成开发环境系统 (57)摘要 本申请实施例公开了界面模拟方法、 装置及 集成开发环境系统， 所述系统包括： 代码编辑器 模块以及模拟器模块； 代码编辑器模块被配置 为： 将目标界面关联的多个界面元素的元素标 识， 以及对应的素材图像提供给所述模拟器模 块； 模拟器模块被配置为： 创建界面模拟区域， 并 在所述界面模拟区域中对所述多个界面元素的 素材图像进行展示， 响应于在所述界面模拟区域 范围内对所述多个界面元素的素材图像执行的 位置拖动和/或图层上下移动操作， 确定所述多 个界面元素在所述编辑区域中的坐标信息和/或 图层关系信息， 并返回给所述代码编辑器模块。 通过本申请实施例， 可以提升界面开发效率， 降 低设计师与代码开发人员之间的沟通成本 。 权利要求书2页 说明书11页 附图2页 CN 114594949 A 2022.06.07 CN 114594949 A 1.一种集成开发环境 IDE系统， 其特 征在于， 所述系统包括代码编辑器模块以及模拟器模块； 所述代码编辑器模块被配置为： 响应于对处于开发中状态的目标界面的模拟请求， 将 所述目标界面关联的多个界面元素的元素标识， 以及对应的素材图像提供给所述模拟器模 块； 所述模拟器模块被配置为： 创建界面模拟区域， 并在所述界面模拟区域中对所述多个 界面元素的素材图像进行展示， 响应于在所述界面模拟区域范围内对所述多个界面元素的 素材图像执行 的位置拖动和/或图层上下移动操作， 确定所述多个界面元素在所述编辑区 域中的坐标信息和/或图层关系信息， 并返回给 所述代码编辑器模块； 所述代码编辑器模块还被配置为： 根据所述界面元素的元素标识， 以及对应的坐标信 息和/或图层关系信息， 生成所述目标界面的位置排版代码。 2.根据权利要求1所述的系统， 其特 征在于， 所述代码编辑器模块 运行于第一终端设备中， 或者 通过第一终端设备进行访问； 所述模拟器模块 运行于第二终端设备中， 所述第二终端设备为移动终端设备。 3.根据权利要 去2所述的系统， 其特 征在于， 所述模拟器模块具体被配置为： 根据所述移动终端设备的屏幕参数信息， 创建与所述 屏幕参数信息适配的界面模拟区域， 以便所述代码编辑器模块生成与当前移动终端设备的 机型适配的位置排版代码。 4.根据权利要 去2所述的系统， 其特 征在于， 所述模拟器模块具体被配置为： 提供多种可选的移动终端设备机型信息， 根据被选中 的目标机型对应的屏幕参数信息， 创建与该所述屏幕参数信息适配的界面模拟区域， 以便 所述代码编辑器模块 生成与所述目标机型适配的位置排版代码。 5.根据权利要 去2所述的系统， 其特 征在于， 所述第二终端设备通过有 线或者无线的方式与所述第一终端设备建立连接 。 6.根据权利要求5所述的系统， 其特 征在于， 所述代码编辑器模块具体被配置为： 检测到第二终端设备连接到所述第一终端设备， 且所述模拟器模块处于运行中状态后， 触发所述对处于开发中状态的目标界面的模拟请 求。 7.根据权利要求1所述的系统， 其特 征在于， 所述代码编辑器模块以及模拟器模块运行于同一终端设备中， 或者， 通过同一终端设 备访问。 8.根据权利要 去7所述的系统， 其特 征在于， 所述代码编辑器模块具体被配置为： 提供多种可选的移动终端设备机型信息， 并将被 选中的目标机型信息、 所述 目标界面关联的多个界面元素 的元素标识， 以及对应的素材图 像提供给所述模拟器模块； 所述模拟器模块具体被配置为： 根据所述目标机型信息对应的屏幕参数信息， 创建与 该所述屏幕参数信息适配的界面模拟区域， 以便所述代码编辑器模块生成与所述目标机型 适配的位置排版代码。 9.根据权利要 去1至8任一项所述的系统， 其特 征在于，权　利　要　求　书 1/2 页 2 CN 114594949 A 2所述代码编辑器模块具体被配置为： 在响应所述模拟请求时， 如果所述目标界面已关 联有初始位置排版代码， 则将所述初始 位置排版代码中关于各元素标识对应的初始 坐标信 息和/或图层关系信息提供 给所述模拟器模块； 所述模拟器模块具体被配置为： 根据所述初始坐标信息和/或图层关系信息， 在所述界 面模拟区域中对所述多个界面元 素的素材图像进行展示； 所述代码编 辑器模块在接收到所述模拟器模块返回的所述界面元素的元素标识， 以及 对应的坐标信息和/或图层关系信息后， 对所述目标界面的位置排版代码进行 更新。 10.一种界面模拟方法， 其特征在于， 通过集成开发环境IDE系统关联的模拟器程序执 行以下处 理： 接收所述IDE系统的代码编辑器模块提供的目标界面关联的多个界面元素的元素标 识， 以及对应的素 材图像； 创建界面模拟区域， 并在所述界面区域中对所述多个界面元 素的素材图像进行展示； 响应于在所述界面模拟区域范围内对所述多个界面元素的素材图像执行的位置拖动 和/或图层上下移动 操作， 确定所述多个界面元素在所述编辑区域中的坐标信息和/或图层 关系信息； 向所述IDE系统的代码编辑器模块返回所述多个界面元素的元素标识， 以及对应的坐 标信息和/或图层关系信息， 以便所述IDE系统的代码编辑器模块根据所述元素标识， 以及 对应的坐标信息和/或图层关系信息， 生成所述目标界面的位置排版代码。 11.一种界面模拟装置， 其特 征在于， 包括： 界面元素信息接收单元， 用于接收IDE系统的代码编辑器模块提供的目标界面关联的 多个界面元 素的元素标识， 以及对应的素 材图像； 素材图像展示单元， 用于创建界面模拟区域， 并在所述界面区域中对所述多个界面元 素的素材图像进行展示； 信息确定单元， 用于响应于在所述界面模拟区域范围内对所述多个界面元素的素材图 像执行的位置拖动和/或 图层上下移动操作， 确定所述多个界面元素在所述编辑区域中的 坐标信息和/或图层关系信息； 信息提供单元， 用于向所述IDE系统的代码编辑器模块返回所述多个界面元素的元素 标识， 以及对应的坐标信息和 /或图层关系信息， 以便所述IDE系统的代码编辑器模块根据 所述元素标识， 以及 对应的坐标信息和/或图层关系信息， 生成所述目标界面的位置排版代 码。 12.一种计算机可读存储介质， 其上存储有计算机程序， 其特征在于， 该程序被处理器 执行时实现权利要求1至10任一项所述的方法的步骤。 13.一种电子设备， 其特 征在于， 包括： 一个或多个处 理器； 以及 与所述一个或多个处理器关联的存储器， 所述存储器用于存储程序指令,所述程序指 令在被所述 一个或多个处 理器读取 执行时， 执行权利要求1至10任一项所述的方法的步骤。权　利　要　求　书 2/2 页 3 CN 114594949 A 3