WeUI 使用教程

WeUI 使用教程

weui A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications. 项目地址: https://gitcode.com/gh_mirrors/we/weui

1. 项目介绍

WeUI 是由微信官方设计团队打造的一个微信风格的 UI 框架，专为微信网页开发设计，旨在提升和统一微信用户的体验。它包含了按钮、单元格、对话框、进度条、提示框、文章、操作菜单、图标等组件，可以帮助开发者快速构建出符合微信风格的网页应用。

2. 项目快速启动

首先，确保你的开发环境中安装了 Node.js 和 npm。然后，按照以下步骤启动 WeUI 项目：

# 克隆项目到本地
git clone https://github.com/Tencent/weui.git

# 进入项目目录
cd weui

# 安装依赖
npm install

# 运行构建脚本
npm run build

# 启动本地服务器
npm start

执行以上命令后，WeUI 项目将会在本地启动，并可通过浏览器访问 http://localhost:8080 查看效果。

3. 应用案例和最佳实践

• 按钮使用案例：使用 WeUI 提供的按钮组件可以轻松创建风格一致的按钮。

<button class="weui-btn weui-btn_primary">主要按钮</button>
<button class="weui-btn weui-btn_default">默认按钮</button>

• 列表单元格使用案例：列表单元格是展示信息的基础组件。

<div class="weui-cells">
  <div class="weui-cell">
    <div class="weui-cell__bd">
      <p>标题</p>
    </div>
    <div class="weui-cell__ft">说明文字</div>
  </div>
</div>

• 对话框使用案例：对话框用于展示重要信息，并需要用户做出决策。

<div class="weui-dialog">
  <div class="weui-dialog__hd"><strong class="weui-dialog__title">标题</strong></div>
  <div class="weui-dialog__bd">内容</div>
  <div class="weui-dialog__ft">
    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
  </div>
</div>

在使用 WeUI 的过程中，应保持组件的一致性和统一性，以确保用户熟悉的体验。

4. 典型生态项目

• WeUI for 小程序 (weui-wxss)：为微信小程序提供的 WeUI 版本，可以方便地在小程序中使用 WeUI 组件。

• WeUI for Work (企业微信版)：为企业微信定制化的 WeUI 版本，满足企业内部应用开发的需求。

• weui.js：WeUI 的 JavaScript 版本，提供了一些交互组件和功能的 JavaScript 实现。

• react-weui：将 WeUI 组件封装成 React 组件，方便在 React 项目中使用 WeUI 风格的 UI。

weui A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications. 项目地址: https://gitcode.com/gh_mirrors/we/weui