WeUI 简明入门指南

2016-08-30 本文已影响103621人 Paranoid_K

由于 WeUI 0.4.x 到 1.x 版本更新改动较大，所以本文仅适用于 0.4.x 版本，适用于 1.x 版本的入门指南请查看 WeUI 1.0 简明入门指南。

之前做智慧校园的时候想找一个开源的移动端 UI 框架，找了好多个，比如淘宝的 SUI Mobile、QQ 的 FrozenUI 等，基本都没有满意的，这些框架要么过于庞杂，要么太像 iOS！最后无意间发现了 WeUI 这个框架，一眼就爱上了！加了 WeUI 官方 QQ 群后发现好多童鞋都不知道怎么用，那我就写个简明的入门教程吧！

WeUI 是什么

WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库，你可以把它理解为一个前端框架，类似于 Bootstrap 的那种。由于是微信官方出品，所以对微信的兼容性基本没有太大问题，而且各组件的样式和微信一样，能够和微信很好的融合在一起，给用户较好的体验。

如何使用

WeUI 官方 Github：https://github.com/weui/weui
WeUI 官方 Demo：http://weui.github.io/weui
WeUI 官方 Releases：https://github.com/weui/weui/releases
WeUI 官方 Wiki：https://github.com/weui/weui/wiki

WeUI 是一个样式库，核心文件就是 weui.css，如果用于生产环境，建议使用官方提供的 CDN 或下载官方最新的 Releases 引入即可，CDN 地址可以在官方 Wiki 中找到，生产环境建议使用压缩后的 weui.min.css 。来个简单的范例：

<!DOCTYPE html>
<html lang="zh-CN">
<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 ontouchstart>
    <!-- 使用 WeUI -->
    <a href="" class="weui_btn weui_btn_primary">绿色按钮</a>
</body>
</html>

注意：

viewport 那个 meta 标签不要忘了加

body 标签内有个 ontouchstart 属性也不要忘了

这样就搞定了，你可以任意使用各种组件了，关于组件怎么使用，去看官方 Wiki 就好了，或者 F12 去扒官方 Demo 把他们的代码复制过来就行了，就是这么简单粗暴！

组件

WeUI 的组件目前不是很多，但是也基本能满足大部分需求了。官方 Demo 里面使用了前端路由，但这并不是 WeUI 的一部分，并且 Demo 内也写了一些自定义的 CSS 样式，也不是 WeUI 的一部分，所以我们使用的时候只有组件的样式可以直接复制来，其他的比如路由、逻辑操作、图片上传等都需要自己来搞定！下面来几个组件的 Demo 方便需要的童鞋直接复制：

九宫格

九宫格就是官方 Demo 首页那个样式，九宫格不一定非要是九个，几个都可以的，看自己的需求了！

<div class="weui_grids">
    <a href="" class="weui_grid">
        <div class="weui_grid_icon">
            <img src="" alt="">
        </div>
        <p class="weui_grid_label"></p>
    </a>
    <a href="" class="weui_grid">
        <div class="weui_grid_icon">
            <img src="" alt="">
        </div>
        <p class="weui_grid_label"></p>
    </a>
</div>

weui_grids 是整个九宫格组件的样式，weui_grid 是一个一个宫格，我这里只写了两个，你需要几个就写几遍，weui_grid_icon 是一个宫格的图标，weui_grid_label 就是图标下面那个字咯！图标最好使用矢量图，以保证在不同设备上的清晰度，图片的尺寸不需要自己写上，WeUI 已经帮你搞定了！

Tabbar

Tabbar 是位于页面底部的导航，相当于 App 的Dock 栏，通过点击每个按钮切换页面的主体内容。

<div class="weui_tab">
    <div class="weui_tab_bd"></div>
    <div class="weui_tabbar">
        <a href="" class="weui_tabbar_item weui_bar_item_on">
            <div class="weui_tabbar_icon">
                <img src="" alt="">
            </div>
            <p class="weui_tabbar_label">1</p>
        </a>
        <a href="" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="" alt="">
            </div>
            <p class="weui_tabbar_label">2</p>
        </a>
        <a href="" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="" alt="">
            </div>
            <p class="weui_tabbar_label">3</p>
        </a>
        <a href="" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="" alt="">
            </div>
            <p class="weui_tabbar_label">4</p>
        </a>
    </div>
</div>

Tabbar 的 class 为weui_tabbar，一般嵌套在 weui_tab 内，weui_tab_bd 为 Tab 页面的主体内容，weui_tabbar_item 为 Tabbar 的一个一个的按钮，建议为 3~5 个，weui_tabbar_icon 为每个按钮的图标，weui_tabbar_label 为图标下面的字，Active 状态可以使用 weui_bar_item_on 样式。注意，你这样写完后会发现 Tabbar 位于页面最顶端，这是因为 WeUI 没有定义 html, body 的高度，所以给其定义个 height: 100%; 就可以了！

html,body{height: 100%;}

表单

这个就不写代码了，去复制 Demo 或 Wiki 里面的代码就好了，不过有一点要注意：你会发现表单内可以输入日期、时间和数字等，但这并不是 WeUI 的组件，而是使用 HTML 5 的 input 属性，然后调用的浏览器自身的控件来输入日期、时间等的。日期：

<input type="date" class="weui_input">

时间：

<input type="datetime-local" class="weui_input">

数字：

<input type="number" class="weui_input">

更多 HTML 5 Input 类型请参考：HTML5 Input 类型

WeUI 简明入门指南

WeUI 是什么

如何使用

组件

九宫格

Tabbar

表单

猜你喜欢

热点阅读