WeChat UI 设计

来自Jack's Lab
2017年3月5日 (日) 20:06Comcat (讨论 | 贡献)的版本

(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转到: 导航, 搜索

目录

1 概述

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



其中,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="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css"/>
    </head>
    <body>
        <!-- 使用 -->
        <a href="javascript:;" class="weui_btn weui_btn_primary">绿色按钮</a>
    </body>
</html>



3 Notes

3.1 Switch

<div class="weui_cells_title">鱼缸控制系统</div>
<div class="weui_cells weui_cells_form">

  <div class="weui_cell weui_cell_switch">
    <div class="weui_cell_hd weui_cell_primary">氧气泵</div>
    <div class="weui_cell_ft">
      <input class="weui_switch" type="checkbox">
    </div>
  </div>

  <div class="weui_cell weui_cell_switch">
    <div class="weui_cell_hd weui_cell_primary">景观灯</div>
    <div class="weui_cell_ft">
      <input class="weui_switch" type="checkbox" checked>
    </div>
  </div>

  <div class="weui_cell weui_cell_switch">
    <div class="weui_cell_hd weui_cell_primary">水质净化</div>
    <div class="weui_cell_ft">
      <input class="weui_switch" type="checkbox" checked>
    </div>
  </div>

</div>



3.2 Tabs




4 Reference














个人工具
名字空间

变换
操作
导航
工具箱