WeUI 简明入门指南

由于 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 。 来个简单的范例：

    
    
    
    
    


    
    绿色按钮

注意：

• viewport 那个 meta 标签不要忘了加
• body 标签内有个 ontouchstart 属性也不要忘了

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

组件

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

九宫格

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

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

Tabbar

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

    

    

        
            

                
            
            
1
        
        
            

                
            
            
2
        
        
            

                
            
            
3
        
        
            

                
            
            
4
        
    

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 属性，然后调用的浏览器自身的控件来输入日期、时间等的。 日期：

时间：

数字：

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