更新时间：2023-07-28 17:42:03收藏订阅更新我的文档设置返回文档简介小程序开发者工具引入了设计模式，提供了可视化设计面板，让开发者可以通过拖拽的方式快速进行界面布局，同时支持代码和设计布局进行双向实时同步，使得小程序开发更加迅捷、简单和灵活。称之为可视化辅助编程，可视化辅助编程的目标不是取代编码本身，而是减少非必要的和重复的手工编码工作。可视化设计面板支持支付宝小程序所有的基础组件、扩展组件和自定义组件，供开发者灵活选择与使用。 使用限制●支持小程序开发者工具 1.0 及以上版本。●支持支付宝开发环境。使用流程进入设计模式点击小程序开发者工具右上方按钮，从编码模式（ide 的默认模式）进入设计模式。 说明： 在设计模式中，模拟器默认关闭，开发者可以随时点击模拟器顶部按钮唤起模拟器，模拟器将以独立窗口弹出。开发者可以随时切换回编码模式。选择小程序页面开发者如果打开小程序页面里面 axml、css、js、json 里面的任何一个文件，画布会自动定位到该页面。注意： 如果没有选择页面，默认定位到小程序第一个页面；画布也支持自定义组件页面的可视化设计。添加和编辑组件开发者可以直接从组件面板拖拽到画布或者组件树，然后点击组件，在右边的设置 tab 里面设置组件的属性、样式、事件和查看组件帮助文档。注意： 首次添加扩展组件时，因为会自动从网络下载并安装 mini-ali-ui npm 包，所以需要确保网络处于连接状态，如果安装失败，需要到 npm 管理界面手工安装 mini-ali-ui npm 包。添加自定义组件开发者可以直接拖拽自定义组件到画布中，详情可查看 自定义组件。注意： 不要点击打开自定义组件里面的文件，否则画布自动切换到自定义组件页面。唤起模拟器查看运行时效果画布只能在设计时渲染页面的静态结构和行为，并不能完全展示页面的动态行为，需要运行模拟器查看运行时效果。开发者可以点击运行模拟器按钮唤起模拟器。注意： 需要保存文件以在模拟器中生效。相关信息●组件●自定义组件问题反馈如有其它疑问可以点击页面右侧咨询按钮寻求凯发app官方网站的技术支持帮助。
