前言：年前的两个星期，学习了下微信公众号的开发。后端基本能够基于盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，关于手机端的浏览器的兼容性，一直是博主的一块心病，因为博主一直专注于bootstrap的相关组件学习，知道bootstrap做响应式没有任何问题，所以曾经尝试过直接用bootstrap来布局，对于一些简单的栅格布局，bootstrap没有任何问题，可是一旦涉及前端组件这一块的时候，总是找不到合适的移动端组件，什么都要自己去实现，这个开发成本就大了去了。于是乎博主打算另辟蹊径，找找基于微信开发的移动端UI组件，最后找到了微信官方开发的一套前端组件：WeUI。
本文原创地址：
一、WeUI组件介绍WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。有了这个作为基础，妈妈再也不用担心微信开发的浏览器兼容性问题了，微信官方推出的东西应该比较靠谱吧！
WeUI开源地址：https://github.com/Tencent/weui
WeUI使用示例：https://weui.io/
基于jquery的WeUI：（提供了大量的第三方组件库）
二、组件基本用法考虑到一些园友对于第三方组件的使用不知道如何下手或者不太熟悉，博主不厌其烦从最基础的开始，手把手教你入门WeUI。已经很熟悉的园友请直接跳过此段，前往官方网站查看demo。
1、引用必须的文件如果你用的是原始的开发方式，比如基于jQuery的开发，那么你首先需要去Github上面将WeUI的源文件down下来，然后引入到你的项目；如果是基于npm管理组件，使用npm命令的方式引入WeUI组件即可。这里博主使用的是原始的开发方式。需要说明的是，如果你只需要WeUI的css样式支持，那么你只需要引入weui.css文件即可；如果除了样式之外，还需要WeUI的js组件支持，那么你还需要引用另外一个包：weui.js。今天这篇，博主就先介绍下基础的WeUI样式库，先来看看WeUI到底能为我们带来啥，以后如果有机会再来分享WeUI.js以及jquery.WeUI.js的相关技术。
这里首先引入必须的css样式文件
<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />