fancy-mp-extension
为小程序提供所见即所得的研发模式
Last updated a month ago by itper .
ISC · Original npm · Tarball · package.json
$ cnpm install fancy-mp-extension 
SYNC missed versions from official npm registry.

小程序可视化编程

介绍

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

插件使用

激活插件

当打开了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文件的修改, 并不会实时的反应到可视化视图中, 需要你手动的点击工具栏的刷新按钮.

Current Tags

  • 1.0.3                                ...           latest (a month ago)

4 Versions

  • 1.0.3                                ...           a month ago
  • 1.0.2                                ...           2 months ago
  • 1.0.1                                ...           2 months ago
  • 1.0.0                                ...           2 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 31
Dependencies (69)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |