引言
之前在小程序开发文档上见过WeUI 前端样式库,下载下来后一直摸不着头脑,今天终得拨云见日。
其实这就是使得微信小程序和页面界面 UI 统一:WeUI 前端样式库(含 Sketch 源文件)
微信里使用的 H5 页面是相当多,特别是小程序更是火爆,为了能让页面以及微信小程序的界面能与微信统一,让用户看起来就像是微信内置的功能或页面,那么建议大家使用推荐的 WeUI 前端框架!
![](http://upload-images.jianshu.io/upload_images/3409462-0897b794117d1e67.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
推荐
框架名称:WeUI 样式库
在线演示:https://weui.io
下载地址:https://github.com/weui/weui
Sketch 源文件
同时也推出了 WeUI 的 Sketch 源文件,如果你是设计师,可以下载这个设计源文件来设计新的微信小程序、H5网页等等,还有 Symbol,很好用哦!
![](http://upload-images.jianshu.io/upload_images/3409462-0e98a9a4f70cf3b0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
![](http://upload-images.jianshu.io/upload_images/3409462-95f5456f85b5d0d7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
文件格式:.Sketch
素材版权:免费
官方简述:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素
下面来看看 WeUI 样式库的介绍:
图标
图标的颜色、样式和微信原生的样式几乎一致,看不到有什么区别哦!
![](http://upload-images.jianshu.io/upload_images/3409462-e3e1302038c5cb39.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
Flex 布局
使用 CSS Flex 属性定制的布局系统,轻松实现多栏自适应排版。
![](http://upload-images.jianshu.io/upload_images/3409462-4a77e7dbaddef61f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
Panel 面板
可以用它来做文章列表、文章图文列表。
![](http://upload-images.jianshu.io/upload_images/3409462-43642258ffc01770.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/450/format/webp)
Footer 页尾样式
就是网页页脚样式~
![](http://upload-images.jianshu.io/upload_images/3409462-fda112990c4fbceb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
提示样式
![](http://upload-images.jianshu.io/upload_images/3409462-7f5fc83a9cba0f7d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
![](http://upload-images.jianshu.io/upload_images/3409462-fe6a3072590e3aea.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
![](http://upload-images.jianshu.io/upload_images/3409462-245bff70fcc01fea.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
菜单
底部Tabbar
![](http://upload-images.jianshu.io/upload_images/3409462-04058f936ae81f90.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
Navbar
![](http://upload-images.jianshu.io/upload_images/3409462-5f016af5a1d0c66e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
WeUI页面层级
用于规范WeUI页面元素所属层级、层级顺序及组合规范。
![](http://upload-images.jianshu.io/upload_images/3409462-40cdfe4230ebfcf1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500/format/webp)
需要制作一个和微信一样网页设计界面么?推荐使用 WeUI 这个框架。
如何使用WeUI样式库
WeUI是在遵守微信视觉设计规范下,由官方设计团队为小程序量身定制的基础样式库。
WeUI是官方出品,并且在10月28号IDE更新后,IDE不能识别和引用css,同时也屏蔽了从网络获取样式文件,和css划清界限。
现在到了重点:如何引入WeUI?
1. 下载WeUI
注意是在【weui-wxss/dist/style/】目录下,不要【weui-wxss/src】目录里面下载
- 组件的wxml结构请看
dist/example/
下的组件 - 样式文件可直接引用
dist/style/weui.wxss
,或者单独引用dist/style/widget
下的组件的wxss
文档
2. 将weui.wxss拷贝到小程序根目录中
![](http://upload-images.jianshu.io/upload_images/3409462-19a3cae52784712a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/602/format/webp)
3. 在app.wxss或页面wxss导入weui.wxss
/**app.wxss**/
@import 'weui.wxss';
4. 以上就成功引入了weui.wxss,weui也提供了单个组件的样式引入,流程同上。
地址为:单个Widget的样式文件
如何使用WeUI
- 根组件使用class="page"
<view class="page">
</view>
- 页面骨架组件使用class="page__xxx"(注意是两个下划线)
<view class="page">
<!--页头-->
<view class="page__hd"></view>
<!--主体-->
<view class="page__bd"></view>
<!--没有页脚-->
</view>
- 其他组件都已weui-开头后接组件名称,例如class="weui-footer"
<view class="weui-footer">我是页脚</view>
- 组件的子组件样式,例如view.weui-footer组件还有链接和版权信息。
<view class="weui-footer">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">小黄象</navigator>
</view>
<view class="weui-footer__text">Copyright © 精品专栏组</view>
</view>
组件和子组件使用两个下划线衔接,所以要区分什么时候用"-",什么时候用"__"
作者:OzanShareing
来源:简书
原文:https://www.jianshu.com/p/4198bb72a98b