用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2016-12-4 22:14:19 comeonliuqd原创达人 layout可视化工具 楼主 13831
本帖最后由 comeonliuqd 于 2016-12-6 12:29 编辑
工具简介:小程序layout设计工具,可视化方式进行小程序UI设计。通过鼠标拖拽组件方式进行UI布局。工具提供符合微信视觉统一的模板,并且按照FlexBox方式可视化布局。自动生成wxml和wxss,复制到微信开发者工具中即可同步显示。视频介绍请移步优酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html

在进行工具开发和使用时,自己想要是能够直接在画布上通过鼠标滑动进行布局的绘制那该多么方便。最终实现了此功能。目前市面上看到的类似工具中只有我们提供了鼠标绘制布局的功能。
下面是基本的绘制过程
若水GIF截图_2016年12月4日21点53分47秒.gif
下图是在微信开发者工具中的预览效果

QQ图片20161206122644.png
在画布中,按下鼠标后滑动,所显示的绿色区域代表要绘制的view。绘制view之后,通过工具的属性面板中设置flexbox的三个属性justify-content、align-items和align-content来决定内部组件的排列方式。
2016-12-01_08-32-54.png
下面说一下鼠标绘制的原理。
QQ图片20161204220044.png
此图的画布中有很多方格子。方格子是10px*10px,这样一个宽300px高200px的view就会占用30*20=600个方格。内部如果有一个宽200px高100px的view,就占用20*10=200个方格。通过这样的数学计算,便可以将一个区域通过占用方格的数量区分出多个view,便实现了鼠标绘制布局。
如果想更小的定义方格,可以通过属性面板的字体大小来设置。如下图:
QQ图片20161204220632.png
此图中每个格子是5px*5px。鼠标绘制时的效果如下图
QQ图片20161204220913.png
绿色区域便代表绘制的view的大小。
详细的操作介绍请看视频




评分

参与人数 1原创 +1 浮云 +20 收起 理由
天下雪 + 1 + 20 很给力!

查看全部评分

帮楼主改了一下视频部分,让手机端也可以播放。。。{:3_41:}发帖的事情,还是多让版主们做吧,下周我多和他们单独说说
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
发新帖
您需要登录后才可以回帖 登录 | 立即注册