经过几天的自学，在对Weui框架有了基本的了解之后，小做了智学无忧微信公众号的几个页面，在这里，对这几天的学习和项目练习做个总结。

一、Weui 框架的理解

WeUI是一个类似微信的UI框架，由WeChat设计团队正式设计，为微信Web开发量身定制，以改善和标准化微信用户的体验。包括组分如button，cell，dialog，progress，toast，article，actionsheet，icon。

二、基本会使用Weui框架基本组件，如：

Flex

使用 Flex 实现的栅格

<div class="weui-flex">
  <div class="weui-flex__item">weui</div>
  <div class="weui-flex__item">weui</div>
</div>

按钮

按钮可以使用 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：

<a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a>

简单列表

Cell，列表视图，用于将信息以列表的结构显示在页面上，是wap上最常用的内容结构。Cell由多个section组成，每个section包括section header weui-cells_title 以及 weui-cells。

cell由 thumbnailweui-cell__hd、bodyweui-cell__bd、accessoryweui-cell__ft三部分组成，cell采用自适应布局；

<div class="weui-cells">
  <div class="weui-cell">
    <div class="weui-cell__bd">
      <p>标题文字</p>
    </div>
    <div class="weui-cell__ft">说明文字</div>
  </div>
</div>

不一一列举，把资料网址放在这里，有需要时可以随时查阅

http://jqweui.com/

https://github.com/Tencent/weui

三、最后总结一下个人项目中遇到的问题

1.关于SPA 单页面应用程序(Single Page Application)，之前并没有没有听说过这个概念，学了Weui之后大概了解了SPA的原理，但对于SPA的使用却还是无从下手

2.不清楚移动端开发有哪些事件类型，如有一个确定按钮，考虑全面的话，除了监听click事件，并不知道还需要监听哪些事件

3.另外，初步接触小程序，对于小程序开发流程，代码结构，服务端部署，还需要多下功夫学习。