• 下载
  • 社区

可视化辅助编程(Beta)


适用于小程序开发者工具 1.0 及以上版本,目前只支持支付宝和淘宝开发环境

介绍

小程序开发者工具引入了设计模式,提供了可视化设计面板,让开发者可以通过拖拽的方式快速进行界面布局,同时支持代码和设计布局进行双向实时同步,使得小程序开发更加迅捷、简单和灵活。我们称之为可视化辅助编程,因为我们的目标不是取代编码本身,而是减少非必要的和重复的手工编码工作。可视化设计面板支持支付宝小程序所有的基础组件、扩展组件和自定义组件,供开发者灵活选择与使用。


image.png


使用流程

进入设计模式

点击小程序开发者工具右上方按钮,从编码模式(IDE的默认模式)进入设计模式:

在设计模式中,模拟器默认关闭,开发者可以随时点击模拟器顶部按钮唤起模拟器,模拟器将以独立窗口弹出


image.png


开发者可以随时切换回编码模式:

image.png



选择小程序页面

开发者如果打开小程序页面里面axml, css, js, json里面的任何一个文件,画布会自动定位到该页面。

注意: 如果没有选择页面,默认定位到小程序第一个页面;画布也支持自定义组件页面的可视化设计。

image.png


添加和编辑组件

开发者可以直接从组件面板拖拽到画布或者组件树,然后点击组件,在右边的设置TAB里面设置组件的属性、样式、事件和查看组件帮助文档。

注意:首次添加扩展组件时,因为会自动从网络下载并安装mini-antui NPM 包,所以需要确保网络处于连接状态,如果安装失败,需要到 NPM 管理界面手工安装mini-antui NPM 包。


fancy.gif


添加自定义组件

开发者可以直接拖拽自定义组件到画布中(点击这里进一步了解自定义组件)。

注意:不要点击打开自定义组件里面的文件,否则画布自动切换到自定义组件页面。


image.png



唤起模拟器查看运行时效果

画布只能在设计时渲染页面的静态结构和行为,并不能完全展示页面的动态行为,需要运行模拟器查看运行时效果。开发可以点击运行模拟器按钮唤起模拟器。

注意:需要保存文件以在模拟器中生效。

image.png


相关信息

这里有 基础组件 和 扩展组件 的详细文档,请点击进一步了解。


问题反馈

如果您在使用过程中有任何问题和反馈,请扫码进入钉钉群获得快捷支持:

image.png