用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2016-11-20 14:06:49 comeonliuqd原创达人 layout可视化工具 楼主 4310197
本帖最后由 comeonliuqd 于 2016-11-30 22:07 编辑

先看下工具截图
介绍.png

视频介绍

此工具通过可视化操作进行布局,依据iphone6尺寸设置画布,可以自动生成rpx和百分比的wxss。后续还会增加js代码自动生成。
工具中组件按照微信小程序开发规范进行了缺省设置,margin、padding、fontsize、fontfamily、color等属性按照微信视觉一致规范定制而成。
软件左侧是常用组件,中间是画布,右侧是wxss属性设置面板。
wviewrow组件是小程序view的延伸,自动设置主轴:row。
wviewcolumn组件是小程序view的延伸,自动设置主轴:column。
wtextinput#组件按照微信规范设置字体大小。
wscrollview对应微信的scroll-view组件。
wswiper对应微信的swiper组件。
布局之后,点击下面的wxml,wxss,wxsspercent(百分比单位),wxssrpx(rpx单位)标签自动生成代码。
demo2.png
基本操作
CTL+鼠标滚轴:放大缩小画布
CTL+C:复制
CTL+V:粘贴
CTL+右箭头:组件宽度放大微调
CTL+左箭头:组件宽度缩小微调
组件对齐:多选组件后,鼠标右键菜单可以进行组件对齐

工具下载链接http://pan.baidu.com/s/1hsBfDXy



程序更新(2016-11-25)
增加wxss导入功能。导入后双击classname后自动刷新画布中组件样式
双击刷样式.gif


程序更新(2016-11-29)
增加设计时padding和margin提示
QQ图片20161129104854.png
增加flexbox的align-content属性
QQ图片20161129105344.png QQ图片20161129105400.png
增加flex-wrap属性,view中组件自动换行。
下图第一个宽度允许情况下,蓝红两个view在同一行。第二个自动换行。
QQ图片20161129105604.png
view中文字自动换行和省略号
QQ图片20161129110418.png QQ图片20161129110333.png




评分

参与人数 1原创 +1 浮云 +20 收起 理由
天下雪 + 1 + 20 赞一个!

查看全部评分

本软件是为提升ui设计效率而研发的。开发初衷是为了提高UI设计效率。在平时项目开发时,由于本人不是专业美工设计,因此在UI设计上浪费了很多时间。所以“一怒之下”开发了这个工具。
软件包括小程序的组件、模板,可以通过鼠标拖拽方式进行ui设计。也可以导入wxss使用类似格式刷的功能来刷新画布中组件样式。
下周奉上软件入门教程。
本工具正在继续研发更新中.....
一款正在更新的可视化工具,大家可以试用一下
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
歌真好听

我们刚开了一个拓展练习区,同学给点建议和意见,刚好架构狮级别可以进去,其他级别进不去
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
{:5_111:}这个是真厉害了word哥。应该是注重于UI这一块的吧?js方面的功能有没有?
2016-11-21 10:58:17 goto001 架构狮
7#
这个可以有,wxml和wxss把我头都弄大了
笑若天河 发表于 2016-11-21 10:33
这个是真厉害了word哥。应该是注重于UI这一块的吧?js方面的功能有没有? ...

js功能正在开发中
goto001 发表于 2016-11-21 10:58
这个可以有,wxml和wxss把我头都弄大了

是啊是啊,我是后端转的,js对我还说还比较友好,wxml也还行,css真是……做到我想死的心都有了。
本帖最后由 comeonliuqd 于 2016-11-27 21:02 编辑

最新下载已更新正文链接

楼主的勤奋令人佩服       假如有工具的支持者来到论坛      楼主可以给予其layout可视化工具的用户组       作为你们团队成员
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
最新下载请使用正文中的链接
comeonliuqd 发表于 2016-11-22 21:55
最新下载请使用正文中的链接

手机版已经可见视频,我临时用了一个折中的方法先解决了再说,这个是discuz官方设计的缺陷,原本插入视频后代码为:
[AppleScript] 纯文本查看 复制代码
[flash]视频[/flash]


在flash后加new即可

[AppleScript] 纯文本查看 复制代码
[flashnew]视频[/flashnew]

有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
正文下载链接失效了
delulu 发表于 2016-11-24 09:27
正文下载链接失效了

可以了
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
两个链接都失效啦

评分

参与人数 1浮云 +1 收起 理由
天下雪 + 1 可以了

查看全部评分

123下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册