快速上手

获取 WeUI

WeUI 是一套与微信原生 UI 一致的 UI 库，核心文件是 weui.css，只需要获取到该文件，然后在页面中引入，即可使用 WeUI 的组件。有以下几种获取方式：

方式一（推荐）

微信官方、BootCDN 和 cdnjs 为 WeUI 提供了 CDN 链接，推荐使用，链接如下：

来源 地址
微信官方 //res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css
微信官方 //res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css
BootCDN //cdn.bootcss.com/weui/0.4.3/style/weui.css
cdnjs //cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css

其中，1.0.0是目前 WeUI 最新的版本号，代码命名有较大的改变，因此保留0.4.2的CDN。

以上链接，均支持 http 和 https 协议，均包含未压缩版 weui.css 和压缩版 weui.min.css 。

方式二（bower）

可以通过 bower 进行下载，命令如下：

  1. bower install --save weui
方式三（npm）

也可以通过 npm 进行下载，命令如下：

  1. npm install --save weui

注意： bower、npm 依赖于 Node.js，请确保你的机器安装 Node.js 环境，安装方式参见 https://nodejs.org

方式四

可以在 https://github.com/weui/weui/releases 处，直接下载最新发布的版本。github 提供了 zip 和 tar.gz 两种格式的包，选择其中一种下载，解压后引用 dist/style/weui.css 文件即可。

方式五

也可以在 WeUI 的 github 主页，右上角的“Download ZIP”按钮，点击下载仓库中最新的代码，解压后使用方法同方式四。

注意： 该方式获取的是 WeUI 最新的、未经发布的代码，可能不稳定，不推荐通过此方式获取 WeUI 用于生产环境。

使用

通过以上方式获取到 WeUI 后，在页面中引入后即可使用。以 WeUI 的按钮为例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  6.         <title>WeUI</title>
  7.         <!-- 引入 WeUI -->
  8.         <link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>
  9.     </head>
  10.     <body>
  11.         <!-- 使用 -->
  12.         <a href="javascript:;" class="weui-btn weui-btn_primary">绿色按钮</a>
  13.     </body>
  14. </html>

更多的上手示例，请参考 http://weui.io/

原文: https://github.com/Tencent/weui/wiki/getting-started