快捷搜索:  汽车  科技

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-为微信)(1)

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安装教程(WeUI-为微信)(2)

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 提供了页面层级规范,用于规范页面元素所属的层级、层级顺序,和组合规范。最底层是内容页面,其上是导航页面,然后是则遮盖层,最上方则是弹出页面。

weui安装教程(WeUI-为微信)(3)

WebUI页面层级

WeUI 提供了丰富的移动端组件,包括:

  • 基础组件:包括 Flex 布局、面板、图标、进度条等
  • 表单:包括 按钮、输入框、选择框、列表等
  • 操作反馈:包括 对话框、消息、弹出式显示等
  • 导航相关:包括 导航栏、标签栏等
  • 搜索相关:搜索栏等

weui安装教程(WeUI-为微信)(4)

WeUI组件

WeUI 提供了微信风格的按钮,包括绿色的主要按钮,以及次操作和警告类操作按钮等,包含了加载中和不可用等按钮状态:

weui安装教程(WeUI-为微信)(5)

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-为微信)(6)

WeUI表单

WeUI 提供了基础的列表组件,可以实现带说明的、带图标和说明的、带跳转的等的列表项,方便向用户展示多行信息:

weui安装教程(WeUI-为微信)(7)

WeUI列表

WeUI 提供了 Badge 徽章组件,可以实现小红点、未读数字、列表标签等多种应用场景:

weui安装教程(WeUI-为微信)(8)

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安装教程(WeUI-为微信)(9)

WeUI Flex布局

对于消息反馈方面,WeUI 提供了对话框,支持 iOS 样式和安卓样式的对话框,提供了携带较多信息的强用户提醒:

weui安装教程(WeUI-为微信)(10)

WeUI对话框

WeUI 还提供了消息页面,为操作结果提供反馈,提示操作成功或是失败,并提供进一步跳转操作:

weui安装教程(WeUI-为微信)(11)

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-为微信)(12)

WeUI 弹出式提示

而在导航相关组件,提供了底部标签栏,和头部导航栏:

weui安装教程(WeUI-为微信)(13)

WeUI 底部菜单

WeUI 支持黑暗模式,默认跟随系统设置,可以在 body 添加属性 data-weui-theme 来控制,值为 light 或 dark。

<body data-weui-theme="dark"> ... </body>

另外,开源社区还提供了不少的第三方扩展,如 vue-weui、react-weui 等,方便使用不同前端框架的开发者使用,提高开发效率。

总结

WeUI 作为微信官方开源的基础样式库,提供了丰富的样式组件,使得开发者可以直接引用到前端项目中,就能实现与微信一致的设计风格,减少了为不同 UI 风格而纠结的困扰,大大提升了微信 Web 应用开发的用户体验和开发效率。对于进行微信 Web 开发的开发人员而言,WeUI 毫无疑问是值得在实践中使用的,设计人员也可以进行学习,参考借鉴其中的设计理念。

猜您喜欢: