概述
安装可视化搭建通过vscode插件形式集成到IDE中, 在TBE或者vscode中, 搜索 fancy 扩展, 安装使用 启动当插件识别到当前打开的文件为axml文件时, 在右上角会出现 功能介绍使用组件基础组件
小程序基础组件已内置到可视化搭建中, 可在左侧资源面板拖拽使用
属性编辑选中组件后可对组件进行属性编辑 编辑样式可在可视化搭建中编辑样式, 选中一个元素后, 点击 编辑样式 按钮
保存及历史记录可视化区域的修改会实时的修改axml变更的部分, axml的修改通过vscode提供的api修改, 所以在axml视图中, 会和手动编辑文件一样保存历史记录
可视化搭建有独立的历史记录, 可通过cmd + z 或者 快捷键cmd + s保存 cmd + z 撤销 cmd + shift + z 重做 cmd + c 复制 cmd + v 粘贴 cmd + x 剪切 delete 删除 结构视图当页面繁琐时, 可视化区域拖拽可能无法很好的满足需求, 这时可以通过结构面板辅助完成
当开始拖拽时, 会自动激活结构面板, 实时显示当前节点即将释放到的位置
可直接操作结构视图中的节点进行排序, 删除等.
内置的基础组件, 自定义组件也可以直接在结构视图中操作.
双击结构视图中的节点, 可调转到属性面板.
指令通过指令面板可对选中节点添加a:if a:for指令, 指令引用的表达式和axml中写法一致. 可引用通过mock数据的形式, 在可视化区域预览效果 常见问题对于部分如view容器, 默认0高度, 无法直接直接添加子组件. 拖拽至结构视图, 通过结构视图添加子节点 为这类组件添加样式. 后续可视化搭建会为此添加优化, 增加默认样式 对textNode的处理 默认通过可视化搭建出的axml, 文本都以text组件形式出现. 如果axml中已经存在文本和其他组件混合的情况, 则可编辑文件所在节点的属性面板中的value进行编辑 图片当前只支持网络图片 节点上的自定义数据data暂未支持 问题反馈插件使用及体验问题 @古泽 axml转换问题 @所染(yasong.wys) 视图展示问题 @谦勤(qianqin.zl) |
点击启动.
创建page文件夹, 在app.json中添加pages配置, 创建index.axml文件, 打开后点击右上角按钮(可视化搭建尝试创建acss, js, json文件)
自定义组件
可视化搭建支持开发者的自定义组件, 配置自定义组件json中的component = true后, 可直接将改文件拖拽至可视化区域使用
添加后会自动为page.json添加依赖
会自动为节点添加一个唯一的class, 以_fc-开头, 样式会实时编译并应用到页面中.
样式最终会输出到单独的文件fancy.acss中, 自动为index.acss添加import引入.
fancy.acss为可视化搭建维护, 不建议修改, 开发者自己可在index.acss添加一些全局样式
后续会对全局样式编辑进行优化, 同时增加样式的可视化编辑能力.
进行撤销
在可视化视图通过cmd + s触发保存后, 会同步的将axml文件保存.