微信小程序WeUI 前端样式库

引言

之前在小程序开发文档上见过WeUI 前端样式库，下载下来后一直摸不着头脑，今天终得拨云见日。

其实这就是使得微信小程序和页面界面 UI 统一：WeUI 前端样式库（含 Sketch 源文件）

微信里使用的 H5 页面是相当多，特别是小程序更是火爆，为了能让页面以及微信小程序的界面能与微信统一，让用户看起来就像是微信内置的功能或页面，那么建议大家使用推荐的 WeUI 前端框架！

推荐

框架名称：WeUI 样式库
在线演示：https://weui.io
下载地址：https://github.com/weui/weui

---

Sketch 源文件

同时也推出了 WeUI 的 Sketch 源文件，如果你是设计师，可以下载这个设计源文件来设计新的微信小程序、H5网页等等，还有 Symbol，很好用哦！

文件格式：.Sketch
素材版权：免费

官方简述：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素

下面来看看 WeUI 样式库的介绍：

---

图标

图标的颜色、样式和微信原生的样式几乎一致，看不到有什么区别哦！

---

Flex 布局

使用 CSS Flex 属性定制的布局系统，轻松实现多栏自适应排版。

---

Panel 面板

可以用它来做文章列表、文章图文列表。

---

Footer 页尾样式

就是网页页脚样式~

---

提示样式

---

菜单

底部Tabbar

Navbar

---

WeUI页面层级

用于规范WeUI页面元素所属层级、层级顺序及组合规范。

需要制作一个和微信一样网页设计界面么？推荐使用 WeUI 这个框架。

如何使用WeUI样式库

WeUI是在遵守微信视觉设计规范下，由官方设计团队为小程序量身定制的基础样式库。

WeUI是官方出品，并且在10月28号IDE更新后，IDE不能识别和引用css，同时也屏蔽了从网络获取样式文件，和css划清界限。

现在到了重点：如何引入WeUI？

1. 下载WeUI

weui.wxss

注意是在【weui-wxss/dist/style/】目录下，不要【weui-wxss/src】目录里面下载

• 组件的wxml结构请看dist/example/下的组件
• 样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss文档

2. 将weui.wxss拷贝到小程序根目录中

3. 在app.wxss或页面wxss导入weui.wxss

/**app.wxss**/
@import 'weui.wxss';

4. 以上就成功引入了weui.wxss，weui也提供了单个组件的样式引入，流程同上。

地址为：单个Widget的样式文件

如何使用WeUI

• 根组件使用class="page"

class="page">
view>

• 页面骨架组件使用class="page__xxx"(注意是两个下划线)

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