由于 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 简明入门指南相关推荐

有趣的机器学习：最简明入门指南
转: http://blog.jobbole.com/67616/ 本文由伯乐在线 - toolate 翻译.未经许可,禁止转载! 英文出处:medium.欢迎加入翻译组. 在听到人们谈论机器学习的 ...
简明易懂的c#入门指南_统计假设检验的简明指南
简明易懂的c#入门指南介绍 (Introduction) One of the main applications of frequentist statistics is the comparis ...
html怎样使用ui套件,weui框架组件小白入门指南：如何安装使用weui.js?
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 苏南大叔在本文中说说腾讯的weui这个前端框架的基本使用方法.这款框架已经问世有几年的时间了,因为其可以把微信 ...
python语言入门w-Python完全小白入门指南
前几天整理了Linux的入门材料Linux运维完全小白入门指南,趁着这热乎劲,又整理了一下自己学Python时候的资料,今天也一并分享出来. 还是之前的说过的,这里只适合初级或者未入门的小白,想看高阶 ...
node.js Web应用框架Express入门指南
node.js Web应用框架Express入门指南作者: 字体:[增加减小] 类型:转载时间:2014-05-28 我要评论这篇文章主要介绍了node.js Web应用框架Express入门 ...
编程入门指南 v1.4
著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:Badger 链接:http://zhuanlan.zhihu.com/xiao-jing-mo/19959253 来源: ...
python入门指南-Python完全小白入门指南
前几天整理了Linux的入门材料Linux运维完全小白入门指南,趁着这热乎劲,又整理了一下自己学Python时候的资料,今天也一并分享出来. 还是之前的说过的,这里只适合初级或者未入门的小白,想看高阶 ...
初级软件测试工程师零基础入门指南
初级软件测试工程师零基础入门指南唐井军编著 2012年10月 1.基本概念 1.1软件软件就是可以在计算机上运行的计算机程序,如操作系统Windows.办公软件Office.聊天QQ.手机游戏等 ...
《转载》编程入门指南 v1.4
编程入门指南 v1.4 Badger · 8 个月前作者:@萧井陌, @Badger 自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 CoCode ...

WeUI 简明入门指南

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

WeUI 是什么

如何使用

组件

九宫格

Tabbar

表单

WeUI 简明入门指南相关推荐

最新文章

热门文章