WEUI框架的学习：
经过一天时间的WEUI框架的学习，初步了解到WEUI框架是一套与微信原生 UI 一致的 UI 库，核心文件是weui.css。WEUI框架的主体是仿照bootstrap框架的。在有bootstrap框架的基础再去学习WEUI框架就感觉不是很难，但是在学习的过程中还是回遇到一些问题。
今天自学的内容是从https://weui.io/上分类进行的分步学习的：
1、WEUI框架环境的搭建
方式一（推荐）
微信官方、BootCDN 和 cdnjs 为 WeUI 提供了 CDN 链接，推荐使用，链接如下：
其中，1.0.0是目前 WeUI 最新的版本号，代码命名有较大的改变，因此保留0.4.2的CDN。
以上链接，均支持 http 和 https 协议，均包含未压缩版 weui.css 和压缩版 weui.min.css 。
方式二（bower）
可以通过 bower 进行下载，命令如下：
bower install --save weui
方式三（npm）
也可以通过 npm 进行下载，命令如下：
npm install --save weui
注意： bower、npm 依赖于 Node.js，请确保你的机器安装 Node.js 环境，安装方式参见 https://nodejs.org
方式四
可以在 https://github.com/weui/weui/releases 处，直接下载最新发布的版本。github 提供了 zip 和 tar.gz 两种格式的包，选择其中一种下载，解压后引用 dist/style/weui.css 文件即可。
方式五
也可以在 WeUI 的 github 主页，右上角的“Download ZIP”按钮，点击下载仓库中最新的代码，解压后使用方法同方式四。
注意： 该方式获取的是 WeUI 最新的、未经发布的代码，可能不稳定，不推荐通过此方式获取 WeUI 用于生产环境。
2、WEUI框架组件的学习
今天只是把WEUI框架的所有的组件简单的过一遍，学习了各组件实现的代码。就用Button 按钮组件来进行分析：
button按钮组件的heml代码如下：
<button class="weui-btn weui-btn_primary weui-btn_disabled">确定按钮</button>
<button class="weui-btn weui-btn_default">取消按钮</button>
<button class="weui-btn weui-btn_warn">警告按钮</button>
<button class="weui-btn weui-btn_disabled">禁用按钮</button>
<!--a连接-->
<a class="weui-btn weui-btn_primary" href="#">a连接primary</a>
<a href="#" class="weui-btn weui-btn_default">a连接default</a>
<a href="#" class="weui-btn weui-btn_warn">a连接warn</a>
<a href="#" class="weui-btn weui-btn_disabled">a连接disabled</a>
<!--镂空按钮-->
<button class="weui-btn weui-btn_plain-default">镂空按钮default</button>
<button class="weui-btn weui-btn_plain-primary">镂空按钮primary</button>
<button class="weui-btn weui-btn_plain-disabled weui-btn_plain-primary">镂空按钮disabled</button>
<!--小型按钮-->
<button class="weui-btn weui-btn_default weui-btn_mini">小型按钮</button>
<button class="weui-btn weui-btn_primary weui-btn_mini">小型按钮</button>
按钮可以使用a或者button标签。wap上要触发按钮的active态，必须触发ontouchstart事件，可以在body上加上ontouchstart=""全局触发。
按钮常见的操作场景：确定、取消、警示，分别对应class：weui-btn_primary、weui-btn_default、weui-btn_warn，每种场景都有自己的置灰态weui-btn_disabled，除此外还有一种镂空按钮weui-btn_plain-xxx，客户端webview里的按钮尺寸有两类，默认宽度100%，小型按钮宽度自适应，两边边框与文本间距0.75em。
button代码实例图如下：
通过对button按钮的举例可以大概的了解到WEUI框架与bootstrap框架是很相似的所以学习起来就不是很难了，WEUI框架与bootstrap框架都是对css样式和js样式进行包装，通过引入css样式和js样式，在html标签中添加类名来实现。
3、一天学习总结
经过一天的学习，大概了解到WEUI框架大部分是三层结构。分为头部，身体，尾部的结构来布局组件，以表单预览为例代码如下：
<div class="weui-form-preview"> <div class="weui-form-preview__hd"> <label class="weui-form-preview__label">付款金额</label> <em class="weui-form-preview__value">￥2400.00</em> </div> <div class="weui-form-preview__bd"> <p> <label class="weui-form-preview__label">商品</label> <span class="weui-form-preview__value">电动打蛋机</span> </p> <p> <label class="weui-form-preview__label">标题标题</label> <span class="weui-form-preview__value">名字名字名字</span> </p> <p> <label class="weui-form-preview__label">标题标题</label> <span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span> </p> </div> <div class="weui-form-preview__ft"> <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</a> </div> </div>
实现图如下：
把表单预览分为weui-form-preview__bd，weui-form-preview__bd，weui-form-preview__ft 三层来布局组件的。
总结：
WEUI框架是很容易学的框架，我们可以在具有一定的前端基础的前提下进行自学，在自学的过程中要有一定的方法和方式。WEUI框架大部分地方是使用弹性盒子的模式来布局，让网页具有响应式。