工具截图 此工具通过可视化操作进行布局,依据iphone6尺寸设置画布,可以自动生成rpx和百分比的wxss.后续还会增加js代码自动生成.工具中组件按照微信小程序开发规范进行了缺省设置,margin.padding.fontsize.fontfamily.color等属性按照微信视觉一致规范定制而成.软件左侧是常用组件,中间是画布,右侧是wxss属性设置面板.wviewrow组件是小程序view的延伸,自动设置主轴:row.wviewcolumn组件是小程序view的延伸,自动设置主轴:col

下图是微信官方的要求 按照小程序UI设计(3)-符合视觉规范-列表视觉规范同样的方式,我们可以设计一样符合规范的输入项目.规范中没有说明padding-left的大小,我们暂定是15px.这样最外层view的padding-left和padding-right都是15px.以  为例制作符合规范的布局.首先在工具的画布上拖拽WViewRow. 然后设置width=375,padding-left和padding-right为15.再鼠标拖拽过来两个wviewrow,一个宽度是85,一个宽度是37

上一篇我们介绍了字体规范,此贴介绍一下在列表中如何组合使用.下图是微信官方的要求   在工具中通过拖拽组件可以制作出一样的效果拖拽一个WViewRow.这个组件是小程序的view,flex-direction=row.缺省的属性如下. 放在工具的画布上是这样的 下面我们以  为例实际制作一个.此单项列表中一个view包括两个view,横向排列.最外层的view有margin-top.padding-left和padding-right.我们先定义最外层view.为了看的清楚我先把画布改成蓝色(修

工欲善其事必先利其器.下面为大家介绍一款工具软件,如何做到轻松布局. 工具简介:小程序layout设计工具,可视化方式进行小程序UI设计.通过鼠标拖拽组件方式进行UI布局.工具提供符合微信视觉统一的模板,并且按照FlexBox方式可视化布局.自动生成wxml和wxss,复制到微信开发者工具中即可同步显示.视频介绍请移步优酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html 我们平时开发工作中都会有这种情况发生,为了能够完成一个布局,css改了之

小程序中一般很少大段落的文字,基本是4.5个字的主题.一行标题.一行摘要.两行描述.显示时超出部分用省略号代替.下面结合工具使用介绍一下文字排版的方法.先看效果图.  工具中属性设置如下图:两行文字属性,限制行数=2,表示最多两行,超出部分用省略号代替. 不限制行数属性中限制行数=0,表示在小程序中根据文字内容自动拉伸. 一行文字属性中限制行数=1,表示文字只显示一行,超出部分省略号代替. 以上文字是显示在view中的,自动生成的wxml如下: <view class="WViewColu

工具中为小程序员们准备了符合微信开发规范的模板.之前帖子中介绍的规范都在模板中已经设计好了,可以直接复制粘贴使用.下图中的样式是从模板直接复制过来的.实际使用时只要更换为自己的图片和文字即可.自动生成的wxml和wxss也可以直接使用.从而大大提高了开发效率.  下面是部分模板的展示:   

下图是微信小程序官方要求字体规范 根据此要求小程序设计工具定制了符合规范的组件.如下图 工具使用时,将左侧组件拖拽到设计区域即可.字体大小和颜色都是按照规范设置的.在使用时根据微信要求在不同位置摆放即可.以下截图是text组件使用范例

FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列.第一个WViewColumn中放一个图片,第二个放两张图片.如下图展开的结构树. 下面针对第二个WViewColumn中有两个图片的FlexBox进行分解讲解. flex-direction=column说明内部组件主轴x是从上而下.flex-wrap在本工具中对于column类型的不起作用.此处

在设计工具中,根据规范我们定义了大中小三种按钮的尺寸大:720rpx *94rpx 圆角10px 字体18中:360rpx*70rpx 圆角8px 字体16 文字距离两边最小60小:120rpx*60rpx 圆角6px 字体13 文字距离两边最小30这些按钮都放在工具的模板中,如下图: 微信中固定按钮type有三种,primary=绿色,default=灰色,warn=红色.size分为default和mini.镂空效果是plain参数.使用时鼠标点击一下,然后再鼠标点击画布,然后ctrl+v粘

今天我们来个庖丁解牛.对于一个完整的组合组件,看看通过工具是如何轻松完成的.首先看看九宫格完整的样子. 结构树是这样的.在结构树中,我们可以看到WViewColumn下面有九个WViewRow.WViewColumn之上的我们可以不用管,这些是画布上的内容,为了辅助设计用的.9个WViewRow是九宫格中的实际元素item. 每个item中图片和文字上下排列,九个item换行排列.那么这些是怎么做到的呢,当然是FlexBox的作用.下面详细介绍FlexBox属性对布局的影响.首先来介绍item的

FlexBox的align-content到底是什么鬼,我也搞了好半天才开发出来,目前工具中WViewRow组件使用了此属性,WViewColumn中此属性不起作用.下图是justify-content.align-items和align-content属性组合使用的两个例子,请仔细理解一下. 大家看出来区别了吗,第一个整体右侧排列(justify-content=flex-end),第一行和第二行短黄和短红所在行上对齐(align-items=flex-start).第二个整体左对齐,第一行和

技术博客--微信小程序UI的设计与美化 在alpha阶段的开发过后,我们的小程序也上线了.看到自己努力之后的成果大家都很开心,但对比已有的表情包小程序,我们的界面还有很大的提升空间,许多的界面都是各个开发者分小组开发的,有很多界面的UI格式是不统一的.所以在beta阶段,我们展开了对UI界面美化的探讨与实现. 微信小程序的UI设计与网页端有很多相似的地方,但也有他自己的独特之处,例如导航栏,文字格式等等.要想设计出好看又简洁的UI,需要不断的收集资料,测试,改进,我们才能最终使用,由于我们都是第

使用微信小程序开发已经很长时间了,对小程序开发已经相当熟练了:但是作为一名对技术有追求的前端开发,仅仅熟练掌握小程序的开发感觉还是不够的,我们应该更进一步的去理解其背后实现的原理以及对应的考量,这可能会解释我们在开发过程中遇到的一些疑惑,比如为啥小程序不能操作dom.小程序是web技术渲染还是native技术渲染等等,另一方面对于我们个人成长也是有帮组的. 首先声明下,文章查看小程序开发者工具源码的方法仅限学习使用. 本文将从以下几个方面来说一下小程序的实现原理 如何查看小程序开发者工具源码 小

写在前面:从零开发一款自己的小程序UI组件库(一) 上节我们讲到初始化组件库模板.模板文件概述.模板上传npm以及npm包文件下载至本地并运用到项目.这节我们继续,内容主要有基础UI组件库的搭建(button组件的实例)以及如何在本地使用npm link调试npm包项目. 本节所用到的物料:mineui-weapp组件库v1.1.weapp-for-mineui程序v1.1 1.开发基础组件button 我们上节有提到,要开发组件库的话,需要在官方单组件模板的基础上,①修改tools目录下的co

最美丽的,现代化的和惊人的移动 UI 设计就在这里.今天,我们挑选了12个来自 Behance 和 Dribbble 网站的优秀用户体验的手机界面设计.这些界面设计作品都是由世界各地的优秀设计师分享,可以从中获取灵活,帮助你更好的设计出自己的优秀界面. 您可能感兴趣的相关文章 创意设计:折叠效果在移动App中的应用 经典设计:12个漂亮的移动APP网站案例 分享15套免费的扁平化界面设计素材下载 12套免费的 PSD 格式 Android UI 素材 40款 iPhone 和 iPad 应用程序

在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用 ...我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的.下面本人就讲下我在开发中是如何解决这个问题的.. 1 wxml代码. <canvas canvas-id=&quo

开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它们的你,可以关注和了解一下哦! WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. GitHub地址:https://github.com/Tencent/weui-wxss npm下载:npm i weui-wxss     iVie

Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组件示例 演示图片 快速上手 在开始使用 Wuss Weapp 之前,你需要先阅读 微信小程序自定义组件 的相关文档. 如何使用 方法一 [推荐] (通过npm安装依赖并在小程序构建npm模块) 通过使用shell命令或git定位到当前小程序开发目录,然后使用npm或者yarn安装依赖. npm in

零基础前端自学入门:小程序UI容器组件 这是一节以UI布局.容器组件的使用为主题的live,专注于布局与容器这一个点,努力把这一点讲透.这是继4月22日整体入门live“零基础周末学习小程序开发”之后,从小处着眼.细处学习的尝试. 以下是课堂计划: 最流行的布局之flex布局讲解,附<讲义:flex布局.pdf>分享 flex布局实践,讲解view.scroll-view.swiper.cover-view等组件的使用,附<讲义:小程序容器组件布局实践.pdf>分享,附demo源码

写在前面:有开发过小程序的朋友肯定知道组件化开发的特性,高内聚与低耦合.使用已有的UI组件库,诸如:vantUI-weapp.minUI-weapp等UI组件库的诞生使我们的开发速度大大的加快,丰富的组件拿来即用[更多的UI组件库.框架可查看我的另一篇博客移动端.PC端(前后台).小程序常用的UI框架.],但是大家有没有遇到过只想使用某个组件库的某个单一功能.或者想把组件库中优秀的组件集合到自己的组件库中,或者说想开发自己的UI组件库看了官网文档却无从下手呢,接下来,请跟随我,从零开发一款自己的