weui安装教程（WeUI-为微信）
weui安装教程（WeUI-为微信）WebUI页面层级import "weui";示例WeUI 提供了页面层级规范，用于规范页面元素所属的层级、层级顺序，和组合规范。最底层是内容页面，其上是导航页面，然后是则遮盖层，最上方则是弹出页面。WeUI 作为一个前端基础样式库，只需引入单个 CSS 样式文件就可以使用了，项目提供了 CDN 链接：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=0"> <title>WeUI</title>
微信，其自身作为一个移动端的应用而言，具有独特视觉标准和交互体验设计。而当我们进行微信内的页面，或是微信小程序的开发时，一般都需要遵循微信的设计语言，尽可能地模仿微信自身的视觉设计，保持用户体验上的一致性。为此，微信团队开源了官方的基础样式库 WeUI，使得开发者和设计师们只需引入样式文件，就能使用微信样式的元素组件，十分方便。
WeUI - 微信基础样式库
简介WeUI，是 Tencent（腾讯开源） 在 Github 上开源的微信风格的基础样式库，项目位于 https://github.com/Tencent/weui，目前版本为 v2.4.0。WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素，适配 iOS 和安卓系统，视觉标准基本与微信保持一致。对于进行微信内网页和微信小程序开发而言，可以十分方便地实现与微信协调一致的基础 UI 界面，提升用户视觉体验。
WeUI Github项目
安装WeUI 作为一个前端基础样式库，只需引入单个 CSS 样式文件就可以使用了，项目提供了 CDN 链接：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1 user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI CDN 链接 -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.0/weui.min.css"/>
</head>
<body>
<!-- 使用 -->
<a href="javascript:;" class="weui-btn weui-btn_primary">绿色按钮</a>
</body>
</html>
也可以通过 npm 进行下载，引入到前端项目中：
npm install --save weui
然后在 Node 项目中引用：
import "weui";示例
WeUI 提供了页面层级规范，用于规范页面元素所属的层级、层级顺序，和组合规范。最底层是内容页面，其上是导航页面，然后是则遮盖层，最上方则是弹出页面。
WebUI页面层级
WeUI 提供了丰富的移动端组件，包括：
- 基础组件：包括 Flex 布局、面板、图标、进度条等
- 表单：包括 按钮、输入框、选择框、列表等
- 操作反馈：包括 对话框、消息、弹出式显示等
- 导航相关：包括 导航栏、标签栏等
- 搜索相关：搜索栏等
WeUI组件
WeUI 提供了微信风格的按钮，包括绿色的主要按钮，以及次操作和警告类操作按钮等，包含了加载中和不可用等按钮状态：
WeUI按钮
对应的 HTML 代码如下：
<a href="javascript:" class="weui-btn weui-btn_primary">页面主操作</a>
<a href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>页面主操作</a>
<a href="javascript:" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作</a>
WeUI 提供了基本的表单结构组件，一个表单，由
- 头部区域
- 控件区域
- 提示区域
- 操作区域
- 底部信息区
这几个部分组成，可以适应不同的表单应用场景。
WeUI表单
WeUI 提供了基础的列表组件，可以实现带说明的、带图标和说明的、带跳转的等的列表项，方便向用户展示多行信息：
WeUI列表
WeUI 提供了 Badge 徽章组件，可以实现小红点、未读数字、列表标签等多种应用场景：
WeUI徽章
实现小红点的代码如下，使用 weui-badge_dot 的 class 实现：
<div class="weui-cells__title">新消息提示跟摘要信息后，统一在列表右侧</div>
<div class="weui-cells">
<div class="weui-cell weui-cell_active weui-cell_access">
<div class="weui-cell__bd">单行列表</div>
<div class="weui-cell__ft" style="font-size: 0;">
<span style="vertical-align: middle; font-size: 17px;">详细信息</span>
<span class="weui-badge weui-badge_dot" style="margin-left: 5px; margin-right: 5px;"></span>
</div>
</div>
</div>
WeUI 支持 Flex 布局，自动实现等宽的水平布局：
WeUI Flex布局
对于消息反馈方面，WeUI 提供了对话框，支持 iOS 样式和安卓样式的对话框，提供了携带较多信息的强用户提醒：
WeUI对话框
WeUI 还提供了消息页面，为操作结果提供反馈，提示操作成功或是失败，并提供进一步跳转操作：
WeUI消息
WeUI 实现了基本的 Toast 弹出式提示，包括成功提示和加载中提示，可以通过 Js 代码控制它们的显示和消失：
buju<div id="loadingToast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-loading weui-icon_toast"></i>
<p class="weui-toast__content">数据加载中</p>
</div>
</div>
$(function(){
var $loadingToast = $('#loadingToast');
$('#showLoadingToast').on('click' function(){
if ($loadingToast.css('display') != 'none') return;
$loadingToast.fadeIn(100);
setTimeout(function () {
$loadingToast.fadeOut(100);
} 2000);
});
});
WeUI 弹出式提示
而在导航相关组件，提供了底部标签栏，和头部导航栏：
WeUI 底部菜单
WeUI 支持黑暗模式，默认跟随系统设置，可以在 body 添加属性 data-weui-theme 来控制，值为 light 或 dark。
<body data-weui-theme="dark">
...
</body>
另外，开源社区还提供了不少的第三方扩展，如 vue-weui、react-weui 等，方便使用不同前端框架的开发者使用，提高开发效率。
总结WeUI 作为微信官方开源的基础样式库，提供了丰富的样式组件，使得开发者可以直接引用到前端项目中，就能实现与微信一致的设计风格，减少了为不同 UI 风格而纠结的困扰，大大提升了微信 Web 应用开发的用户体验和开发效率。对于进行微信 Web 开发的开发人员而言，WeUI 毫无疑问是值得在实践中使用的，设计人员也可以进行学习，参考借鉴其中的设计理念。
