小程序UI设计之-介绍篇
工具截图
此工具通过可视化操作进行布局,依据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单位)标签自动生成代码。
<ignore_js_op>


小程序UI设计之-介绍篇的更多相关文章
- 小程序UI设计(3)-符合视觉规范-列表视觉规范
上一篇我们介绍了字体规范,此贴介绍一下在列表中如何组合使用.下图是微信官方的要求 在工具中通过拖拽组件可以制作出一样的效果拖拽一个WViewRow.这个组件是小程序的view,flex-direc ...
- 小程序UI设计(1)-布局
工欲善其事必先利其器.下面为大家介绍一款工具软件,如何做到轻松布局. 工具简介:小程序layout设计工具,可视化方式进行小程序UI设计.通过鼠标拖拽组件方式进行UI布局.工具提供符合微信视觉统一的模 ...
- 小程序UI设计(4)-符合视觉规范-表单输入视觉规范
下图是微信官方的要求 按照小程序UI设计(3)-符合视觉规范-列表视觉规范同样的方式,我们可以设计一样符合规范的输入项目.规范中没有说明padding-left的大小,我们暂定是15px.这样最外层v ...
- 小程序UI设计(9)-文字排版
小程序中一般很少大段落的文字,基本是4.5个字的主题.一行标题.一行摘要.两行描述.显示时超出部分用省略号代替.下面结合工具使用介绍一下文字排版的方法.先看效果图. 工具中属性设置如下图:两行文字属 ...
- 小程序UI设计(10)-巧用模板,事半功倍
工具中为小程序员们准备了符合微信开发规范的模板.之前帖子中介绍的规范都在模板中已经设计好了,可以直接复制粘贴使用.下图中的样式是从模板直接复制过来的.实际使用时只要更换为自己的图片和文字即可.自动生成 ...
- 小程序UI设计(2)-符合视觉规范-字体规范
下图是微信小程序官方要求字体规范 根据此要求小程序设计工具定制了符合规范的组件.如下图 工具使用时,将左侧组件拖拽到设计区域即可.字体大小和颜色都是按照规范设置的.在使用时根据微信要求在不同位置摆放即 ...
- 小程序UI设计(7)-布局分解-左-上下结构
FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解 左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...
- 小程序UI设计(5)-符合视觉规范-按钮视觉规范
在设计工具中,根据规范我们定义了大中小三种按钮的尺寸大:720rpx *94rpx 圆角10px 字体18中:360rpx*70rpx 圆角8px 字体16 文字距离两边最小60小:120rpx*60 ...
- 小程序UI设计(6)-布局分解-九宫格
今天我们来个庖丁解牛.对于一个完整的组合组件,看看通过工具是如何轻松完成的.首先看看九宫格完整的样子. 结构树是这样的.在结构树中,我们可以看到WViewColumn下面有九个WViewRow.WVi ...
随机推荐
- LoadRunner脚本编写之二
LoadRunner脚本编写之二 编程基本语法必须要记牢.程序的思想也很重要. 下面来回顾一下嵌套循环例子. Action() { int i,j; //生命两个变量 for ( ...
- c++11实现线程池
http://note.youdao.com/noteshare?id=de17ff681b277bb914ef46aeb9271fc4
- strip使用
strip作用:去掉空格.以及想要去掉的字符,实例如下: In [42]: import subprocess In [42]: output=subprocess.check_output([&qu ...
- spring-boot集成5:集成jrebel实现热加载
Why Jrebel? 使用jrebel可以方便的实现spring-boot项目的热部署,直接reload更改的class,无需重启,提升开发效率. 1.安装jrebel插件 在idea中安装jreb ...
- vim简单题练习-------出自《鸟哥的linux私房菜》第309页码题目
用vim打开文件,在第34行向右移动15字符,怎么做? 34G 15->或者15j 如何到达文件的页首或者页尾? 1G或者gg G 如何在光标所在行中,移动到行头及行尾? home end vi ...
- 差分+贪心:IncDec序列
原题 题目描述给定一个长度为 n 的数列 a1,a2,…,ana1,a2,…,an,每次可以选择一个区间 [l,r][l,r],使下标在这个区间内的数都加一或者都减一. 求至少需要多少次操作才能使数列 ...
- SQLite扫描
SQLite的扫盲 SQLite的是一种嵌入式数据库,它的数据库就是一个文件.由于SQLite的本身是Ç写的,而且体积很小,所以经常被集成到各种应用程序中,主要在手机的应用中使用. 之前没有遇到过关于 ...
- python 爬虫 基于requests模块发起ajax的get请求
基于requests模块发起ajax的get请求 需求:爬取豆瓣电影分类排行榜 https://movie.douban.com/中的电影详情数据 用抓包工具捉取 使用ajax加载页面的请求 鼠标往下 ...
- jenkins自动化部署springboot
一.linux按jar包名称部署 1.执行shell PID=$(ps -ef | grep app.jar | grep -v grep | awk '{ print $2 }') if [ -z ...
- [LGP4859,...] 一类奇怪的容斥套DP
漫山遍野都是fake的光影. 题目 [LGP4859] 已经没有什么好害怕的了 给定两个长度为n的数组a和b,将a中元素与b中元素配对,求满足ai>bj的配对(i,j)个数减去满足ai<b ...