小程序可视化编程

介绍

该扩展可以让开发者通过可视化的形式设计自己的小程序, 同时将设计的结果实时输出为小程序源码, 你可以随时在源码模式和可视化模式见快速切换, 无需等待编译, 实现所见即所得的开发模式.

插件使用

激活插件

当打开了axml文件时, 编辑器坐下角会显示Code/Design的切换按钮, 点击Design模式即可进入可视化编辑状态.

编辑

• 点击画板中的元素, 即可进行元素属性的编辑, 以及如a:if/a:for的绑定, 属性支持数据绑定如{{index}}, 可引用js中初始化的data/props
• 可通过鼠标进行元素的拖拽排序, 拖拽排序在画板和组件树中都是有效的
• 可将本地的自定一组件直接拖拽至画板中使用.
• 目前组件面板内置了小程序基础组件及自定义组件, 可拖拽使用, 未来会有更多的组件加入(自定义组件的安装需要等待npm安装完成后才能展示)
• 每一步操作会同步修改axml且同步到IDE的历史记录中.

保存

• command/ctrl + s可直接保存.

样式编辑

• 如果使用样式面板编辑样式, 会自动生成一个_fc_为前缀的class输出到同目录下的fancy.acss中.
• 未来将支持对自定义class的可视化编辑
• 直接编辑当前页面/组件的样式文件也可实时的反应到可视化视图

JS文件的修改

• 对于js文件的修改, 并不会实时的反应到可视化视图中, 需要你手动的点击工具栏的刷新按钮.