WeChat UI 设计
来自Jack's Lab
(版本间的差异)
(→概述) |
(→Notes) |
||
第23行: | 第23行: | ||
<br><br> | <br><br> | ||
− | == | + | == Quick Start == |
+ | |||
+ | <pre> | ||
+ | <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> | ||
+ | </pre> | ||
<br><br> | <br><br> |
2016年3月1日 (二) 11:35的版本
1 概述
微信官方开源了 WeUI ,其是一套与微信原生 UI 一致的 UI 库,核心文件是 weui.css,只需要获取到该文件,然后在页面中引入,即可使用 WeUI 的组件。有以下几种获取方式:
- 微信官方 http://res.wx.qq.com/open/libs/weui/0.4.0/weui.css
- BootCDN http://cdn.bootcss.com/weui/0.4.0/style/weui.css
- cdnjs http://cdnjs.cloudflare.com/ajax/libs/weui/0.4.0/style/weui.css
其中,0.4.0 是目前 WeUI 最新的版本号,其他版本同理。
以上链接,均支持 http 和 https 协议,均包含未压缩版 weui.css 和压缩版 weui.min.css
WeUI 的源码在: https://github.com/weui/weui
WeUI 页面示例:
2 Quick Start
<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>