多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
### 快速上手 #### 获取 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/1.1.3/weui.min.css) | | 微信官方| [//res.wx.qq.com/open/libs/weui/0.4.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](//cdn.bootcss.com/weui/0.4.3/style/weui.css)| |cdnjs|[//cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css](//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 进行下载,命令如下: ``` bower install --save weui ``` ##### 方式三(npm) 也可以通过 npm 进行下载,命令如下: ``` npm install --save weui ``` **注意:** bower、npm 依赖于 Node.js,请确保你的机器安装 Node.js 环境,安装方式参见 https://nodejs.org ##### 方式四 可以在 https://github.com/Tencent/weui/releases 处,直接下载最新发布的版本。github 提供了 zip 和 tar.gz 两种格式的包,选择其中一种下载,解压后引用 `dist/style/weui.css` 文件即可。 ##### 方式五 也可以在 WeUI 的 github 主页,右上角的“Download ZIP”按钮,点击下载仓库中最新的代码,解压后使用方法同方式四。 **注意:** 该方式获取的是 WeUI 最新的、未经发布的代码,可能不稳定,不推荐通过此方式获取 WeUI 用于生产环境。 #### 使用 通过以上方式获取到 WeUI 后,在页面中引入后即可使用。以 WeUI 的按钮为例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>WeUI</title> <!-- 引入 WeUI --> <link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/> </head> <body> <!-- 使用 --> <a href="javascript:;" class="weui-btn weui-btn_primary">绿色按钮</a> </body> </html> ``` 更多的上手示例,请参考 http://weui.io/